Thymeleaf之模板布局

版权声明:本文为 小异常 原创文章,非商用自由转载-保持署名-注明出处,谢谢!
本文网址:https://blog.csdn.net/sun8112133/article/details/107055533







Thymeleaf 模板引擎 也有自己的布局方式,本篇博客中我大致介绍三种方式:

  1. th:insert:它将插入指定的片段作为正文的主标签;
  2. th:replace:用指定的片段来替换其主标签;
  3. th:include:类似于 th:insert,它只插入指定的片段内容。(3.x 版本后,不再推荐使用)。

本篇博客以一个简单的小例子为大家演示这三个属性的区别,我们准备两个页面(result.htmlfoot.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">
		&copy; 2020 <a href="http://www.baidu.com">百度</a>
	</footer>
</body>

3)浏览器测试

浏览器效果1

源代码1


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">
		&copy; 2020 <a href="http://www.baidu.com">百度</a>
	</footer>
</body>

3)浏览器测试

浏览器效果2
源代码2



博客中若有不恰当的地方,请您一定要告诉我。前路崎岖,望我们可以互相帮助,并肩前行!



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章