thymeleaf中th:include, th:insert, th:replace的区别

最新推荐文章于 2023-06-06 20:42:53 发布

BlackBox_

最新推荐文章于 2023-06-06 20:42:53 发布

阅读量687

点赞数

分类专栏： SpringBoot 文章标签： html 前端 thymeleaf java SpringBoot

本文链接：https://blog.csdn.net/BlackBox_/article/details/122111384

版权

SpringBoot 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

thymeleaf中th:include, th:insert, th:replace的区别

一、代码和介绍

footer.html

<footer th:fragment="copy">
	需要copy的代码...
</footer>

需要引用copy的页面，有三种方式
- 【注意】这里的footer是页面的名称，不是标签的名称

<body>
    ...其他代码
    <div th:insert="footer :: copy"></div> 
    <div th:replace="footer :: copy"></div>
    <div th:include="footer :: copy"></div>
</body>

渲染后的效果
1. th:insert
  - 相当于把需要引入的内容，标签+代码一同引如到div内部
```
<div>
	<footer th:fragment="copy">
	需要copy的代码...
	</footer>
</div>
```
2. th:replace
  - th:replace是在div标签上写的，渲染效果则是用footer把div替换掉
```
<footer th:fragment="copy">
	需要copy的代码...
</footer>
```
3. th:include
  - 将footer标签体内的内容，放到div中进行渲染，div中原先有的内容也会被覆盖掉
```
<div>
	<footer th:fragment="copy">
	需要copy的代码...
	</footer>
</div>
```

二、演示截图

代码截图

在这里插入图片描述

chrome浏览器中渲染后的结果

在这里插入图片描述

BlackBox_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
thymeleaf中th:include, th:insert, th:replace的区别

thymeleaf中th:include, th:insert, th:replace的区别一、代码和介绍footer.html<footer th:fragment="copy"> 需要copy的代码...</footer>需要引用copy的页面，有三种方式【注意】这里的footer是页面的名称，不是标签的名称<body> ...其他代码 <div th:insert="footer :: copy"><
复制链接

扫一扫

专栏目录