Thymeleaf th:replace、th:insert、th:include的使用及区别

最新推荐文章于 2024-04-25 23:13:41 发布
最新推荐文章于 2024-04-25 23:13:41 发布
阅读量3k 收藏 13
点赞数 4
分类专栏： javaWeb开发 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhixingwu/article/details/104381564
版权

在项目开发中像侧边栏,导航栏,底部栏,分页等公共模块一般都会单独提取出来成一个页面,再使用.在Thymeleaf中一般采用 th:replace 或 th:insert .

  • th:insert ：保留自己的主标签，保留th:fragment的主标签。
  • th:replace ：不要自己的主标签，保留th:fragment的主标签。
  • th:include ：保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）

这三个指令一般配合 th:fragment使用,fragment片段使用语法如下：

  • templatename :: selector ：::符号前面是html文件名称，后面是th:fragment的值
  • :: selector ：只写th:fragment的值，则加载本 html 页面对应的fragment片段
  • templatename ::只写html文件名称，则加载整个html页面

注意: :: 符号前后需要有空格.

示例:
footerbar.html:

<body>
	<footer class="main-footer" th:fragment="footer">
        <strong>Copyright &copy; 2019-2020 <a href="http://www.zhangligong.xyz/">FishLeap</a>.</strong>
        All rights reserved. 
    </footer>
</body>

在其它html页面中引入某html页面的fragment片段:

<div th:insert="footerbar :: footer"></div>
 
<div th:replace="footerbar :: footer"></div>
 
<div th:include="footerbar :: footer"></div>

结果为:

<div>
    <footer class="main-footer" >
        <strong>Copyright &copy; 2019-2020 <a href="http://www.zhangligong.xyz/">FishLeap</a>.</strong>
        All rights reserved. 
    </footer>
</div>  
 
<footer class="main-footer" >
        <strong>Copyright &copy; 2019-2020 <a href="http://www.zhangligong.xyz/">FishLeap</a>.</strong>
        All rights reserved. 
</footer> 
 
<div>
  <strong>Copyright &copy; 2019-2020 <a href="http://www.zhangligong.xyz/">FishLeap</a>.</strong>
        All rights reserved. 
</div>
smile radiantly
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Thymeleaf th:include、th:replace使用
likunpeng6656201的博客
08-13 522
最近做到页面数据展示分页的功能，由于每个模块都需要分页，所以每个页面都需要将分页的页码选择内容重复的写N遍，如下所示： 重复的代码带来的就是Ctrl+C，Ctrl+V ,于是了解了一下thymeleaf的fragment加载语法以及th:include、th:replace的区别，得以解决。 首先在pom.xml引入thymeleaf的依赖 <dependency> <grou...
thymeleaf Examples: Layouts
07-25
Thymeleaf Examples: Layouts This is an example project containing code used in the "Thymeleaf Layouts" tutorial. The project was created using Spring MVC 4 Quickstart Maven archetype: ...
Thymeleaf 导入公共页面内容两种方式（th:replace，th:include）
旭东怪的博客
08-30 4425
1 公共页面（subPage/head.html） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml" xml:lang="en"&
th:include的使用
海涛高软
07-05 4144
th:include 和 th:replace 的区别
Thymeleaf中的th:replace,th:insert,th:include之间的区别
gaoqiandr的博客
04-25 402
本文主要介绍的是Thymeleaf中的th:replace,th:insert,th:include之间的区别
Thymeleaf th:include、th:replace使用
热门推荐
believe_stone的博客
04-18 11万+
最近做到页面数据展示分页的功能，由于每个模块都需要分页，所以每个页面都需要将分页的页码选择内容重复的写N遍，如下所示：重复的代码带来的就是Ctrl+C，Ctrl+V ,于是了解了一下thymeleaf的fragment加载语法以及th:include、th:replace的区别，得以解决。首先在pom.xml引入thymeleaf的依赖&lt;dependency&gt; &lt;groupId&...
【SpringBoot学习】02-th:replace与th:insert详解
qqqking的博客
03-04 2237
声明公共代码片段 通过th:fragment <div th:fragment="header_common"> <p>这是fragment公共片段</p> </div> 通过id声明代码片段 <div id="header_common_id"> <p>这是id公共片段&l...
Thymeleaf中th:include、th:replace、th:insert、th:fragment用法及区别
spurs611的博客
03-25 9192
Thymeleaf中页面布局 首先，几个标签的定义 th:fragment 布局标签，定义一个代码片段，方便其它地方引用 <div th:fragment="alert"> th:include 布局标签，替换内容到引入的文件 <head th:include="layout :: htmlhead" th:with="title='xx'"&gt...
Thymeleaf th:insert、th:replace、th:include的使用
菜鸟记录
11-20 2352
⏹Thymeleaf th:insert、th:replace、th:include的使用
Thymeleaf教程（10分钟入门）
Sunblogy的博客
07-05 2458
springboot技术
thymeleaf实现th:each双重多重嵌套功能
10-15
在本示例中，我们将探讨如何使用Thymeleaf的`th:each`指令来实现HTML模板中的双重或多重嵌套循环，以便动态加载一二级文章分类。Thymeleaf是一个强大的服务器端模板引擎，常用于Spring Boot项目，用于生成动态HTML...
Thymeleaf中th:each及th:if使用方法解析
09-07
本文将深入探讨Thymeleaf中的两个关键指令：`th:each` 和 `th:if`。 ### 一、th:each `th:each` 指令主要用于遍历数据集合，这些集合通常由控制器（Controller）传递到视图（View）。例如，以下是一个简单的控制器...
some-thymeleaf:使用 Thymeleaf 模板引擎
06-28
3. **条件语句和循环**：Thymeleaf 提供了丰富的条件语句（如 `th:if` 和 `th:unless`）和循环结构（如 `th:each`），使得在模板中实现逻辑控制变得简单。 4. **数据绑定**：Thymeleaf 可以直接与Spring MVC或其他...
thymeleaf th fragment高级应用 – Pure nonsense.rar
06-10
然后，我们可以通过`th:include`或`th:replace`指令来引用和插入Fragment。`th:include`会将Fragment内容嵌入到当前元素内部，而`th:replace`则会替换掉当前元素。例如： ```html <div th:include="/fragments/...
如何让th:replace引用的元素根据引用页面不同作不同变化
wen13727561564的博客
06-06 259
在上面的示例中，如果当前请求的URI是`/page1.html`，则会显示`This is page 1`；如果请求的URI既不是`/page1.html`，也不是其他已知的URI，就会显示`Unknown page`。在上面的示例中，如果当前请求的URI是`/page1.html`，则会显示`This is page 1`；如果要在`th:if`和`th:unless`的条件不成立时执行其他操作，可以使用`th:if`和`th:unless`的else语句。
Thymeleaf 模板布局 th:fragment、th:replace、th:insert、th:remove
qq_34357018的博客
11-19 2665
目录 th:fragment 模板布局 模板片段说明 1、模板中，经常希望从其他模板中包含⼀些部分，如⻚眉，⻚脚，公共菜单等部分，为了做到这⼀点，Thymeleaf 可以使⽤th:fragment 属性来定义被包含的模版⽚段，以供其他模版包含。 如下所示定义模板片段： <divth:fragment="copy"> &copy; 2011 The Good Thymes Virtual Grocery </div> 2、上⾯的代码定义了⼀...
thymeleaf的th:replace,th:include,th:insert用法
test_00的博客
07-29 944
<!--前面部分是公共文件所在目录::后面是公共文件内th:fragment的值，冒号前后要有空格--> <div th:insert="/test/common2 :: res_common"></div> <div th:replace="/test/common2 :: res_common"></div> <div th:include="/test/common2 :: res_common"></div>
Thymeleaf标签之th:include
六年鹿苑的博客
03-15 8267
本文链接：http://miss168.net/detail/science/631252567581528064/0/836681278072819712 需要引入公共head的页面代码： <head> <th:block th:include="/web/include :: header(${columnName})"></th:block> </head> 其中include第一个参数是组件页面地地（不含后缀，实际页面是/web/includ
thymeleaf th:content
最新发布
06-06
当你在HTML标签内使用`th:content`，Thymeleaf会查找绑定到该标签的表达式或变量的值，并将其插入到页面上相应的位置。 例如，你可能会这样用： ```html <div th:fragment="myFragment"> <h2 th:text="${title}">...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值