Spring Boot：使用Thymeleaf布局方言的Thymeleaf模板装饰器

介绍

在所有Thymeleaf模板上重用页眉和页脚的问题经常在StackOverflow上提出。在本文中，我将向您展示如何使用Thymeleaf布局方言来结构化模板，以在Spring Boot应用程序中实现更高的代码可重用性。

创建一个Spring Boot应用程序

让我们使用Spring Initializer创建一个具有所需依赖项的空项目。我为空项目选择了以下内容：

在最喜欢的IDE中加载项目后，只需将thymeleaf和thymeleaf-layout-dialect版本更新为项目pom.xml ：

<thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>

注意：我在这个示例中使用了Spring Boot 1.5.8.RELEASE。一旦发布了稳定的2.0版本，我将相应地更新文章。

定义基本模板

如果使用的是Spring Boot，则无需为使用Thymeleaf和Thymeleaf布局方言进行任何配置。自动配置支持将配置使用Thymeleaf模板所需的所有bean。

让我们在src\main\resources\templates位置创建base.html ：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"><head><title layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE">Base</title><meta name="description" content=""/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel="stylesheet" type="text/css" href="https://bootswatch.com/4/cerulean/bootstrap.min.css" /></head><body><nav class="navbar navbar-light bg-light"><span class="navbar-brand mb-0 h1">Decorator Sample</span></nav><div class="container"><nav aria-label="breadcrumb" role="navigation"><ol class="breadcrumb"><th:block layout:fragment="breadcrumb"></th:block></ol></nav><div class="content"><div layout:fragment="page_content"></div></div></div><!-- /.container --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><th:block layout:fragment="scripts"></th:block></body></html>

在上面的base.html您可以看到三个占位符：
- 面包屑
–内容 –内容所需的Javascript

其余Thymeleaf模板使用base.html装饰，并仅在以下三个部分中提供了三个占位符所需的数据。页面的标题定义为layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE" ，这意味着，如果任何模板声明了My Page标记，则页面标题将变为Base - My Page 。

面包屑的内容

希望使用base.html装饰自己的任何页面都应在其HTML中声明，如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{base}">
</html>

layout:decorate属性采用基本模板相对于模板根文件夹的位置。在我们的例子中，模板的根文件夹是src/main/resources/templates 。

通过在“：”之间的任意位置编写以下HTML，我们可以提供breadcrumb的内容。

<th:block layout:fragment="breadcrumb"><li class="breadcrumb-item">Page 1</li>
</th:block>

理想情况下，遵循在基本模板中定义layout:fragment的顺序将有助于保持页面之间内容顺序的一致性。 Thymeleaf及其布局方言生成的最终HTML是：

<nav aria-label="breadcrumb" role="navigation"><ol class="breadcrumb"><li class="breadcrumb-item">Page 1</li></ol>
</nav>

在相似的行上， page_content的内容将是：

<div layout:fragment="page_content" id="page_content"><h3>Page 1</h3><div class="alert alert-info" style="display: none;" id="js-content"></div><a th:href="@{/page2}">Go to page 2</a>
</div>

使用<th></th>将不需要使用虚拟标记来包装内容。如果需要将内容包装在特定元素中，例如上面的<div> ，则必须用特定元素替换<th></th> 。

填充

很少有人会质疑scripts占位符scripts的必要性。这使我们可以将与页面相关的javascript放在一个地方，而不污染基本模板中的所有javascript。

<th:block layout:fragment="scripts">
<script type="text/javascript">
$(function(){$("#js-content").html("From Javascript").slideToggle();
});
</script>
</th:block>

您甚至可以创建一个专用的.js文件，并将其链接到scripts部分：

<th:block layout:fragment="scripts">
<script type="text/javascript"src="@{/path/to/js/file}">
</script>
</th:block>

结论

在本文中，我们看到了如何使用Thymeleaf Layout Dialect用通用的基础模板来装饰模板。当相关库位于其类路径上时，我们无需进行任何配置，因为Spring Boot通过自动配置来进行配置，在这种情况下，这是启动程序pom spring-boot-starter-thymeleaf带来的依赖关系

可以在这里找到可用的Spring Boot示例。