系統中的很多頁面有很多公共內容，例如菜單、頁腳等，這些公共內容可以提取放在一個稱為“模板片斷”的公共頁面裡面，其它頁面可以引用這個 “模板片斷”內容。 ...
系統中的很多頁面有很多公共內容，例如菜單、頁腳等，這些公共內容可以提取放在一個稱為“模板片斷”的公共頁面裡面，其它頁面可以引用這個
“模板片斷”內容。
一、模板片斷的定義
可以是html標簽，也可以使用th:fragment屬性定義片斷。
二、引用片斷
1、使用th:insert屬性插入片斷，除此之外，還可以使用th:replace和th:include插入。
語法：
(1) th:insert="~{模板名稱}"
插入模板的整個內容
(2) th:insert="~{模板名稱::選擇器}"
插入模板的指定內容，選擇器可以對應th:fragment定義的名稱，也可以用類似JQuery選擇器的語法選擇部分片斷。
片斷選擇器語法：
a) /name，選擇子節點中節點名稱為name的節點
b) //name，選擇全部子節點中節點名稱為name的節點
c) name[@attr='value'] 選擇名稱為name並且屬性值為value的節點，如有多個屬性可用and連接
d) //name[@attr='value'][index] 選擇名稱為name並且屬性值為value的節點，指定節點索引
片斷選擇器的簡化語法：
a) 可以省略 @ 符號
b) 使用 # 符號代替 id 選擇，如div#id等價於div[id='id']
c) 使用 . 符號代替 class 選擇，如div.class等於於div[class='class']
d) 使用 % 代替片斷引用，如片斷節點使用了th:ref或th:fragment，則可使用div%ref來選取節點
(3) th:insert="~{::選擇器}"
不指定模板名稱，則選擇器作用於當前頁面
(4) th:insert="~{this::選擇器}"
與"~{::選擇器}"類似，不同之處是在本頁面找不到片斷時，會到模板引擎的process方法處理的模板中尋找片斷。
2、th:insert、th:replace、th:include的區別
th:insert 當前標簽裡面插入模板中的標簽
th:replace替換當前標簽為模板中的標簽
th:include前標簽裡面插入模板的標簽內容
3、模板片斷也支持傳入變數
引用語法：~{footer.html::名稱(參數)
4、片斷塊引用
可以使用th:block定義片斷塊，th:block是一個屬性容器，可以在裡面添加任何的th屬性。
例如表格的迴圈體中一般在tr中用th:each，也可以用th:block改寫。
5、刪除模板
使用th:remove刪除模板，屬性值：
all：刪除當前節點，包括子節點
body：刪除當前節點的全部子節點
tag：刪除當前節點，不包括子節點
all-but-first：除了當前節點下麵的第一個子節點，其它全部刪除
none：不進行任何操作
三、使用實例
開發環境：IntelliJ IDEA 2019.2.2
Spring Boot版本：2.1.8
新建一個名稱為demo的Spring Boot項目。
1、pom.xml
加入Thymeleaf依賴
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
2、src/main/java/com/example/demo/TestController.java
package com.example.demo; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class TestController { @RequestMapping("/") public String test(){ return "test"; } }
3、src/main/resources/templates/footer.html
<span th:fragment="frag1">frag1</span> <span th:fragment="frag2">frag2</span> <div id="footer1">footer1</div> <div> <div id="footer2">footer2</div> </div> <div> <span class="content">footer3</span> <span class="content">footer4</span> </div> <div th:fragment="welcome(userName)"> <span th:text="|hello,| + ${userName}"></span> </div>
4、src/main/resources/templates/test.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h4>th:insert引用片斷</h4> 引用指定模板的整個內容 <div th:insert="~{footer.html}"></div> 引用指定模板的片斷 <div th:insert="~{footer.html::frag1}"></div> 引用本頁面的片斷 <div th:insert="~{::frag3}"></div> <div th:insert="~{this::frag3}"></div> <div th:fragment="frag3">frag3</div> <h4>th:replace、th:include與th:insert的區別</h4> <div th:replace="~{footer.html::frag1}"></div> <div th:include="~{footer.html::frag1}"></div> <h4>片斷選擇器的部分用法</h4> <div th:insert="~{footer.html::/div[@id='footer1']}"></div> <div th:insert="~{footer.html:://div#footer2}"></div> <div th:insert="~{footer.html::span[class='content']}"></div> <div th:insert="~{footer.html:://span[class='content'][0]}"></div> <div th:insert="~{footer.html:://span.content}"></div> <div th:insert="~{footer.html::span%frag1}"></div> <h4>含有變數的片斷引用</h4> <div th:insert="~{footer.html::welcome('小明')}"></div> <h4>片斷塊引用</h4> <table> <th:block th:each="number : ${#numbers.sequence(0,1)}"> <tr> <td th:text="${number}"></td> </tr> </th:block> </table> <h4>刪除模板</h4> <table> <th:block th:each="number : ${#numbers.sequence(0,1)}"> <tr th:remove="${number > 0} ? all : none"> <td th:text="${number}"></td> </tr> </th:block> </table> </body> </html>
IDEA運行後，瀏覽器訪問：http://localhost:8080，查看網頁源代碼，結果如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h4>th:insert引用片斷</h4> 引用指定模板的整個內容 <div><span>frag1</span> <span>frag2</span> <div id="footer1">footer1</div> <div> <div id="footer2">footer2</div> </div> <div> <span class="content">footer3</span> <span class="content">footer4</span> </div> <div> <span>hello,null</span> </div></div> 引用指定模板的片斷 <div><span>frag1</span></div> 引用本頁面的片斷 <div><div>frag3</div></div> <div><div>frag3</div></div> <div>frag3</div> <h4>th:replace、th:include與th:insert的區別</h4> <span>frag1</span> <div>frag1</div> <h4>片斷選擇器的部分用法</h4> <div><div id="footer1">footer1</div></div> <div><div id="footer2">footer2</div></div> <div><span class="content">footer3</span><span class="content">footer4</span></div> <div><span class="content">footer3</span></div> <div><span class="content">footer3</span><span class="content">footer4</span></div> <div><span>frag1</span></div> <h4>含有變數的片斷引用</h4> <div><div> <span>hello,小明</span> </div></div> <h4>片斷塊引用</h4> <table> <tr> <td>0</td> </tr> <tr> <td>1</td> </tr> </table> <h4>刪除模板</h4> <table> <tr> <td>0</td> </tr> </table> </body> </html>
