Thymeleaf抽取公共頁面片段
阿新 • • 發佈：2019-02-10
抽取頁面
專案中，一般把所有的公共頁面片段都抽取出來
放在一個獨立的頁面中
其他，所有的頁面根據需要進行引用
參考文件
th:fragment
抽取公共元素
Name，隨便自定義命名
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
</body>
</html th:insert
th:replace
th:include
引入公共元素
使用波浪號、花括號方式
<body>
...
<div th:insert="~{footer :: copy}"></div>
</body>這兩個符號
也可以省略不寫
<body>
...
<div th:insert="footer :: copy"></div>
</body>引入兩種方式
選擇器引入
模板名引入
~{templatename::selector}
模板名::選擇器
~{templatename::fragmentname}
模板名::片段名
頁面頭部
抽取頁面的頂部欄
<!--topbar-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a 使用者頁面
引入名稱空間
<html lang="en" xmlns:th="http://www.thymeleaf.org">引用頁面頂部
<!--引入抽取的topbar-->
<!--模板名：會使用thymeleaf的前後綴配置規則進行解析-->
<div th:replace="commons/bar::topbar"></div>修改完成，重新整理頁面
Ctrl+F9