📅 最后修改于: 2023-12-03 14:47:58.539000 🧑 作者: Mango
Thymeleaf 是一个 Java 服务器端的模板引擎，它允许开发人员通过 HTML 文件来创建动态的网页。在 Thymeleaf 中，我们可以使用布局标题模式来为网页创建一致的页面布局。布局标题模式是一种模板继承机制，它允许我们基于一个主模板创建多个子模板，并让这些子模板继承主模板的布局。
要使用布局标题模式，我们需要在主模板和子模板中都使用 th:replace 属性。主模板中定义页面的基本结构和布局，子模板中只需要使用 th:replace 属性指定要继承的主模板即可。下面是一个简单的例子：
<!-- 主模板 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${pageTitle}">Default Page Title</title>
<link rel="stylesheet" th:href="@{/css/main.css}"/>
<script th:src="@{/js/main.js}"></script>
</head>
<body>
<header th:replace="fragments/header"></header>
<nav th:replace="fragments/nav"></nav>
<div class="container" th:fragment="content">Content goes here.</div>
<footer th:replace="fragments/footer"></footer>
</body>
</html>
<!-- 子模板 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${pageTitle}">Default Page Title</title>
<link rel="stylesheet" th:href="@{/css/main.css}"/>
<script th:src="@{/js/main.js}"></script>
</head>
<body>
<header th:replace="fragments/header"></header>
<nav th:replace="fragments/nav"></nav>
<div class="container" th:replace="layouts/main :: content">Content goes here.</div>
<footer th:replace="fragments/footer"></footer>
</body>
</html>
在以上示例中，主模板中定义了一个带有 th:fragment 属性的 <div> 元素，我们使用这个属性来指定它是一个可替换的片段。在子模板中，我们可以通过 th:replace 属性引用这个可替换的片段，这样子模板就可以继承主模板的页面布局。
在我们上面的例子中，我们创建了四个片段：header、nav、content 和 footer。这些片段可以在任何需要他们的地方通过 th:replace 属性引用。我们还定义了一个名为 layouts/main 的布局文件，在这个文件中定义了页面的基本结构和布局，子模板通过继承这个布局文件来获取相同的页面布局。
<!-- 布局文件 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${pageTitle}">Default Page Title</title>
<link rel="stylesheet" th:href="@{/css/main.css}"/>
<script th:src="@{/js/main.js}"></script>
</head>
<body>
<header th:replace="fragments/header"></header>
<nav th:replace="fragments/nav"></nav>
<div class="container" th:fragment="content">Content goes here.</div>
<footer th:replace="fragments/footer"></footer>
</body>
</html>
布局标题模式是 Thymeleaf 中使用广泛的模板继承机制。它可以让我们创建多个具有相同布局的子模板，并让这些子模板继承主模板的页面布局。在 Thymeleaf 中，我们可以通过 th:replace 属性来引用定义好的片段和布局。这样，我们就可以避免在子模板中重复定义相同的页面布局，从而让开发更加方便快捷。