Thymeleaf經常使用語法：模板片段

時間 2019-11-06

標籤 thymeleaf 經常使用語法模板片段简体版

原文原文鏈接

系統中的不少頁面有不少公共內容，例如菜單、頁腳等，這些公共內容能夠提取放在一個稱爲「模板片段」的公共頁面裏面，其它頁面能夠引用這個
「模板片段」內容。html

1、模板片段的定義java

能夠是html標籤，也可使用th:fragment屬性定義片段。web

2、引用片段spring

一、使用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來選取節點app

(3) th:insert="~{::選擇器}"
不指定模板名稱，則選擇器做用於當前頁面spring-boot

(4) th:insert="~{this::選擇器}"
與"~{::選擇器}"相似，不一樣之處是在本頁面找不到片段時，會到模板引擎的process方法處理的模板中尋找片段。this

二、th:insert、th:replace、th:include的區別
th:insert 當前標籤裏面插入模板中的標籤
th:replace替換當前標籤爲模板中的標籤
th:include前標籤裏面插入模板的標籤內容spa

三、模板片段也支持傳入變量
引用語法：~{footer.html::名稱(參數)code

四、片段塊引用
可使用th:block定義片段塊，th:block是一個屬性容器，能夠在裏面添加任何的th屬性。
例如表格的循環體中通常在tr中用th:each，也能夠用th:block改寫。

五、刪除模板
使用th:remove刪除模板，屬性值：
all：刪除當前節點，包括子節點
body：刪除當前節點的所有子節點
tag：刪除當前節點，不包括子節點
all-but-first：除了當前節點下面的第一個子節點，其它所有刪除
none：不進行任何操做

3、使用實例

開發環境：IntelliJ IDEA 2019.2.2
Spring Boot版本：2.1.8

新建一個名稱爲demo的Spring Boot項目。

一、pom.xml
加入Thymeleaf依賴

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

二、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";
    }
}

三、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>

四、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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。