SpringBoot-thymeleaf公共頁面元素抽取(十二)

一個同類型的網頁中有着大量的重復的內容,我們需要把重復的內容抽取出來,這樣就會顯得網頁不是那么臃腫.

{templatename::fragmentname}:模板名::片段名

1、抽取公共片段

<nav class="xxx" th:fragment="topbar">

使用標簽 th:fragment="xxx"

2、引入公共片段

<!--映入抽取的topbar-->
<!--模板名:會使用thymeleaf的前后墜配置規則進行解析-->
     <div th:replace="dashboard::topbar"></div>

{templatename::selector}:模板名::選擇器

1、抽取公共片段

<nav class="xxx" id="xxx">

2、引入公共片段

<div th:replace="~{dashboard::#sidebar}"></div>

三種引用屬性的區別

<footer th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

引入方式
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

效果
<div>
    <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
</div>

<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>

三種引入公共片段的th屬性：

th:insert：將公共片段整個插入到聲明引入的元素中

th:replace：將聲明引入的元素替換為公共片段

th:include：將被引入的片段的內容包含進這個標簽中

注意點:

insert的公共片段在div標簽中,
如果使用th:insert等屬性進行引入，可以不用寫~{},
行內寫法可以加上：[[~{}]];[(~{})]；