sitemesh

sitemesh
OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration)的框架组件,能够帮助网站开发人员较容易实现页面中动态内容和静态装饰外观的分离。



1.引入jar包
https://github.com/sitemesh/sitemesh3/downloads
2.配置web.xml
<web-app>

  <filter>
    <filter-name>sitemesh</filter-name>
    <filter-class>org.sitemesh.config.ConfigurableSiteMeshFilter</filter-class>
  </filter>

  <filter-mapping>
    <filter-name>sitemesh</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

</web-app>

3.创建装饰模板,包含内容的占位符<title>,<head>,<body>
<html>
  <head>
    <title>SiteMesh example: <sitemesh:write property='title'/></title>
    <style type='text/css'>
      /* Some CSS */
      body { font-family: arial, sans-serif; background-color: #ffffcc; }
      h1, h2, h3, h4 { text-align: center; background-color: #ccffcc; border-top: 1px solid #66ff66; }
      .mainBody { padding: 10px; border: 1px solid #555555; }
      .disclaimer { text-align: center; border-top: 1px solid #cccccc; margin-top: 40px; color: #666666; font-size: smaller; }
    </style>
    <sitemesh:write property='head'/>
  </head>
  <body>

    <h1 class='title'>SiteMesh example site: <sitemesh:write property='title'/></h1>

    <div class='mainBody'>
      <sitemesh:write property='body'/>
    </div>

    <div class='disclaimer'>Site disclaimer. This is an example.</div>

  </body>
</html>

4.配置映射sitemesh3.xml
<sitemesh>
  <!-- 哪些路径应用哪个装饰器,可以用*进行通配 -->
  <mapping path="/*" decorator="/decorator.html"/>
  <!-- 排除那些路径 -->
  <mapping path="/brochures/*" exclue="true"/>
</sitemesh>

5.创建一个页面
<html>
  <head>
    <title>Hello World</title>
    <meta name='description' content='A simple page'>
  </head>
  <body>
    <p>Hello <strong>world</strong>!</p>
  </body>
</html>

6.结果
<html>
  <head>
    <title>SiteMesh example: Hello World</title>
    <style type='text/css'>
      /* Some CSS */
      body { font-family: arial, sans-serif; background-color: #ffffcc; }
      h1, h2, h3, h4 { text-align: center; background-color: #ccffcc; border-top: 1px solid #66ff66; }
      .mainBody { padding: 10px; border: 1px solid #555555; }
      .disclaimer { text-align: center; border-top: 1px solid #cccccc; margin-top: 40px; color: #666666; font-size: smaller; }
    </style>
    <meta name='description' content='A simple page'>
  </head>
  <body>

    <h1 class='title'>SiteMesh example site: Hello World</h1>

    <div class='mainBody'>
      <p>Hello <strong>world</strong>!</p>
    </div>

    <div class='disclaimer'>Site disclaimer. This is an example.</div>

  </body>
</html>

你可能感兴趣的:(sitemesh)