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

最新推荐文章于 2022-12-13 06:45:23 发布
转载 最新推荐文章于 2022-12-13 06:45:23 发布 · 1k 阅读 · 1
文章标签：

#thymeleaf

本文详细解析了 Thymeleaf 中 th:insert、th:replace 和 th:include 三个模板指令的区别及使用场景，并通过示例展示了它们在实际应用中的表现。
 

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

  • th:insert   ：保留自己的主标签，保留th:fragment的主标签。

  • th:replace ：不要自己的主标签，保留th:fragment的主标签。

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

[html] view plain copy
  1. <span style="font-family:SimHei;font-size:18px;">需要替换的片段内容：  
  2. <footer th:fragment="copy">  
  3.    <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>  
  4. </footer>  
  5.   
  6. 导入片段：  
  7.   
  8.   <div th:insert="footer :: copy"></div>  
  9.   
  10.   <div th:replace="footer :: copy"></div>  
  11.   
  12.   <div th:include="footer :: copy"></div>  
  13.     
  14.   
  15. 结果为：  
  16.   
  17. <div>  
  18.     <footer>  
  19.        <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>  
  20.     </footer>    
  21. </div>    
  22.   
  23. <footer>  
  24.   <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>  
  25. </footer>    
  26.   
  27. <div>  
  28.   <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>  
  29. </div>    
  30.   
  31. </span>  


Ability Liao
关注
thymeleaf : th:insert和th:replace(和th:include)的区别
HR的博客
07-08 755
区别 th:insert 如同插入的字面意思，将指定的代码片段插入主标签内 th:replace 如同替换的字面意思，将主标签替换为指定的代码片段 th:include (3.0版本后已不推荐使用) 类似于th:insert, 不同的是在插入的时候不带代码片段的标签，只插入代码 例子展示 被插入的代码 <footer th:fragment="copy"> hello world </footer> 三种方式使用 <div th:insert="footer
thymeleaf：如何在引入fragment时保留部分差异内容（保留原内容）
纱厨藤簟，玉人罗扇轻缣。
03-18 1770
应用场景：同一工程里不同页面所需使用的script文件和css文件大同小异，若每页都写一遍，修改时成本很高，故设置一公共的head文件，再导入它。 thymeleaf使用fragment语法进行导入。使用简介如下： 定义公共fragment： <footer th:fragment="copy"> the content of footer </footer&...
Thymeleaf中th:include、th:replace、th:insert、th:fragment用法及区别
spurs611的博客
03-25 1万+
Thymeleaf中页面布局 首先，几个标签的定义 th:fragment 布局标签，定义一个代码片段，方便其它地方引用 <div th:fragment="alert"> th:include 布局标签，替换内容到引入的文件 <head th:include="layout :: htmlhead" th:with="title='xx'"&gt...
Thymeleaf th:include、th:replace使用
09-05 2526
Thymeleaf th:include、th:replace使用 https://blog.youkuaiyun.com/believe__sss/article/details/79992408  https://blog.youkuaiyun.com/believe__sss/article/details/79992408
thymeleaf中的th:insert
我是闲人的博客
10-19 3936
th:insert thymeleaf模板的th:insert用法： 好处：公共的模块就不用每次都写，需要就拿来用。 例如下图，头部内容完全可以放入公共文件中。 头部代码一大堆，每个html文件都写一遍太麻烦。提取红框里的代码，放到另一个html文件中。 源文件只需要加入下图所示即可使用 foreign是我的文件夹，common是我这个文件夹下的html文件，#h代表添加id为h代码片段。 头部效果显示相同。 ...
Thymeleaf
可来堂
03-03 432
1, include     Including template fragments     th:fragment       th:include         用法：         在某个标签中使用th:fragment属性定义一个变量名，然后在其他模板中通过th:include，即可引入。     a.html             定义一个fragment，并取名为
关于thymeleaf th:replace th:include th:insert 的区别
zn65786412qq的博客
04-14 1291
关于thymeleaf th:replace th:include th:insert 的区别th:insert   ：保留自己的主标签，保留th:fragment的主标签。th:replace ：不要自己的主标签，保留th:fragment的主标签。th:include ：保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）[html] view plain copy&l...
使用Thymeleaf模板封装页面公有部分CSS、JS失效，导航栏发生变化等问题
莫得感情的小猪头的博客
04-04 926
简述 一般来说，一个网站的各个网页中的导航栏，页尾，菜单等部分都是相同或相似的，可以将这部分代码提取成模板供其它页面使用。 要实现该功能，可以使用Thymeleaf模板的 th:replace、th:include或th:insert属性，借助th:fragment属性来实现。 属性 特点 th:replace 不保留自己的主标签，保留th:fragment的主标签 th:in...
thymeleaf中的th:fragment
最新发布
03-04
### Thymeleaf 中 `th:fragment` 属性的使用 在 Thymeleaf 模板引擎中，`th:fragment` 是用于定义可重用片段的关键属性。通过此属性可以创建页面中的局部区域作为独立的部分，在其他地方引用这些部分来构建复杂的...
thymeleaf th fragment高级应用 – Pure nonsense.rar
06-10
通过`th:insert`或`th:replace`，可以在主模板中插入不同的Fragment来组合成完整的页面。 4. **模板继承**：除了Fragment，Thymeleaf还支持模板继承。一个模板可以定义基本结构和共享内容，其他模板通过`th:extends...
th:insert、th:replace、th:include抽取和引用页面公共片段、传参等
dasd
08-20 1629
转载自：https://www.cnblogs.com/bear7/p/13491428.html 一、抽取公共片段 th:fragment 给片段命名 将公共片段抽取出来，并在顶级标签内使用th:fragment给该片段命名。 例如：将公共片段抽取出来放到comment/bar.html中： <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar"> 　　<a
Thymeleaf th:insert、th:replace、th:include的使用
菜鸟记录
11-20 2910
⏹Thymeleaf th:insert、th:replace、th:include的使用
th:insert，th:replace，th:include的区别
qq_25261441的博客
12-13 195
th:insert会将选择到的span节点插入到div中； th:replace会将原来的div节点替换为span节点； th:include会将span节点的内容（包括子节点）插入到div中
thymeleaf 语法 —— ~{ } 代码块、:: selector、代码块选择器、th:insert、th:replace、th:include 的区别
猎人在吃肉
11-05 2480
一、~{ } 代码块表达式 格式： ~{ templatename :: selector } 支持： ~{ templatename :: #html_id } ~{ ::selector} 表达代码段在本页 参数说明： :: 前面的部分是 模板文件名（包括路径，模板文件名的后缀省略，默认都是.html）， :: 后面部分是 selector（选择器） 1、一般使用方式 在fragments...
【SpringBoot学习】02-th:replace与th:insert详解
qqqking的博客
03-04 2404
声明公共代码片段 通过th:fragment <div th:fragment="header_common"> <p>这是fragment公共片段</p> </div> 通过id声明代码片段 <div id="header_common_id"> <p>这是id公共片段&l...
Thymeleaf 模板布局 th:fragment、th:replace、th:insert、th:remove
qq_34357018的博客
11-19 3170
目录 th:fragment 模板布局 模板片段说明 1、模板中，经常希望从其他模板中包含⼀些部分，如⻚眉，⻚脚，公共菜单等部分，为了做到这⼀点，Thymeleaf 可以使⽤th:fragment 属性来定义被包含的模版⽚段，以供其他模版包含。 如下所示定义模板片段： <divth:fragment="copy"> &copy; 2011 The Good Thymes Virtual Grocery </div> 2、上⾯的代码定义了⼀...
5）Thymeleaf 模板布局 th:fragment、th:replace、th:insert、th:remove
热门推荐
蚩尤后裔-汪茂雄
12-03 4万+
目录 th:fragment 模板布局 模板片段说明 ⽚段表达式语法 th:insert 与 th:replace 区别 参数化片段签名 编码示例 commons.html 公共模板 user/home.html 引入模板片段 运行效果 th:remove 删除模版片段 th:fragment 模板布局 模板片段说明 模板中，经常希望从其他模板中包含⼀些部...
th:include的使用
海涛高软
07-05 4476
th:include 和 th:replace 的区别
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值