简述
- 一般来说，一个网站的各个网页中的导航栏，页尾，菜单等部分都是相同或相似的，可以将这部分代码提取成模板供其它页面使用。
- 要实现该功能，可以使用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>
<body>
<div th:fragment="commonNav">
<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>
<footer th:fragment="commonFooter">
<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>
</footer>
</body>
</html>- 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>