版权声明:本文为 小异常 原创文章,非商用自由转载-保持署名-注明出处,谢谢!
本文网址:https://blog.csdn.net/sun8112133/article/details/107055533
文章目录
Thymeleaf 模板引擎 也有自己的布局方式,本篇博客中我大致介绍三种方式:
th:insert
:它将插入指定的片段作为正文的主标签;th:replace
:用指定的片段来替换其主标签;th:include
:类似于th:insert
,它只插入指定的片段内容。(3.x
版本后,不再推荐使用)。本篇博客以一个简单的小例子为大家演示这三个属性的区别,我们准备两个页面(
result.html
和foot.html
),我们将在result.html
中引入foot.html
页面中的内容。
1、使用 th:fragment 属性
1)result.html
<body>
<h3>th:insert属性:</h3>
<div th:insert="~{foot :: copy}"></div>
<hr>
<h3>th:replace属性:</h3>
<div th:replace="~{foot :: copy}"></div>
<hr>
<h3>th:include属性:</h3>
<div th:include="~{foot :: copy}"></div>
</body>
2)foot.html
<body>
<footer th:fragment="copy">
© 2020 <a href="http://www.baidu.com">百度</a>
</footer>
</body>
3)浏览器测试
2、不使用 th:fragment 属性
若不使用
th:fragment
属性,则需要使用id
属性。
1)result.html
<body>
<h3>th:insert属性:</h3>
<div th:insert="~{foot :: #copy}"></div>
<hr>
<h3>th:replace属性:</h3>
<div th:replace="~{foot :: #copy}"></div>
<hr>
<h3>th:include属性:</h3>
<div th:include="~{foot :: #copy}"></div>
</body>
2)footer.html
<body>
<footer id="copy">
© 2020 <a href="http://www.baidu.com">百度</a>
</footer>
</body>
3)浏览器测试