Thymeleaf 模板

時間 2019-11-13

標籤 thymeleaf 模板简体版

原文原文鏈接

Thymeleaf 模板佈局 th:fragment、th:replace、th:insert、th:remove

th:fragment 模板佈局

模板片斷說明

模板中，常常但願從其餘模板中包含⼀些部分，如⻚眉，⻚腳，公共菜單等部分，爲了作到這⼀點，Thymeleaf 可使⽤th:fragment 屬性來定義被包含的模版⽚段，以供其餘模版包含。css

以下所示定義模板片斷：html

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

上⾯的代碼定義了⼀個名爲 copy 的⽚段，而後可使⽤ th:insert 或 th:replace屬性（Thymeleaf 3.0 再也不推薦使⽤ th:include）輕易地包含進須要的頁面中。spring

<body>
     ...     <div th:insert="~{footer :: copy}"></div>     ...
</body>

footer：表示模板名稱，就是 html 文件的名稱，若是是 springboot 開發，則根據 Spring Boot 配置的 Thymeleaf 映射查找。瀏覽器

copy：表示模板片斷名稱，即 th:fragment="copy" 的名稱springboot

th:insert 中的〜{...} 表示⽚段表達式，它是可選的，上⾯的代碼等價於以下所示寫法，這也是實際開發中經常使用的寫法：函數

<body>
     ...     <div th:insert="footer :: copy"></div>     ...
</body>

⽚段表達式語法
一、th:insert/th:replace 中,〜{...} 片斷表達式是可選的，可寫可不寫佈局

二、被引用的 th:fragment 模板片斷與引用的 th:insert 或 th:replace 能夠是在同一個 Html 文件中，也能夠不在同一個 html 中。this

⽚段表達式語法⾮常簡單，有以下三種不一樣的格式：編碼

1）〜{templatename :: selector} -:- templatename 表示模板名稱(html 文件名稱)，springboot 項目中就是 「templates」目錄下的 html 文件名稱，
它根據 springboot 對 thymeleaf 的規則進行映射。selector 便可以是 th:fragment 定義的片斷名稱，也能夠選擇器，如標籤的 id 值、CSS 選擇器、或者 XPath 等。

2）〜{templatename} -:- 包含名爲 templatename 的整個模板。
3）〜{:: selector} 或 〜{this :: selector}：包含在同⼀模板中的指定選擇器的⽚段

模板名 templatename 和選擇器 selector 均可以是表達式（甚⾄是條件表達式！）如：spa

<div th:insert="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>

再次注意，th:insert/th:replace 中的〜{...} 是可選的。

〜{templatename :: selector} 中的 selector 能夠是普通的選擇器，如標籤的 id 值、CSS 選擇器、或者 XPath 等：

...
<div id="copy-section"> &copy; 2011 The Good Thymes Virtual Grocery</div>
...

能夠直接經過 ID 屬性來引⽤上⾯的⽚段，也能夠是 CSS 選擇器(.content)、XPath (//div[@class='content'])：

...
<div th:insert="~{footer :: #copy-section}"></div>
 ———————————————— 
版權聲明：本文爲CSDN博主「蚩尤後裔」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連接及本聲明。
原文連接：https://blog.csdn.net/wangmx1993328/article/details/84747497

th:insert 與 th:replace 區別

Thymeleaf 3.0 以後再也不推薦使⽤ th:include.

th:insert：將被引用的模板片斷插⼊到本身的標籤體中
th:replace：將被引用的模板片斷替換掉本身
th:include：相似於 th:insert，⽽不是插⼊⽚段，它只插⼊此⽚段的內容。

<!--一、好比抽取的公用代碼片斷以下-->
<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

再次強調：

1）th:fragment 與 th:insert、th:replace、th:include 能夠在同一模板中，也能夠是在不一樣的模板中

2）th:insert 、th:replace、th:include 在標籤中進行引用時能夠不用片斷表達式〜{...} ，可是行內寫法時，必需要用片斷表達式，如：[[~{}]]、[(~{})]

參數化片斷簽名

爲了使模板⽚段具備相似函數的功能，th:fragment 定義的⽚段能夠指定⼀組參數：

<div th:fragment="frag (onevar,twovar)">
     <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>

因而在 th:insert、th:replace 引用模板片斷的時候，就能夠傳遞參數過去：

<div th:replace="templatename :: frag (${value1},${value2})">...</div> //按參數定義時的順序進行傳遞
<div th:replace="templatename :: frag (onevar=${value1},twovar=${value2})">...</div> //按參數名稱傳遞，此時與參數定義的順序無關

好比公共菜單中高亮顯示當前菜單時就可使用這種傳遞參數的方式進行標識當前活動的菜單。

編碼示例

SpringBoot 項目結構如上：

1）commons/commons.html：公共頁面，其中包含公共的頭部，公共的底部，公共的左側菜單。項目中這些公共部分都是得提取出來，而後供各個模塊引用便可。
公共的頭、尾、左側菜單能夠放在一個 html 模板中，也能夠放在單獨的模板中。

2）tiger/home.html：tiger 的首頁，會引用公共模板片斷，本身的 css 文件爲 css/tigerHome.css

3）user/home.html：用戶的首頁，會引用公共模板片斷，本身的 css 文件爲 css/userHome.css

4）css/commons.css 這是公共模板 commons.html 中的代碼片斷引用的樣式，由於 tiger/home.html、user/home.html 會引用 commons.html 
中的代碼片斷，這些片斷又須要 commons.css 中的樣式，因此 commons.css 必須也在 tiger/home.html、user/home.html 文件中進行 link 引用。

當點擊：http://localhost/thymeleaf/tiger/home 時進入 tiger/home.html

當點擊：http://localhost/thymeleaf/user/home 時進入 user/home.html

commons.html 公共模板

公共頁面，其中包含公共的頭部，公共的底部，公共的左側菜單。項目中公共部分均可以提取出來，而後供各個模塊引用便可。公共的頭、尾、左側菜單能夠放在一個 html 模板中，也能夠放在單獨的模板中。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8">
    <title>公共模板</title>
    <!-- 公共模板中，這個樣式文件能夠不用引用，由於不會從瀏覽器直接訪問公共模板，而是訪問具體的模塊-->
    <!-- 注意：若是模板片斷中應用了其中的樣式，則誰引用了模板片斷，誰就要導入此樣式文件-->
    <link type="text/css" rel="stylesheet" th:href="@{/css/commons.css}">
</head>
<body>
<!--定義公共的頭部，commonHeader 爲模板片斷名稱-->
<header th:fragment="commonHeader">
    <h2>護龍山莊</h2>
</header>
 
<article>
    <!-- 定義公共的左側菜單，commonMenu 表示片斷名稱，index 爲傳遞進來的參數-->
    <div class="articleLeft" th:fragment="commonMenu(index)">
        <!-- 根據傳遞的參數 index 來設置當前活動的菜單樣式；三元運算符，第三個參數缺省，當 ? 判斷爲 false 時返回 null-->
        <div><a th:href="@{/user/home}" th:class="${index}==0?'activeMenu'">用戶首頁</a></div>
        <div><a th:href="@{/tiger/home}" th:class="${index}==1?'activeMenu'">Tiger Home</a></div>
        <!-- 同理若是還有其它更多的菜單時，能夠依次往下傳遞參數-->
    </div>
    <div class="content">
    </div>
</article>
 
<!--定義公共的底部，這裏使用 id 選擇器，固然也能夠用片斷名，如 th:fragment="commonFooter"-->
<footer id="commonFooter">
    Copyright © 1998 - 2018 YYServer. All Rights Reserved
</footer>
 
</body>
</html>

user/home.html 引入模板片斷

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8">
    <title>用戶首頁</title>
    <!-- 被引用的模板片斷應用了 commons.css 中的樣式時，在引用的模塊中必須導入進來-->
    <link type="text/css" rel="stylesheet" th:href="@{/css/commons.css}">
    <!-- 這是本文件本身的樣式文件-->
    <link type="text/css" rel="stylesheet" th:href="@{/css/userHome.css}">
</head>
<body>
<!--引入公共的頭部，使用 replace 替換本身的 header 標籤-->
<!--注意：模板名稱會根據 springboot 對 Thymeleaf 的配置規則進行映射-->
<!--默認狀況下就是 templates 目錄下的 html 文件-->
<header th:replace="commons/commons :: commonHeader"></header>
<article>
    <!-- 引入公共的左側菜單，使用 replace 替換本身的 div;傳遞參數 0 ，與定義時約定的參數要保持一致-->
    <div th:replace="commons/commons :: commonMenu(0)">
    </div>
    <div class="content">
        <h2 class="hint">用戶首頁</h2>
    </div>
</article>
<!--引入公共的底部，這裏使用 id 選擇器，而不是片斷名稱-->
<footer th:replace="commons/commons :: #commonFooter"></footer>
</body>
</html>

與此同理，tiger/home.html 寫法也是同樣，只是在引入公共的左側菜單時傳遞的參數不一樣：

<div th:replace="~{commons/commons :: commonMenu(1)}">

若是還有更多的公共左側菜單，則只須要約定傳遞不一樣的參數便可。

運行效果

th:remove 刪除模版片斷

若是想在某些狀況下直接刪除模板中的某些代碼片斷，則可使用 th:remove，如 <tr th:remove="all">...。

th:remove 能夠有五種不一樣的刪除⽅式：

1）all：刪除包含標籤及其全部⼦項
2）body：不刪除包含標籤，但刪除全部的⼦項
3）tag：刪除包含標籤，但不要刪除其⼦項
4）all-but-first：刪除第一個子項之外的其它全部子項
5）none：什麼都不作。 該值對於動態計算有⽤。null 也會被視爲 none

<body>
<!--hint 樣式會爲 div 加一個 1px 的紅色邊框-->
<div class="hint">
    <p>th:remove<span> !</span></p>
</div>
<!--all：刪除全部標籤，包含本身-->
<div class="hint" th:remove="all">
    <p>all<span> @</span></p>
</div>
<!--body：不刪除本身，但刪除全部子項-->
<div class="hint" th:remove="body">
    <p>body<span> #</span></p>
</div>
<!--tag：刪除本身，但不刪除全部子項-->
<div class="hint" th:remove="tag">
    <p>tag<span> $</span></p>
</div>
<!--all-but-first：除第一個子項之外，刪除其它全部子項-->
<div class="hint" th:remove="all-but-first">
    <p>all-but-first1<span> %</span></p>
    <!-- 上面第一個子項不會被刪除，從第二個子項開始所有會被刪除-->
    <p>all-but-first2<span> %</span></p>
</div>
<!--none：不作任何處理。該值對於動態計算時有用-->
<div class="hint" th:remove="none">
    <p>none<span> ^</span></p>
</div>
</body>

只要 th:remove 返回⼀個容許的字符串值（all，tag，body，all-but-first ，none），則 th:remove 屬性可使⽤任何 Thymeleaf 標準表達式，如：

<a href="/something" th:remove="${condition}? tag : none">Link text not to be removed</a>

th:remove 將 null 視爲 none，所以如下⼯做與上述示例做用相同：

<a href="/something" th:remove="${condition}? tag">Link text not to be removed</a>

在這種狀況下，若是 $ {condition} 爲 false，則返回 null，所以不會執⾏刪除。

本文連接：https://blog.csdn.net/wangmx1993328/article/details/84747497

相關標籤/搜索

每日一句

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