SiteMesh的介紹就不多說了,主要是用來統一頁面風格,減少重復編碼的。
它定義了一個過濾器,然后把頁面都加上統一的頭部和底部。
需要先在WEB-INF/lib下引入sitemesh的jar包:http://wiki.sitemesh.org/display/sitemesh/Download 。這里使用2.4版本。
過濾器定義:
在web.xml中
<filter> <filter-name>sitemesh</filter-name> <filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class> </filter> <filter-mapping> <filter-name>sitemesh</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
decorators.xml文件:
WEB-INF下新建decorators.xml文件:
<?xml version="1.0" encoding="utf-8"?> <decorators defaultdir="/WEB-INF/layouts/"> <!-- 此處用來定義不需要過濾的頁面 --> <excludes> <pattern>/static/*</pattern> </excludes> <!-- 用來定義裝飾器要過濾的頁面 --> <decorator name="default" page="default.jsp"> <pattern>/*</pattern> </decorator> </decorators>
不用過濾/static/目錄下的文件,然后指定了裝飾器:/WEB-INF/layouts/default.jsp。
我用的是Spring MVC,目錄結構大致:
default.jsp:
<%@ page contentType="text/html;charset=UTF-8"%> <%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="ctx" value="${pageContext.request.contextPath}" /> <!DOCTYPE html> <html> <head> <title>QuickStart示例:<sitemesh:title/></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Cache-Control" content="no-store" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <link type="image/x-icon" href="${ctx}/static/images/favicon.ico" rel="shortcut icon"> <link href="${ctx}/sc/bootstrap/2.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> <link href="${ctx}/sc/jquery-validation/1.11.0/validate.css" type="text/css" rel="stylesheet" /> <link href="${ctx}/css/base/default.css" type="text/css" rel="stylesheet" /> <script src="${ctx}/sc/jquery/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="${ctx}/sc/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script> <script src="${ctx}/sc/jquery-validation/1.11.0/messages_bs_zh.js" type="text/javascript"></script> <sitemesh:head/> </head> <body> <div class="container"> <%@ include file="/WEB-INF/layouts/header.jsp"%> <div id="content"> <sitemesh:body/> </div> <%@ include file="/WEB-INF/layouts/footer.jsp"%> </div> <script src="${ctx}/sc/bootstrap/2.3.0/js/bootstrap.min.js" type="text/javascript"></script> </body> </html>
首先引入了SiteMesh標簽。
<sitemesh:title/> 會自動替換為被過濾頁面的title。
<sitemesh:head/> 會把被過濾頁面head里面的東西(除了title)放在這個地方。
<sitemesh:body/> 被過濾的頁面body里面的內容放在這里。
在content的上下引入了header和footer。
我們在頭部引入了js和css,就可以重用了。
使用:
使用的過程中,幾乎感受不到SiteMesh的存在。例如下面的頁面:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!-- 第一個被裝飾(目標)頁面 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>被裝飾(目標)頁面title</title> <script type="text/javascript" src="/js/hello.js"></script> </head> <body> <h4>被裝飾(目標)頁面body標簽內內容。</h4> <h3>使用SiteMesh的好處?</h3> <ul> <li>被裝飾(目標)頁面和裝飾頁面完全分離。</li> <li>做到真正的頁面復用,一個裝飾頁面裝飾多個被裝飾(目標)頁面。</li> <li>更容易實現統一的網站風格。</li> <li>還有。。。</li> </ul> </body> </html>
這就是一個普通的頁面,但是被SiteMesh裝飾之后,就會自動去掉<html> <body> <head>等元素,然后把相應的東西放在模板對應位置上。
我們來看一下,被SiteMesh裝飾過的頁面源代碼:

<!DOCTYPE html> <html> <head> <title>QuickStart示例:被裝飾(目標)頁面title</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Cache-Control" content="no-store" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <link type="image/x-icon" href="/SpringMVC/static/images/favicon.ico" rel="shortcut icon"> <link href="/SpringMVC/sc/bootstrap/2.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> <link href="/SpringMVC/sc/jquery-validation/1.11.0/validate.css" type="text/css" rel="stylesheet" /> <link href="/SpringMVC/css/base/default.css" type="text/css" rel="stylesheet" /> <script src="/SpringMVC/sc/jquery/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="/SpringMVC/sc/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script> <script src="/SpringMVC/sc/jquery-validation/1.11.0/messages_bs_zh.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="/js/hello.js"></script> </head> <body> <div class="container"> <div id="header"> </div> <div id="content"> <h4>被裝飾(目標)頁面body標簽內內容。</h4> <h3>使用SiteMesh的好處?</h3> <ul> <li>被裝飾(目標)頁面和裝飾頁面完全分離。</li> <li>做到真正的頁面復用,一個裝飾頁面裝飾多個被裝飾(目標)頁面。</li> <li>更容易實現統一的網站風格。</li> <li>還有。。。</li> </ul> </div> <div id="footer"> Copyright © 2005-2012 <a href="">spring.org.cn</a> </div> </div> <script src="/SpringMVC/sc/bootstrap/2.3.0/js/bootstrap.min.js" type="text/javascript"></script> </body> </html>
總結:
SiteMesh配置簡單,使用靈活,幾乎不會影響我們的正常開發,作為一個默默無聞的好幫手,非常推薦使用。