1 抽取公共片段
在會重複使用的code中加入th:fragment="copy"
如以下
<div th:fragment="copy">
OOXXX
</div>
2引入公共片段
然後在要重複的code中插入
<div th:insert="~{footer :: copy}"></div>
這邊也可以寫作
<div th:insert="footer :: copy"></div>
這樣就可以共用程式碼簡化重複的code了
而 ~{footer :: copy}為
~{templatename:: selector} 模板名::選擇器
~{templatename:: fragmentname} 模板名::片段名
------------------------------------------------------------
三種引用方式
th:insert >將公共片段整段插入到聲明引用的元素中
th:replace >將聲明引入的元素替換為公共片段
th:include >將引入的片段的內容包含進這個標籤中
範例
<footer th:fragment="copy">
© 2021 The Good Thymes Vitrual Grocery
</footer>
引入方式
<body>
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>
</body>
效果
<body>
<div>
<footer>
© 2021 The Good Thymes Vitrual Grocery
</footer>
</div>
<footer>
© 2021 The Good Thymes Vitrual Grocery
</footer>
<div>
© 2021 The Good Thymes Vitrual Grocery
</div>
</body>
------------------------------
另外一種設定方式, 可以依照id( ~{templatename:: selector} )
<div id="copy-section">
© 2021 The Good Thymes Vitrual Grocery
</div>
<div th:insert="~{footer : : #copy-section}"></div>
沒有留言:
張貼留言