介紹
SiteMesh 是一個網頁佈局和修飾的框架,利用它可以將網頁的內容和頁面結構分離,以達到頁面結構共享的目的。
Sitemesh 是由一個基於Web 頁面佈局、裝飾以及與現存 Web 應用整合的框架。它能幫助我們在由大量頁面構成的項目中創建一致的頁面佈局和外觀,如一致的導航條,一致的 banner,一致的版權,等等。它不僅僅能處理動態的內容,如 jsp,php,asp 等產生的內容,它也能處理靜態的內容,如 htm 的內容,使得它的內容也符合你的頁面結構的要求。甚至於它能將 HTML 文件象 include 那樣將該文件作為一個面板的形式嵌入到別的文件中去。所有的這些,都是 GOF 的 Decorator 模式的最生動的實現。儘管它是由 java 語言來實現的,但它能與其他 Web 應用很好地集成。
下圖是SiteMesh的結構圖:
工作原理
SiteMesh 是基於 Servlet 的 filter 的,即過濾流。它是通過截取 response,並進行裝飾後再交付給客戶。
其中涉及到兩個名詞: 裝飾頁面(decorator page)和 被裝飾頁面(Content page), 即 SiteMesh 通過對 Content Page 的裝飾,最終得到頁面佈局和外觀一致的頁面,並返回給客戶。
運行SiteMesh3至少需要:
- JDK 1.5
- 一個Servlet 2.5兼容容器
- SiteMesh 運行時庫
配置及使用
下載
wiki上的下載鏈接為:http://wiki.sitemesh.org/wiki/display/sitemesh3/Home
GitHub上3.0.1版本下載地址為(含demo):https://github.com/sitemesh/sitemesh3/releases/tag/3.0.1
1、添加maven依賴
pom.xml文件添加以下依賴:
org.sitemesh sitemesh 3.0.1
2、web.xml中添加SiteMesh過濾器
... sitemesh org.sitemesh.config.ConfigurableSiteMeshFilter sitemesh /*
3、創建一個“裝飾頁面”(decorator page)
該裝飾頁面包含Web應用程序中常見得佈局和樣式,它是一個包含
title> 標籤` `將會被 SiteMesh 重寫,用來包含從『被裝飾頁面』(content page)中提取到的值。可以從被裝飾頁面(content page)中提取更多的屬性,並且可以自定義規則 。 在WEB應用程序中創建`/decorator.html`,其中包含:```html SiteMesh example: Title goes here SiteMesh example site: Title goes here
Body goes here. Blah blah blah. Site disclaimer. This is an example.
在這個例子中,裝飾頁面是一個靜態的.html文件,但是如果你希望用動態頁面,那麼可以使用諸如JSP,FreeMarker等技術。
4、創建一個“被裝飾頁面”(content page)
Hello World Well hello there, fine world.
And so concludes this SiteMesh example.
How it works
- This page (
/index.html
) contains vanilla HTML content. - SiteMesh is configured (in
/WEB-INF/web.xml
) to apply a decorator to all paths (/*
). - The decorator (
/decorator.html
) contains the common look and feel that is applied to the site.
像裝飾頁面一樣,被裝飾頁面可以是靜態文件,也可以是由 Servlet 引擎動態生成(例如JSP)。
5、配置
SiteMesh 配置支持兩種方法 : XML 或 Java。
5.1、XML方式
在工程的 /WEB-INF/sitemesh3.xml中添加以下設置:
5.1、Java方式
要使用 Java 的配置方式,自定義的 SitMesh 過濾器需要繼承org.sitemesh.config.ConfigurableSiteMeshFilter並重寫applyCustomConfiguration(SiteMeshFilterBuilder builder)方法。 具體如下:
package com.wangxiaoan1234;import org.sitemesh.builder.SiteMeshFilterBuilder;import org.sitemesh.config.ConfigurableSiteMeshFilter;public class MySiteMeshFilter extends ConfigurableSiteMeshFilter { [@Override](https://my.oschina.net/u/1162528) protected void applyCustomConfiguration(SiteMeshFilterBuilder builder) { builder.addDecoratorPath("/*", "/decorator.html"); }}
既然使用 Java 配置方式,就不再需要sitemesh3.xml文件,但是在web.xml中要使用自己重寫的 SiteMesh 過濾器。 即web.xml的設置改成如下所示:
sitemesh com.wangxiaoan1234.MySiteMeshFilter sitemesh /*
6、查看效果
本地查看內容頁面.html效果如下:
通過SiteMesh3裝飾後訪問效果如下:
查看該效果頁面源代碼如下:
SiteMesh example: Hello World (Dynamic) SiteMesh example site: Hello World (Dynamic)
This page demonstrates that dynamic content can be decorated in the same way as static content.
This is a simple JSP that shows the date and time on the server is now:
Tue Aug 15 14:25:41 CST 2017 Of course, with SiteMesh you are not limited to JSP. Because it's a Servlet Filter, both content and decorators can be generated by any technology in your ServletEngine, including: static files, JSP, Velocity, FreeMarker, JSF, MVC frameworks, JRuby.... you get the point.
Site disclaimer. This is an example.
7、高級配置
7.1、XML形式配置
sitemesh3.xml文件如下:
text/html application/vnd.wap.xhtml+xml application/xhtml+xml /articles/* /decorators/article.html /decorators/two-page-layout.html /decorators/common.html
7.2、Java形式配置
對應 Java 配置如下(同理還是在web.xml中引用自己的 SiteMesh 過濾器):
package com.wangxiaoan1234;import org.sitemesh.builder.SiteMeshFilterBuilder;import org.sitemesh.config.ConfigurableSiteMeshFilter;public class MySiteMeshFilter extends ConfigurableSiteMeshFilter { [@Override](https://my.oschina.net/u/1162528) protected void applyCustomConfiguration(SiteMeshFilterBuilder builder) { //默認裝飾器,當下面的路徑都不匹配時,啟用該裝飾器進行裝飾 builder.addDecoratorPath("/*", "/decorator.html") //添加更多的 mime 類型 .setMimeTypes("text / html","application / xhtml + xml","application / vnd.wap.xhtml + xml") //不同匹配路徑採用不同的裝飾頁面 .addDecoratorPath("/admin/*", "/another-decorator.html") .addDecoratorPath("/*.special.jsp", "/special-decorator.html") //一個匹配路徑同時採用不同的裝飾頁面 .addDecoratorPaths("/articles/*", "/decorators/article.html", "/decoratos/two-page-layout.html", "/decorators/common.html") //滿足該匹配路徑將不被裝飾 .addExcludedPath("/javadoc/*") //添加自定義標籤 .addTagRuleBundle(new CssTagRuleBundle()); }}
其中自定義標籤類格式如下:
package com.wangxiaoan1234;import org.sitemesh.SiteMeshContext;import org.sitemesh.content.ContentProperty;import org.sitemesh.content.tagrules.TagRuleBundle;import org.sitemesh.content.tagrules.html.ExportTagToContentRule;import org.sitemesh.tagprocessor.State;/** * 自定義標籤 */public class CssTagRuleBundle implements TagRuleBundle { [@Override](https://my.oschina.net/u/1162528) public void install(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) { defaultState.addRule("my-css", new ExportTagToContentRule(siteMeshContext, contentProperty.getChild("my-css"), false)); defaultState.addRule("my-footer", new ExportTagToContentRule(siteMeshContext, contentProperty.getChild("my-footer"), false)); } [@Override](https://my.oschina.net/u/1162528) public void cleanUp(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) { }}
在web.xml中還可以指定請求來源:
sitemesh com.wangxiaoan1234.MySiteMeshFilter sitemesh /* FORWARD REQUEST
自定義標籤的使用:
裝飾頁面(decorator):
SiteMesh example: Title goes here pppppppppppppppppppppp
內容頁面(content):
Hello World div p { color : red; } Well hello there, fine world.
And so concludes this SiteMesh example.
©wangxiaoan1234.com
效果:
效果頁面源碼:
SiteMesh example: Hello World pppppppppppppppppppppp
©wangxiaoan1234.com
專注於技術熱點大數據,人工智能,JAVA、Python、 C 、GO、Javascript等語言最新前言技術,及業務痛點問題分析,請關注【編程我最懂】共同交流學習。
閱讀更多 編程我最懂 的文章