版權聲明:本文爲 小異常 原創文章,非商用自由轉載-保持署名-註明出處,謝謝!
本文網址: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)瀏覽器測試