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



博客中若有不恰當的地方,請您一定要告訴我。前路崎嶇,望我們可以互相幫助,並肩前行!



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