Thymeleaf公共页面的抽取

最新推荐文章于 2023-07-24 19:33:49 发布

春风又一季

最新推荐文章于 2023-07-24 19:33:49 发布

阅读量85

点赞数

分类专栏：初学Springboot Thymeleaf

本文链接：https://blog.csdn.net/qq_40183281/article/details/89047937

版权

初学Springboot 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Thymeleaf

1 篇文章 0 订阅

订阅专栏

1. ~{templatename::selector}id选择器的引用

2.~{templatename::fragmentname}模板名引用

footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<body>
<div th:fragment="copy" id="copy1">
<h1>我是被引用的公共片段</h1>
</div>
</body>
</html>

这里命名一个公共的模板片段叫 copy

<body>
...
<!--至这里引用一个-->
<div th:insert="~{footer :: copy}"></div>
</body>

如果使用模板名，根据前后缀的配置来进行解析 footer 是一个html的界面 copy 是用th:fragment取名的模板名使用模板名这个写成

<body>
...
<!--至这里引用一个-->
<div th:insert="footer :: copy"></div>
<!--省略~{ }-->
</body>

还有一种使用id选择器的引用

<body>
...
<!--至这里引用一个,属性引用-->
<div th:insert="~{footer :: copy1}"></div>
</body>

三种引用的方式

th:insert 将公共片段整个插入到声明引用标签中
th:replace 将声明引用的标签替换成引入的公共标签
th:include 将引入的标签内的内容引入到声明引用标签中

例子：

<body>
...
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>
</body

result

<body>
...
<!--th:insert-->
<div>
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>
</div>
<!--th:replace-->
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

<!--th:include-->
<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>

</body>

春风又一季

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf公共页面的抽取

1. ~{templatename::selector}id选择器的引用~2.{templatename::fragmentname}模板名引用footer.html<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org" ><body><div th:fragment="copy" id...
复制链接

扫一扫