什麼是 Thymeleaf 以及如何在 Spring Boot 應用程序中使用它?
Thymeleaf 是一個 Java 模板引擎。它為 Web 和獨立應用程序開發模板。該模板引擎使用自然模板概念將邏輯註入您的佈局，而不會影響您的設計。借助 Thymeleaf，您可以控制應用程序如何處理您創建的模板。
Thymeleaf 支持處理多種模板格式，包括 HTML、XML、Text、JavaScript、CSS 和 RAW。其中，HTML是Thymeleaf框架內最常用的模板格式。
在您的應用程序中初始化 Thymeleaf
或者，人們可以將 Thymeleaf 合併到他們的 Spring Boot 項目中，方法是選擇在通過 Spring 的初始化工俱生成樣板代碼期間將其包含在內，或者隨後將其包含在依賴項標題下的構建規範文件中。
如果您選擇 Gradle 項目選項，則指定項目依賴項的配置文件稱為“build.gradle”文件。另一方面，如果您選擇 Maven 作為依賴關係管理解決方案，則相應的配置文件的標題將是“pom.xml”。
指定項目依賴項的 XML 文件（稱為“pom.xml”）應該包含概述這些依賴項的特定部分。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
事實上，您的 build.gradle 文件必須包含特定的依賴項段，如下所示:
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
上述文章介紹了一個說明性應用程序，可以通過特定的 GitHub 存儲庫訪問該應用程序，該存儲庫授予用戶根據 MIT 許可條款免費使用該應用程序的權限。
將 Thymeleaf 集成到 Spring 應用程序中可以利用其基礎庫，從而可以使用 Thymeleaf 的 Spring 標準方言。這種方言呈現出獨特的屬性和表達風格，有助於將各種功能融入設計結構中。
在 Spring Boot 中使用 Thymeleaf
為了在 Spring 應用程序中使用 Thymeleaf，需要通過製作模板文檔來啟動。在此特定示例中，為模板選擇的格式是 HTML 文件。建議在 Spring Boot 資源文件中的“templates”目錄中創建所有 Thymeleaf 模板。
home.html 文件
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Generic Website</title>
</head>
<body></body>
</html>
提供的 Thymeleaf 模板展示了傳統的 HTML 標記，包括一個無關的命名空間前綴“ xmlns:th ”，它作為在當前 HTML 文檔中使用“ th: ”註釋的任何屬性的基礎。 Thymeleaf 模板中的所有其他屬性和元素均符合標準 HTML 語法和約定。
創建標題
標頭在通過其徽標傳達網站或應用程序的用途方面發揮著重要作用，同時也促進用戶的無縫導航。基本標題的基本組成部分包括徽標和多個導航鏈接，可輕鬆訪問網站或應用程序的各個部分。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div id="nav">
<h1>LOGO</h1>
<ul>
<li> <a id="current">Home </a> </li>
<li> <a>About</a> </li>
<li> <a>Services</a> </li>
</ul>
</div>
</body>
</html>
Thymeleaf 提供了一種方便的方法，通過使用 th:insert 屬性，將指定的標題合併到 Web 應用程序中的任何網頁上。該屬性與 th:insert 和 th:replace 兼容，Thymeleaf 接受它們作為“片段表達式值”。這些片段表達式提供了在整個佈局的各個點插入結構化內容部分的功能。
<div th:insert="~{header :: #nav}"></div>
將上述標記合併到home.html文件的開始``標記中將導致主頁上出現標題。片段表達包含多個成分，其中兩個是可選的，而其餘兩個是必需的。
⭐波浪號 (~)，可選。
一組可選的大括號，用 {} 表示
上述包含所需標記的 HTML 模板由標籤“header.html”指定。
為了成功執行所提供的 JavaScript 代碼，需要確保 HTML 文件包含 ID 屬性設置為“nav”的 元素。這可以通過在 HTML 文檔的 ``` 標記中添加適當的標記並相應地分配所需的 ID 值來實現。
事實上，採用上述標記將產生與通過前面詳述的替代方法實現的結果相同的結果。
<div th:insert="header :: #nav"></div>
填充您的模板主體
Thymeleaf 在其模板結構中支持多種表達格式，包括以下五個不同的類別:
⭐片段表達(~{€…})
⭐消息表達(#{€…})
⭐鏈接 URL 表達式 (@{€…})
⭐變量表達式(${€…})
⭐選擇變量表達式(*{€…})
利用消息表達式可以輕鬆地將無關的文本元素合併到佈局中。通過採用這種方法，人們可以無縫地替換或重新利用其設計中存在的內容。實現消息表達式時，必須將關聯的文本組件存儲在位於 resourcesfolder 目錄下的文件中。
提供的示例使用名為“messages.properties”的特定資源文件，其中包括給定的摘錄:
placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.
請注意，摘錄的段落包含一個名為“placeholder.text”的標識符。指定該名稱是因為每個消息傳遞組件可能包含各種通信。因此，有必要合併參考點，以便將特定消息集成到配置中。
<p th:text="#{placeholder.text}"></p>
將提供的代碼片段合併到 HTML 文檔的正文中可確保佔位符內容在用戶界面中顯示為一個連貫的段落。與片段表達式相反，消息表達式的所有組成部分都是強制性的且不可或缺的。消息表達式需要包含指定的每個元素，不得有任何遺漏或替換。
⭐數字符號 (#)。
⭐一對大括號 ({})。
包含在指定為“佔位符”的元素內的文本內容是人們想要傳達的消息，可以通過其關聯的屬性或屬性來訪問該消息，例如“佔位符.文本”。
設計模板的樣式
“資源”目錄中的另一個關鍵組件與靜態文件有關，它充當 CSS 樣式表和視覺元素的存儲庫，這些元素是 Web 應用程序功能不可或缺的一部分。為了在外部託管的 CSS 文件和 Thymeleaf HTML 模板之間建立連接，必須使用鏈接 URL 表達式。這種多功能表達能夠處理關係 URL 和絕對 URL，在將基本設計組件與項目基礎集成時提供靈活性和輕鬆性。
<link rel="stylesheet" th:href="@{/css/style.css}" />
將提供的代碼合併到 HTML 文檔的 元素中，可以利用單獨的 style.css 文件進行樣式設置，該文件位於示例應用程序資源文件的 static/css 目錄中。鏈接到此 CSS 文件時，必須確保為“th:href”屬性分配適當的 URL 表達式。
Thymeleaf 提供了多種屬性，使開發人員能夠改進他們的頁面設計。這些屬性中包括“th:style”屬性，它允許在佈局中集成視覺元素。
<div id="showcase" th:style="'background: url(/images/background.jpg) no-repeat center center fixed;'">
標記使用“th:style”屬性將背景圖像注入佈局的特定部分。 Thymeleaf 擁有一百多個屬性，可用於賦予佈局內的風格和功能特徵。
變量表達式
變量表達式是 Thymeleaf 語法中普遍且複雜的一個方面，允許從應用程序上下文或其中的對象檢索信息以合併到模板中。根據要在視圖中顯示的數據的性質，有兩種可用的變量表達式。
利用美元符號作為變量表達式的一部分，可以提取與應用程序上下文中發生的特定任務相關的信息。相關示例涉及從特定模式獲取有關用戶的詳細信息。當執行提供的示例項目並在 Web 瀏覽器中導航到 http://localhost:8080/ 時，用戶會遇到一個模式界面。
關閉模式窗口或通過它提交名稱後，應用程序將重定向到其主頁。到達所述主頁後，用戶將遇到一個標準網站，其中包含問候語“歡迎”，並隨後顯示字符串中模式中輸入的文本。
上述應用程序利用變量表達式來實現其目的。在 modal.html 文檔中，通過合併隨後的標記來呈現基本結構:
<form id="form" th:action="@{/home}" method="post">
<input type="text" name="userName"class="form-control" placeholder="Your Name" />
<button type="submit" class="btn">Submit</button>
</form>
用戶提交表單後，會觸發 th:action 屬性，其值對應於在 WebController 類中發現的 POST URL。
@PostMapping("/home")
public String processName(String userName, Model model) {
model.addAttribute("userName", userName);
return "home";
}
“processName()”方法將用戶通過模式提供的字符串作為輸入，並將其存儲在名為“userName”的變量中。隨後，利用變量表達式，控制器將“ userName ”變量注入到佈局中。
<h1>Welcome <span th:text="${userName}"></span>!</h1>
隨著軟件系統內復雜性的增加，星號增強選擇變量表達式的利用變得越來越有價值。一個實際的例子涉及身份驗證機制，其中從用戶對象收集用戶名並將其合併到界面設計中有效地例證了此功能。
備用模板和样式選項
雖然 Thymeleaf 作為 Spring Boot 項目的首選模板解決方案而受到關注，但考慮提供類似功能的替代選擇也很重要。這些替代方案包括 JavaServer Pages (JSP)，它提供服務器端 Java 代碼生成； Groovy 模板，允許使用 Groovy 腳本語言創建動態內容； FreeMarker模板，一個支持多種編程語言的開源模板引擎；和 Mustache 模板，以其簡單性和易於集成而聞名。此外，開發人員可以靈活地採用自定義 CSS 樣式或利用預先存在的 CSS 框架來設計其頁面佈局。