使⽤Thymeleaf模板封装页⾯公有部分（CSS，JS，导航栏等）
简述
1. ⼀般来说，⼀个⽹站的各个⽹页中的导航栏，页尾，菜单等部分都是相同或相似的，可以将这部分代码提取成模板供其它页⾯使⽤。
2. 要实现该功能，可以使⽤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="">
<head th:fragment="commonHeader(title)">
<title th:text="${title}"></title>
<link href="cdn.bootcss/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>
html 网页 模板 引导
</div>
<footer th:fragment="commonFooter">
<script src="cdn.bootcss/jquery/2.1.1/jquery.min.js"></script>
<script src="cdn.bootcss/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</footer>
</body>
</html>
1. head标签中封装了bootstrap的部分引⼊。
2. div标签中封装了导航栏。
3. footer标签封装了bootstrap的部分引⼊。
index.html
<!DOCTYPE html>
<html xmlns:th="">
<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="cdn.bootcss/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="cdn.bootcss/jquery/2.1.1/jquery.min.js"></script>
<script src="cdn.bootcss/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。