版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nangeali/article/details/82215667
抽取页面
项目中，一般把所有的公共页面片段都抽取出来
放在一个独立的页面中
其他，所有的页面根据需要进行引用
参考文档
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>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>
</li>
</ul>
</nav>用户页面
引入命名空间
<html lang="en" xmlns:th="http://www.thymeleaf.org">引用页面顶部
<!--引入抽取的topbar-->
<!--模板名：会使用thymeleaf的前后缀配置规则进行解析-->
<div th:replace="commons/bar::topbar"></div>修改完成，刷新页面
Ctrl+F9