https://blog.csdn.net/hry2015/article/details/73476973
Thymeleaf有多种方式引入
-
th:insert 3.0+版本新加的
-
th:replace 2.0+ 3.0+都可用
-
th:include 这个在3.0版本已经不建议使用
-
th:include：加载模板的内容： 读取加载节点的内容（不含节点名称），替换div内容
-
th:replace：替换当前标签为模板中的标签，加载的节点会整个替换掉加载他的div
前两个的区别（直接看例子，来自官方）：
? 2011 The Good Thymes Virtual Grocery ? 2011 The Good Thymes Virtual Grocery ? 2011 The Good Thymes Virtual Grocery ? 2011 The Good Thymes Virtual Grocery
作者：_流浪的猫_
链接：https://www.jianshu.com/p/db16d4d8d9c7
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
1. 概述
在web开发中，我们经常会将公共头，公共尾，菜单等部分提取成模板供其它页面使用。在thymeleaf中，通过th:fragment、th:include、th:replace、参数化模板配置、css选择器加载代码块等实现。下文通过例子来说明用法:
-
fragment语法
-
通过 th:fragment 和 css选择器加载代码块
-
th:include 和 th:replace
-
参数化模板配置
这应该是Thymeleaf系列的最后一篇，不容易啊！夸夸一下自己，呵呵！
注意
-
spring boot 1.5.4 默认使用的 thymeleaf 2，这里只演示thymeleaf 2语法
2. 例子
2.1. 公共页
/templates/template/footer.html
此页面定义待加载的模板页面
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><meta charset="UTF-8" /><body>
<!-- th:fragment 定义用于加载的块 -->
<span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>
<span id="copy-section"> 2017 hry loaded by id=copy-section</span>
<!-- 定义模板时，可以传入参数 -->
<span th:fragment="frag(month, date) "> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span>
</body></html>123456789101112131415
2.2. fragment语法
/templates/template/footer.html：定义要加载代码块copy
<!-- th:fragment 定义用于加载的块 --><span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>12
/templates/template/template.html：通过th:include在本页中加载以上的代码块copy，fragment加载语法如下：
-
templatename::selector：”::”前面是模板文件名，后面是选择器
-
::selector：只写选择器，这里指fragment名称，则加载本页面对应的fragment
-
templatename：只写模板文件名，则加载整个页面
================== fragment语法 ============================= <br /> <!-- 语法说明 "::"前面是模板文件名，后面是选择器 --> <div th:include="template/footer::copy"></div> <!-- 只写选择器，这里指fragment名称，则加载本页面对应的fragment --> <div th:include="::#thispage"></div> <!-- 只写模板文件名，则加载整个页面 --> <div th:include="template/footer"></div>================= 加载块 ============================<br /><span id="thispage"> div in this page.</span>123456789101112
运行结果输出：
================== fragment语法 ============================= <br /> <!-- 语法说明 "::"前面是模板文件名，后面是选择器 --> <div> 2017 hry loaded by fragment=copy</div> <!-- 只写选择器，这里指fragment名称，则加载本页面对应的fragment --> <div> div in this page. </div> <!-- 只写模板文件名，则加载整个页面 --> <div> <html> <meta charset="UTF-8" /> <body> <!-- th:fragment 定义用于加载的块 --> <span> 2017 hry loaded by fragment=copy</span> <span id="copy-section"> 2017 hry loaded by id=copy-section</span> <!-- 定义模板时，可以传入参数 --> <span> <span>welcome hry come in 6-19</span></span> </body> </html></div>123456789101112131415161718192021222324
2.3. 通过 th:fragment 和 css选择器加载代码块
/templates/template/footer.html：
除了th:fragment外，还可以css选择器加载代码块。下文定义th:fragment=”copy”和id=”copy-section”。
<!-- th:fragment 定义用于加载的块 --> <span th:fragment="copy"> 2017 hry loaded by fragment=copy</span> <span id="copy-section"> 2017 hry loaded by id=copy-section</span>1234
/templates/template/template.html：
-
通过 th:fragment 加载代码块
-
通过css选择器加载代码块
================= 通过 th:fragment 和 css选择器加载代码块 =================<!-- 这里加载”th:fragment 定义用于加载的块“ --><div th:include="template/footer::copy"></div><!-- 这里加载”id=copy-section“的节点 --><div th:include="template/footer::#copy-section"></div> 12345
运行结果输出：
================= 通过 th:fragment 和 css选择器加载代码块 =================<!-- 这里加载”th:fragment 定义用于加载的块“ --><div> 2017 hry loaded by fragment=copy</div><!-- 这里加载”id=copy-section“的节点 --><div> 2017 hry loaded by id=copy-section</div> 12345
2.4. th:include 和 th:replace
th:include 和 th:replace都是加载代码块内容，但是还是有所不同，下面会展示两者不同。
/templates/template/footer.html：
<!-- th:fragment 定义用于加载的块 --><span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>123
/templates/template/template.html：
-
th:include：加载模板的内容： 读取加载节点的内容（不含节点名称），替换div内容
-
th:replace：替换当前标签为模板中的标签，加载的节点会整个替换掉加载他的div
================= th:include 和 th:replace============================<!-- 加载模板的内容： 读取加载节点的内容（不含节点名称），替换<div>的内容 --><div th:include="template/footer::copy">1</div><!-- 替换当前标签为模板中的标签： 加载的节点会整个替换掉加载他的<div> --><div th:replace="template/footer::copy">2</div>12345
运行结果输出：
<!-- 加载模板的内容： 读取加载节点的内容（不含节点名称），替换<div>的内容 --><div> 2017 hry loaded by fragment=copy</div><!-- 替换当前标签为模板中的标签： 加载的节点会整个替换掉加载他的<div> --><span> 2017 hry loaded by fragment=copy</span>1234
2.5. 参数化模板配置
/templates/template/footer.html：
指定fragment时，可以指定变量
<!-- 定义模板时，可以传入参数 --><span th:fragment="frag(month, date) "> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span>123
/templates/template/template.html：
向模板中传入变量值
================= 参数化模板配置 ============================
<div th:include="template/footer::frag(${month},${date})">...</div>123
运行结果输出：
================= 参数化模板配置 ============================<div> <span>welcome hry come in 6-19</span></div>12
3. 代码
详细见代码Github
解釋：
=================decorator方式是整个布局文件替换 不是片段替换=================
index.html引用layout.html后 data-layout-fragment='content' 这个标签之外的内容就是layout.html的内容，这个标签之内的部分不会被替换
layout.html的content里面的内容在index.html不会显示，单独访问会显示
=============================下面这种依照官方最新版========================
依赖包
footer.html文件↓↓↓↓↓↓↓
main.html
符号前面的是路径 从web-info开始 后面就是引用footer.html定义的footer
描述写得不好，看不懂可以直接引入包 照着代码敲一遍就可以看见效果了（spring mvc 这些基础配置还是要有的哈）
注意：本文归作者所有，未经作者允许，不得转载
