一、如何抽取公共页面
在 Web 项目中，通常会存在一些公共页面片段（重复代码），例如头部导航栏、侧边菜单栏和公共的 js css 等。我们一般会把这些公共页面片段抽取出来，存放在一个独立的页面中，然后再由其他页面根据需要进行引用，这样可以消除代码重复，使页面更加简洁。
抽取公共页面:Thymeleaf 作为一种优雅且高度可维护的模板引擎，同样支持公共页面的抽取和引用。我们可以将公共页面片段抽取出来，存放到一个独立的页面中，并使用 Thymeleaf 提供的 th:fragment 属性为这些抽取出来的公共页面片段命名。
在Thymeleaf中，可以使用片段（fragment）来抽取和重用公共页面部分。
二、Thymeleaf抽取公共页面过程
2.1 创建公共片段
在你的Thymeleaf模板中，找到你想要抽取的公共页面部分，比如导航栏、页眉或页脚。将这一部分的内容包裹在标签中，并使用th:fragment属性指定一个唯一的片段名称，例如：
<div th:fragment="fragment-name" >
<span>公共页面片段</span>
</div>
2.2 在模板中引用公共片段
在 Thymeleaf 中，我们可以使用以下 3 个属性，将公共页面片段引入到当前页面中。
th:insert：将代码块片段整个插入到使用了 th:insert 属性的 HTML 标签中；
<div th:insert="~{template::fragment-name}">
<!-- 公共页面片段的内容将被插入到这里 -->
</div>这里的template表示页面的名称，省略了 .html
th:replace：将代码块片段整个替换使用了 th:replace 属性的 HTML 标签中；
<div th:replace="~{template::fragment-name}">
<!-- 当前元素将被公共页面片段替换 -->
</div>
th:include：将代码块片段包含的内容插入到使用了 th:include 属性的 HTML 标签中。
<div th:include="~{template::fragment-name}">
<!-- 公共页面片段的内容将被包含在这里 -->
</div>使用上 3 个属性引入页面片段，都可以通过以下 2 种方式实现。
- ~{templatename::selector}：模板名::选择器
- ~{templatename::fragmentname}：模板名::片段名
通常情况下，~{} 可以省略，其行内写法为 [[~{…}]] 或 [(~{…})]，其中 [[~{…}]] 会转义特殊字符，[(~{…})] 则不会转义特殊字符.
三、案例演示
在页面 fragment.html 中引入通过 commons.html 声明的页面片段，可以通过以下方式实现：
假设在 commons.html 中声明了名为 navbar 的公共片段：
<div th:fragment="navbar">
<nav>
<!-- 导航栏的内容 -->
</nav>
</div>在 fragment.html 中使用 th:insert 属性来引入 commons.html 中的 navbar 片段：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>...</head>
<body>
<div th:insert="commons.html :: navbar"></div>
<!-- 页面的其他内容 -->
</body>
</html>在上述代码中，th:insert 属性的值分成两部分：
commons.html：公共片段所在的模板文件名。navbar：要引入的公共片段的名称。
通过 :: 指定 commons.html 作为源模板文件，并使用 navbar 引入 commons.html 中声明的 navbar 公共片段。Thymeleaf 会将公共片段的内容插入到 th:insert 属性所在的 <div> 元素中。