溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“Thymeleaf模板片斷技術怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Thymeleaf模板片斷技術怎么使用”吧!
系統中的很多頁面有很多公共內容，例如菜單、頁腳等，這些公共內容可以提取放在一個稱為“模板片斷”的公共頁面里面，其它頁面可以引用這個 “模板片斷”內容。
一、模板片斷的定義
可以是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>
<h5>th:insert引用片斷</h5>
引用指定模板的整個內容
<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>
<h5>th:replace、th:include與th:insert的區別</h5>
<div th:replace="~{footer.html::frag1}"></div>
<div th:include="~{footer.html::frag1}"></div>
<h5>片斷選擇器的部分用法</h5>
<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>
<h5>含有變量的片斷引用</h5>
<div th:insert="~{footer.html::welcome('小明')}"></div>
<h5>片斷塊引用</h5>
<table>
<th:block th:each="number : ${#numbers.sequence(0,1)}">
<tr>
<td th:text="${number}"></td>
</tr>
</th:block>
</table>
<h5>刪除模板</h5>
<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> <h5>th:insert引用片斷</h5> 引用指定模板的整個內容 <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> <h5>th:replace、th:include與th:insert的區別</h5> <span>frag1</span> <div>frag1</div> <h5>片斷選擇器的部分用法</h5> <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> <h5>含有變量的片斷引用</h5> <div><div> <span>hello,小明</span> </div></div> <h5>片斷塊引用</h5> <table> <tr> <td>0</td> </tr> <tr> <td>1</td> </tr> </table> <h5>刪除模板</h5> <table> <tr> <td>0</td> </tr> </table> </body> </html>
到此，相信大家對“Thymeleaf模板片斷技術怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
