历史文章（累计400+篇文章）
《国内最全的Spring Boot系列之一》
《国内最全的Spring Boot系列之二》
《国内最全的Spring Boot系列之三》
《国内最全的Spring Boot系列之四》
《国内最全的Spring Boot系列之五》
你真的学会了Lambda表达式了吗？一篇让你学废了不香么 - 第417篇
当你的Stream遇上Lambda就爱上了，超级无敌酷酷！- 第418篇
java8+lambda+Stream api实战案例学彻底透学废 - 第419篇
Spring Boot使用ApplicationEvent来实现事件发布订阅功能(美女一个都不能少，都要通知到) - 第420篇
接口管理平台YApi坑死我了(超级详细实操教程) - 421篇
SpringBoot使用EasyYapi对代码0侵入实现API接口一键发布到YApi - 第422篇
SpringBoot使用EasyYapi对代码0侵入实现API接口一键发布到YApi的进阶使用 - 第423篇
悟纤：师傅，紧急呼叫师傅
师傅：徒儿，何事如此慌张？
悟纤：徒儿最近在做一个项目的时候，使用到了thymeleaf模板引擎，但碰到了一些坑。
师傅：此话怎讲？
悟纤：在使用thymeleaf进行布局的时候，不知道传参数，也不知道在一个页面中，如何定义公用模板。
师傅：那为师和你好好分析一下。
悟纤：师傅，那咱们赶紧开始吧，我已经迫不及待了。
导读
在搭建一个网页的时候，一般的会分为header、content、footer，也就是导航部分、中间的内容部分、以及底部。对于header和footer这两个部分一般的是很多页面公用的，那么这时候，我们会把公共的部分进行抽离出来，这就是所谓的thymeleaf布局。
这一节就到大家来看看其中的一种布局方案。
一、准备工作
在具体讲解布局方案之前，我们一起先来大家一个基本的页面，包含header、content以及footer。
在具体的讲解之前，说明一下基本的环境：
（1）OS：Mac OS
（2）Spring Boot版本：2.6.7
（3）JDK：1.8
（4）thymeleaf：3.0
在使用idea构建的时候，默认选择的是11。现在都jdk十几了，我是不是有必要也升级到比较新的版本呢？亲爱的粉丝，你们觉得呢？
1.1 构建项目
使用Idea工具构建一个spring boot项目，取名为springboot-thymeleaf-layout。
啥，你说你不喜欢这个名称，那你随意，只要你开心，想取啥就取啥，O(∩_∩)O哈哈~
1.2 页面映射
编写一个Controller，当访问/index的时候，访问index.html页面
package com.kfit.website.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;@Controllerpublic class WebsiteController { @RequestMapping(value = {"/index","/"}) public String index(){ return "/index"; }}
1.3 index.html页面
接下来就是页面了，在resources/templates先创建index.html：
Title 首页 | 产品 | 关于我们 内容部分
说明：在实际中，样式部分以及前端页面有前端工程师进行编写，这里仅仅是示例。当然你如果你也会前端技术的话，那么你就是别人家的孩子了——全栈架构师，牛牪犇逼。
1.4 启动测试
启动应用访问地址：
http://127.0.0.1:8080/index
二、使用include/replace/insert进行布局
在前端的
那么我们就得思考，这样子的话
那么公共部分怎么抽离出来呢，这就是本节的重点th:include和th:replace。
2.1 抽离出来header和footer
首先将header和footer抽离出来，定义两个页面header和footer。
对应的common/header.html代码：
首页 | 产品 | 关于我们
2.2 使用include/replace引入
接下来就是使用th:include/th:replace引入header.html和footer.html。
对于th:include/th:replace有什么区别呢？
（1）th:include：引入子模块的children，依然保留父模块的tag。加载模板的内容：读取加载节点的内容（不含节点名称），替换div内容
（2）th:replace：引入子模块的所有，不保留父模块的tag。替换当前标签为模板中的标签，加载的节点会整个替换掉加载他的div
先看下th:include的方式，在index.html的代码就会变成：
Title 内容部分
运行效果是一样的，主要看下th:include生成的源码：
依然保留父模块的tag
接下来看下th:replace的方式，在index.html的代码就会变成：
Title 内容部分
运行效果是一样的，主要看下th:replace生成的源码：
不保留父模块的tag
2.3 thymleaf3.0的insert
Thymeleaf 3.0 之后不再推荐使⽤ th:include.
l th:insert：将被引用的模板片段插⼊到自己的标签体中
l th:replace：将被引用的模板片段替换掉自己
l th:include：类似于 th:insert，⽽不是插⼊⽚段，它只插⼊此⽚段的内容。
看下insert生成的效果：
可以看到这里的效果和th:include很类似，暂时看不出来区别。
2.4 th:fragment代码片段加载
对于header和footer可以单独一个页面，也可以在同一个页面，那么这时候，怎么确定要加载哪一部分呢？th:fragment就派上用场了。fragment有碎片; 片段之意，也就是定义一段代码碎片标识。
首先定义common.html，包含header.html和footer.html的代码：
Title 首页 | 产品 | 关于我们
说明：这里定义了代码片段header和footer，通过th:fragment进行指定。
仅紧着看下index.html的代码，也可以新建一个index2.html进行测试：
Title 内容部分
使用th:insert生成的源码：
使用th:include生成的源码：
使用th:replace生成的源码： 从这里就可以看出th:insert和th:include的区别了？具体区别，自己仔细观察生成的源码，自行总结下。 到这里，我先说明一下，大部分情况下建议使用th:replace，可以看出生成的代码干净利落，不出现多余的父类标签。当然如果你的父类标签有样式的时候，那么就使用th:insert。 2.5 当前页面公用部分引入 在一个页面中，也会出现有些部分的代码样式是一样的，你可以把这部分叫做模板。 那么当前页面的样式如何引入呢？小子们上代码： 说明： （1）使用::#pageCommon，元素选择器的方式就可以引入了。 （2）标签：标记用作容纳页面加载时对用户隐藏的 HTML 内容的容器。如果您有一些需要重复使用的 HTML 代码，则可以使用 标记。 效果： 此时生成的源代码： 这里就不能使用th:insert和th:replace了，看下生成的源码： 看源码会发现，此时节点也被携带过来了，由于隐藏特性，内容根本不会显示出来： 有人会问，我就是想喜欢th:replace，我们老大说只能使用th:replace，那么此时怎么破呢？这个也很好破，只需要稍微修改一个地方即可： 细心的网页肯定发现了，我这里这是把id移动到了内部div上，这时候就可以使用th:replace了，看下生成的源码： 但是这里会引发出来一个新的问题，什么问题呐？我们在一开始说到到，对于是页面的公共内容，那么很显然会被多处引入，而这里的div的id为pageCommon，很显然要对这个元素操作的时候就麻烦了。 那么针对这种情况怎么破呢？很简单，这里提供关键词：选择器。 2.6 参数传递 很多时候，我们的common.html也会有一些不一样的地方，比如首页激活的时候，会多出来一个class属性，那么一方面可以根据页面地址的不同进行条件的判断，另外一方面就是是否在引入代码的时候，是否可以引入参数呢？ 需要先修改common.html，当然也可以复制出来一份common2.html，允许参数的传递： 然后修改index.html进行参数传递，也可以复制出来一份index3.html： 效果： 可以获取到参数之后，那么就可以根据这些参数进行一些特殊的处理了。 总结 最后和大家总结下： （1）布局方案th:include/th:replace/th:insert，其中include在thymeaf在3.0之后就不推荐使用了。 （2）代码片段th:fragment，在一个页面可以定义多段代码片段，以此通过th:replace=“common:: fragmentId”的方式引入不通过的代码片段。 （3）参数的传递：在使用th:fragment的时候，可以接一个参数列表。 这节就先到这里，对于th:include/th:replace/th:insert或者thymeleaf的使用你还有其它的疑问吗？请留言！ à悟空学院：https://t.cn/Rg3fKJD 学院中有Spring Boot相关的课程！点击「阅读原文」进行查看！ SpringBoot视频：http://t.cn/A6ZagYTi SpringBoot交流平台：https://t.cn/R3QDhU0 SpringSecurity5.0视频：http://t.cn/A6ZadMBe ShardingJDBC分库分表：http://t.cn/A6ZarrqS 分布式事务解决方案：http://t.cn/A6ZaBnIr JVM内存模型调优实战：http://t.cn/A6wWMVqG Spring入门到精通：https://t.cn/A6bFcDh4 大话设计模式之爱你：https://dwz.cn/wqO0MAy7
我就是我，是颜色不一样的烟火。
我就是我，是与众不同的小苹果。
