Themeleaf復用功能

Thymeleaf 的復用功能能夠有效減少代碼冗余，提升開發效率，讓代碼更易于維護。以下為你詳細介紹幾種常見的復用功能：

1. 片段復用（Fragments）

定義片段

借助 th:fragment 指令，可將頁面的部分代碼定義成可復用的片段。片段能定義在單獨的文件里，也可以和使用它的頁面處于同一文件中。
示例：在 fragments.html 文件中定義片段：

html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body><!-- 定義一個簡單的頭部片段 --><div th:fragment="header"><h1>網站頭部</h1></div><!-- 定義一個帶參數的側邊欄片段 --><div th:fragment="sidebar(title)"><h2 th:text="${title}">默認側邊欄標題</h2><ul><li>菜單項 1</li><li>菜單項 2</li></ul></div>
</body>
</html>

使用片段

利用 th:replace 或者 th:insert 指令來引入片段。
th:replace 會用片段內容替換當前標簽
th:insert 會把片段內容插入到當前標簽內部。
示例：在 index.html 文件中使用上述片段：

html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>首頁</title>
</head>
<body><!-- 引入頭部片段 --><div th:replace="fragments :: header"></div><!-- 引入側邊欄片段并傳遞參數 --><div th:replace="fragments :: sidebar(title='特色側邊欄')"></div><p>這是首頁的主要內容。</p>
</body>
</html>

2. 布局復用（Layouts）

定義布局模板

借助 Thymeleaf Layout Dialect 或者類似的擴展，能夠創建布局模板，把頁面的公共部分（像頭部、底部、導航欄等）提取出來。
示例：創建 layout.html 布局模板：

html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head><title th:text="${title}">默認標題</title><meta charset="UTF-8">
</head>
<body><header><h1>全局頭部</h1></header><!-- 內容區域，子頁面將替換此部分 --><section layout:fragment="content"><p>默認內容</p></section><footer><p>全局底部</p></footer>
</body>
</html>

使用布局模板

在具體頁面里使用 layout:decorate 指令指定要使用的布局模板，再用 layout:fragment 指令替換布局模板里的特定片段。
示例：創建 page.html 頁面并使用布局模板：

html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"layout:decorate="~{layout}">
<head><title>具體頁面標題</title>
</head>
<body><!-- 替換布局模板中的 content 片段 --><section layout:fragment="content"><p>這是具體頁面的內容。</p></section>
</body>
</html>

3. 表達式復用

可以把常用的表達式提取到一個變量中，在需要的地方復用。
示例：

html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>表達式復用示例</title>
</head>
<body><!-- 定義一個表達式變量 --><th:block th:with="user = ${session.user}"><p th:if="${user != null}" th:text="${'歡迎，' + user.name}">未登錄</p><p th:if="${user == null}">請登錄</p></th:block>
</body>
</html>

在這個示例中，th:with 指令定義了一個名為 user 的變量，用于存儲 session.user 的值，后續在頁面中能多次使用該變量，避免重復編寫相同的表達式。

4. 消息復用

利用消息表達式（#{}）和國際化資源文件，能夠復用文本消息。
示例：

在 messages.properties 文件中定義消息：

properties
welcome.message=歡迎訪問我們的網站！

在 HTML 頁面中使用消息：

html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>消息復用示例</title>
</head>
<body><p th:text="#{welcome.message}">默認歡迎消息</p>
</body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/79021.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/79021.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/79021.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！