使用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>
<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>