1. Introduction
Thymeleaf 是一個用於處理和創建 HTML、XML、JavaScript、CSS 和純文本的 Java 模板引擎。 想要了解 Thymeleaf 和 Spring 的簡介，請查看這篇文檔。
在這篇文檔中，我們將重點介紹模板引擎——大多數中等或複雜的網站都需要以某種方式進行。 簡單來説，頁面需要共享常見的頁面組件，例如標題、頁腳、菜單以及可能還有更多。
Thymeleaf 通過自定義方言來解決這個問題——你可以使用 Thymeleaf 標準佈局系統 或 佈局方言 構建佈局，佈局方言使用裝飾器模式來處理佈局文件。
在本文中，我們將討論 Thymeleaf 佈局方言 的一些功能——可以在這裏找到它： 這裏。 更加具體地説，我們將討論其功能，例如創建佈局、自定義標題或合併 head 元素。
2. Maven 依賴
首先，讓我們看看如何將 Thymeleaf 集成到 Spring 中所需的配置。我們需要在依賴中包含 thymeleaf-spring 庫：
<div>
<div>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.1.2.RELEASE</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.1.2.RELEASE</version>
</dependency>請注意，對於 Spring 4 項目，必須使用 thymeleaf-spring4 庫，而不是 thymeleaf-spring5 庫。 最新依賴的版本可以在 這裏找到。
我們還需要一個自定義佈局方言的依賴：
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.4.1</version>
</dependency>最新版本可在 Maven 中央倉庫 中找到。
3. Thymeleaf Layout Dialect 配置
在本節中，我們將討論如何配置 Thymeleaf 使用 Layout Dialect。如果您想回顧一下如何在您的 Web 應用程序項目中配置 Thymeleaf 3.0，請查看本教程。
一旦我們在項目中添加了 Maven 依賴，我們就需要將 Layout Dialect 添加到現有的 Thymeleaf 模板引擎中。我們可以使用 Java 配置來完成此操作：
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.addDialect(new LayoutDialect());或者通過使用 XML 文件配置：
<bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
<property name="additionalDialects">
<set>
<bean class="nz.net.ultraq.thymeleaf.LayoutDialect"/>
</set>
</property>
</bean>
在裝飾內容和佈局模板的各個部分時，默認行為是將所有內容元素放置在佈局元素之後。
有時我們需要更智能地合併元素，允許將相似元素分組在一起（例如，將 JavaScript 腳本和樣式表一起分組等）。
為了實現這一點，我們需要向我們的配置中添加排序策略——在本例中，它將是分組策略。
engine.addDialect(new LayoutDialect(new GroupingStrategy()));或者在XML中:
<bean class="nz.net.ultraq.thymeleaf.LayoutDialect">
<constructor-arg ref="groupingStrategy"/>
</bean>默認策略是追加元素。 鑑於此，我們將會使所有內容都整理並分組。
如果以上策略均不符合我們的需求，我們可以實現自定義的 SortingStrategy 並將其傳遞給方言，如上所示。
4. 命名空間和屬性處理器的特性
配置完成後，我們可以開始使用 layout 命名空間，以及五種新的屬性處理器：decorate、title-pattern、insert、replace 和 fragment。
為了創建我們想要用於 HTML 文件的佈局模板，我們創建了名為 template.html 的文件。
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
...
</html>如我們所見，我們已將命名空間從標準 更改為 。
現在我們可以開始在我們的 HTML 文件中使用屬性處理器。
4.1. <em >layout:fragment</em >>
為了在我們的佈局或可重用模板中創建自定義部分，並允許這些部分被具有相同名稱的部分替換，我們使用 <em >layout:fragment</em >> 屬性，位於 <em >template.html</em >> 文件的
<body>
<header>
<h1>New dialect example</h1>
</header>
<section layout:fragment="custom-content">
<p>Your page content goes here</p>
</section>
<footer>
<p>My custom footer</p>
<p layout:fragment="custom-footer">Your custom footer here</p>
</footer>
</body>請注意，將由我們自定義的 HTML 替換的內容和頁腳共有兩個部分。
同時，如果任何片段未找到，則需要編寫默認的 HTML。
4.2. `layout:decorate</h3
下一步我們需要做的是創建一個HTML文件，該文件將被我們的佈局裝飾。
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{template.html}">
<head>
<title>Layout Dialect Example</title>
</head>
<body>
<section layout:fragment="custom-content">
<p>This is a custom content that you can provide</p>
</section>
<footer>
<p layout:fragment="custom-footer">This is some footer content
that you can change</p>
</footer>
</body>
</html>如第3行所示，我們使用 layout:decorate 並指定裝飾器源。佈局文件中與內容文件中的片段匹配的所有片段都將被替換為自定義實現。
4.3. <em layout:title-pattern</em>
鑑於 <em layout:title-pattern</em> 佈局方言會自動覆蓋佈局中的標題，使用內容模板中找到的標題，因此您可能希望保留佈局中找到的部分標題信息。
例如，我們可以創建麪包屑導航或保留頁面標題中的網站名稱。 在這種情況下，<em layout:title-pattern</em> 處理器會提供幫助。 您只需要在佈局文件中指定以下內容：
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Baeldung</title>以下是翻譯後的內容：
因此，前一節中呈現的佈局和內容文件的最終結果將如下所示：
<title>Baeldung - Layout Dialect Example</title>4.4. 佈局插入/替換
第一個處理器，layout:insert，類似於 Thymeleaf 的原始 th:insert，但允許將整個 HTML 片段傳遞給插入的模板。如果您的 HTML 內容比較複雜，且無法僅通過上下文變量來確定或構建，那麼它非常有用。
第二個處理器，layout:replace，與第一個處理器類似，但具有與 th:replace 相同的行為，即實際會用定義的片段的代碼替換主機標籤。
5. 結論
在本文中，我們描述了幾種在 Thymeleaf 中實現佈局的方法。
請注意，這些示例使用了 Thymeleaf 3.0 版本。如果您想了解如何遷移您的項目，請按照此 步驟 進行操作。
如何測試？ 我們的建議是首先在瀏覽器中進行嘗試，然後檢查現有的 JUnit 測試。
請記住，您可以使用上述的 佈局方言 構建佈局，或者您可以輕鬆創建您自己的解決方案。希望本文能為您提供更多關於該主題的見解，您會根據您的需求找到最適合您的方法。
