th:replace & th:include

最新推荐文章于 2024-04-25 23:13:41 发布
最新推荐文章于 2024-04-25 23:13:41 发布
阅读量8.4k 收藏 2
点赞数
分类专栏： 前端

原文：https://blog.csdn.net/h1021456873/article/details/79085505

Thymeleaf html 导入(th:replace & th:include)


模板模块导入

首先定义一个/WEBINF/templates/footer.html文件：

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <body>
        <div th:fragment="copy">
            &copy; 2011 The Good Thymes Virtual Grocery
        </div>
    </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

上面的代码定义了一个片段称为copy,我们可以很容易地使用th:include 或者 th:replace属性包含在我们的主页上:

<body>
...
<div th:include="footer :: copy"></div>
</body>
  • 1
  • 2
  • 3
  • 4

include的表达式想当简洁。这里有三种写法：

  • “templatename::domselector” 或者 “templatename::[domselector]”引入模板页面中的某个模块。
  • “templatename”引入模板页面。
  • “::domselector” 或者 “this::domselector” 引入自身模板的模块 
    上面所有的templatename和domselector的写法都支持表达式写法：
<div th:include="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>
  • 1

不使用th:fragment来引用模块

...
<div id="copy-section">
&copy; 2011 The Good Thymes Virtual Grocery
</div>
...
  • 1
  • 2
  • 3
  • 4
  • 5

我们可以用css的选择器写法来引入

<body>
...
<div th:include="footer :: #copy-section"></div>
</body>
  • 1
  • 2
  • 3
  • 4

th:include 和 th:replace的区别

th:include和th:replace都可以引入模块，两者的区别在于 
th:include：引入子模块的children，依然保留父模块的tag。 
th:replace：引入子模块的所有，不保留父模块的tag。 
举个栗子：

<footer th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</footer>
  • 1
  • 2
  • 3

引入界面：

<body>
...
<div th:include="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5

结果是：

<body>
...
<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>
</body>

Dzq_Boyka
关注
专栏目录
Thymeleaf 导入公共页面内容两种方式（th:replace，th:include）
旭东怪的博客
08-30 4695
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"&
Thymeleaf th:include、th:replace使用
likunpeng6656201的博客
08-13 577
最近做到页面数据展示分页的功能，由于每个模块都需要分页，所以每个页面都需要将分页的页码选择内容重复的写N遍，如下所示： 重复的代码带来的就是Ctrl+C，Ctrl+V ,于是了解了一下thymeleaf的fragment加载语法以及th:include、th:replace的区别，得以解决。 首先在pom.xml引入thymeleaf的依赖 <dependency> <grou...
DAY23 Thymeleaf html 导入(th:replace & th:include)
AK_HuangYC的博客
01-17 1万+
模板模块导入 首先定义一个/WEBINF/templates/footer.html文件： html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> body> div th:fragment="copy"> © 2011 The
th:replace th:include th:insert 的区别
逆风的蔷薇
12-12 370
关于thymeleaf th:replace th:include th:insert 的区别 th:insert ：保留自己的主标签，保留th:fragment的主标签。 th:replace ：不要自己的主标签，保留th:fragment的主标签。 th:include ：保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐） Html代码 需要替换的片段内容： ...
Thymeleaf中th:include、th:replace、th:insert、th:fragment用法及区别
spurs611的博客
03-25 9680
Thymeleaf中页面布局 首先，几个标签的定义 th:fragment 布局标签，定义一个代码片段，方便其它地方引用 <div th:fragment="alert"> th:include 布局标签，替换内容到引入的文件 <head th:include="layout :: htmlhead" th:with="title='xx'"&gt...
Thymeleaf中的th:replace,th:insert,th:include之间的区别
gaoqiandr的博客
04-25 694
本文主要介绍的是Thymeleaf中的th:replace,th:insert,th:include之间的区别
Thymeleaf 动态更改th:replace、th:include的值，刷新局部内容
weixin_38103949的博客
02-19 4950
Thymeleaf 动态更改th:replace、th:include的值，刷新局部内容 由于 Thymeleaf 视图是在后端渲染的，因此前端改变th:replace属性的值是没有效果的，要想实现局部动态刷新，只能把参数传给后端，请求后端重新渲染。 前端代码： 超链接 <a href="/main?page=test&content=test-content">更改内容...
引入主体内容模板片段： <div th:include="footer::content"></div> 引入版权所有模板片段： <div th:replace="footer::copy" ></div> index.html中怎样引入了上面两个fragment
最新发布
10-29
在Thymeleaf模板引擎中，`th:include`指令用于引入另一个HTML片段，而`th:replace`指令则是完全替换指定的部分。在`index.html`文件中引入这两个片段的方式如下： 1. **引入主体内容模板片段**: 使用 `<div th:...
一文教你学会使用 th:block
Wu_yongtao的博客
04-23 3804
th:block 笔记 文章目录th:block 笔记说明1. 官方文档2. 使用说明3. 特别之处(1) `th:block` 特性(2) 同时控制多个相连标签是否显示(3) 循环同级标签 说明 时间赶的话可以直接看 2 中的粗体部分，和 3 分行被csdn吞了，2 部分排版紧凑点，后续修改一下。 1. 官方文档 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#synthetic-thblock-tag 2. 使用说明
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&...
Thymeleaf中th:include和th:replace的使用和区别
铛铛当的博客
09-03 9356
Thymeleaf一般基于springboot来使用，其实是springmvc。 其实在日常中我们编写网页代码，常常会编写网页头和底部。 但是不可能每个页面都Ctrl+C，Ctrl+V。这样会反复的代码编写。 另外涉及到一些多重复的代码：如对于thymeleaf分页的代码很多都是重复的，所以不可能都是几个页面全是重复的代码。 所以我们最好将重复的代码写在多个html中，需要的时候放进页面中...
Thymeleaf th:insert、th:replace、th:include的使用
菜鸟记录
11-20 2464
⏹Thymeleaf th:insert、th:replace、th:include的使用
thymeleaf 语法 —— ~{ } 代码块、:: selector、代码块选择器、th:insert、th:replace、th:include 的区别
猎人在吃肉
11-05 2074
一、~{ } 代码块表达式 格式： ~{ templatename :: selector } 支持： ~{ templatename :: #html_id } ~{ ::selector} 表达代码段在本页 参数说明： :: 前面的部分是 模板文件名（包括路径，模板文件名的后缀省略，默认都是.html）， :: 后面部分是 selector（选择器） 1、一般使用方式 在fragments...
thymeleaf的th:replace,th:include,th:insert用法
test_00的博客
07-29 975
<!--前面部分是公共文件所在目录::后面是公共文件内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>
【SpringBoot学习】02-th:replace与th:insert详解
qqqking的博客
03-04 2311
声明公共代码片段 通过th:fragment <div th:fragment="header_common"> <p>这是fragment公共片段</p> </div> 通过id声明代码片段 <div id="header_common_id"> <p>这是id公共片段&l...
Thymeleaf th:replace、th:insert、th:include的使用及区别
smile radiantly
02-18 3118
在项目开发中像侧边栏,导航栏,底部栏,分页等公共模块一般都会单独提取出来成一个页面,再使用.在Thymeleaf中一般采用 th:replace 或 th:insert . th:insert ：保留自己的主标签，保留th:fragment的主标签。 th:replace ：不要自己的主标签，保留th:fragment的主标签。 th:include ：保留自己的主标签，不要th:frag...
thymeleaf 拆分html页面 引用html文件 th replace th:fragment
韩梦飞沙_韩亚飞
03-03 536
thymeleaf 拆分html页面 引用html文件 th replace th:fragment file1.html 引用 file2.html中的代码块 如下： file1.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <body> <div id="aaa" th:replace
th:include的使用
海涛高软
07-05 4311
th:include 和 th:replace 的区别
Thymeleaf标签之th:include
六年鹿苑的博客
03-15 8469
本文链接：http://miss168.net/detail/science/631252567581528064/0/836681278072819712 需要引入公共head的页面代码： <head> <th:block th:include="/web/include :: header(${columnName})"></th:block> </head> 其中include第一个参数是组件页面地地（不含后缀，实际页面是/web/includ
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值