台灣的Web工程師

Appfuse這個範本網站結合了很多的Plugin，其中的一項Plugin叫做SiteMesh，這個SiteMesh Plugin的功能，就是幫助開發人員在網頁的製作上，將Header與Footer另外切出來，這個可以讓開發人員專心在每個頁面的製作上，而且如果Header或Footer需要變更時，只要變更一頁即可，不需要每一頁去進行修改。

SiteMesh在Appfuse中的宣告

在實作SiteMesh時，必須在web.xml中宣告sitemesh的filter，這個部份Appfuse已經幫我們處理好了，Appfuse在web.xml中宣告sitemesh的內容為：

之後我們就可以在WEB-INF/decorators.xml裡面設定對應的網頁。

SiteMesh在Appfuse中的使用

在decorators.xml中，Appfuse幫我們定義好網頁的Header、footer了，如下圖：

1. 第一行宣告了預設的資料夾。

2. 第二～七行，宣告這一類的網址不使用sitemesh機制。

3. 在第八～十行，宣告所有的網址（/*）都要套用defalut.jsp（在/decorators的資料夾下）。

而展開default.jsp後可以看到跟sitemesh有關的內容如下：（名詞說明：範本頁→default.jsp，內頁→實際要讀取的頁面，被鑲嵌在範本頁中的JSP）

首先是被include進來的taglib.jsp裡宣告了sitemesh的JSTL：

Default.jsp的第十行：

將內頁的的title放置在範本頁的這裡；

第十五行，將內頁的head放置在這裡，不過因為default.jsp的jQuery在17才會import進來，所以會導至我們內頁吃不到jQuery，所以筆著會把十五行的<decorator:head />移到</head>的上方，這樣我們的內頁在使用JQuery時才會不有問題，如下圖：

第49行（因為上方有加了一行，原本是48行），將內頁的body放在這裡。

所以最後使用者看到的Header與Footer是以default.jsp為主，而實際上頁面顯示的資料，則根據內頁的JSP的不同而變化，這就是sitemesh在Appfuse中的應用。