使用Thymeleaf模板封裝頁面公有部分（CSS，JS，導航欄等）
阿新 • • 發佈：2019-01-10
簡述
- 一般來說，一個網站的各個網頁中的導航欄，頁尾，選單等部分都是相同或相似的，可以將這部分程式碼提取成模板供其它頁面使用。
- 要實現該功能，可以使用Thymeleaf模板的 th:replace、th:include或th:insert屬性，藉助th:fragment屬性來實現。
| 屬性 | 特點 |
|---|---|
| th:replace | 不保留自己的主標籤，保留th:fragment的主標籤 |
| th:include | 保留自己的主標籤，不保留th:fragment的主標籤 |
| th:insert | 保留自己的主標籤，也保留th:fragment的主標籤 |
例項
將bootstrap的引入部分和導航欄分裝起來。
分裝模板common.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="commonHeader(title)">
<title th:text="${title}"></title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" - head標籤中封裝了bootstrap的部分引入。
- div標籤中封裝了導航欄。
- footer標籤封裝了bootstrap的部分引入。
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common::commonHeader('主頁')">
</head>
<body>
<div th:include="common::commonNav"></div>
<h1>Hello, world!<span class="glyphicon glyphicon-user"></span></h1>
<div th:include="common::commonFooter"></div>
</body>
</html>如果使用th:fragment="value(arg)"，以include為例，使用th:include="模板路徑::value(arg)引用模板。
效果
檢視頁面原始碼如下：
<!DOCTYPE html>
<html>
<head>
<title>主頁</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">導航一</a></li>
<li><a href="#">導航二</a></li>
<li><a href="#">導航三</a></li>
<li><a href="#">導航四</a></li>
</ul>
</div>
</nav>
</div>
<h1>Hello, world!<span class="glyphicon glyphicon-user"></span></h1>
<div>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</div>
</body>
</html>