在 SpringSide 2.0 中使用 Tiles 模板減少網頁代碼重複

Web 開發中，網頁代碼重複不可避免。我們做的網站，所有頁面佈局統一，只有數據相關部分不同。若每頁面包含完整 HTML 代碼，會造成大量重複代碼，修改公共部分（如頁頭頁尾）時需改多個頁面，非常麻煩。

解決辦法很多：ASP.NET 有母板頁機制，Java 開發中最簡單是 JSP include 指令，也可用許多第三方模板庫。這裡選用 Tiles 模板引擎，Tiles 是 Struts 組成部分，故在 SpringSide 2.0 中使用時，無需下載第三方組件、無需額外配置，直接使用。

頁面佈局分析

以 welcome.jsp 為例，佈局如下：

用戶註冊頁 RegUserStep1.jsp 佈局：

它們區別僅在左邊邊欄和右邊內容區不同，頁頭頁尾和菜單欄相同。若每頁面含完整 HTML 會造成大量重複。故使用 Tiles 模板引擎。將頁面分成：頁頭、菜單、邊欄、內容欄、頁尾。網頁中其他不可見部分也有區別：網頁標題、CSS 代碼、JavaScript 代碼，也抽取出來。

佈局頁面 layout.jsp

<%@page contentType="text/html; charset=UTF-8" %>
<%@taglib uri="https://struts.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>
<tiles:insert attribute="title"/>
</title>
<tiles:insert attribute="style"/>
<tiles:insert attribute="script"/>
</head>
<body>
<tiles:insert attribute="header"/>
<tiles:insert attribute="menu"/>
<tiles:insert attribute="content"/>
<tiles:insert attribute="sidebar"/>
<tiles:insert attribute="footer"/>
</body>
</html>

每個 <tiles:insert> 標籤代表頁面一部分，具体頁面中可指定相應 jsp 文件。專案中為每部分建立文件夾，每文件夾有 default.jsp，為該部分最常用內容。如頁頭頁尾可能只需一個 default.jsp 即可。對有特殊內容頁面，其特殊部分放入相應文件夾。

項目文件結構：

welcome.jsp 代碼

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@taglib uri="https://struts.apache.org/tags-tiles" prefix="tiles"%>
<tiles:insert page="layout.jsp" flush="true">
<tiles:put name="title" value="titles/default.jsp"/>
<tiles:put name="style" value="styles/default.jsp"/>
<tiles:put name="scripts" value="scripts/default.jsp"/>
<tiles:put name="header" value="headers/default.jsp"/>
<tiles:put name="menu" value="menus/default.jsp"/>
<tiles:put name="sidebar" value="sidebars/default.jsp"/>
<tiles:put name="content" value="contents/default.jsp"/>
<tiles:put name="footer" value="footers/default.jsp"/>
</tiles:insert>

所有部分均用 default.jsp。RegUserStep1.jsp 代碼：

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@taglib uri="https://struts.apache.org/tags-tiles" prefix="tiles"%>
<tiles:insert page="layout.jsp" flush="true">
<tiles:put name="title" value="titles/default.jsp"/>
<tiles:put name="style" value="styles/default.jsp"/>
<tiles:put name="script" value="scripts/default.jsp"/>
<tiles:put name="header" value="headers/default.jsp"/>
<tiles:put name="menu" value="menus/default.jsp"/>
<tiles:put name="sidebar" value="sidebars/RegUserStep1.jsp"/>
<tiles:put name="content" value="contents/RegUserStep1.jsp"/>
<tiles:put name="footer" value="footers/default.jsp"/>
</tiles:insert>

只有 sidebar 和 content 部分不同，其它相同。

部分文件內容示例

titles/default.jsp：

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
曳影網絡圖文社區

styles/default.jsp：

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<link href="styles/default.css" rel="stylesheet" type="text/css" />

scripts/default.jsp：

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<script src="scripts/prototype.js"></script>

sidebars/default.jsp 含登錄表單、網站分類、統計數據、Google 站內搜索、熱點圖文、用戶排行等。sidebars/RegUserStep1.jsp 內容：

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<div id="sidebar">
<h3>註冊步驟</h3>
<p>
一、閱讀並同意協議<br>
二、填寫註冊資料<br>
三、完成註冊
</p>
</div>

由此可見，使用 Tiles 模板引擎，可將代碼重複降至最低。