【亲测免费】 Thymeleaf布局方言（Thymeleaf Layout Dialect）教程

2026-01-17 09:38:47作者：范垣楠Rhoda

1. 项目介绍

Thymeleaf Layout Dialect 是一个用于Thymeleaf框架的扩展，它增加了模板装饰的能力，可以自动处理HTML模板的部分以及通过开发者自定义的扩展点来实现显式装饰。此方言让开发者能够构建可复用的布局和模板，从而提高代码重用率。其主要功能包括：

自动头部（）装饰
模板扩展点
片段插入、替换及碎片操作

2. 项目快速启动

要将Thymeleaf Layout Dialect添加到你的Thymeleaf项目中，首先确保你已经在项目中集成了Thymeleaf。然后，添加以下依赖（以Maven为例）：

<dependencies>
    ...
    <dependency>
        <groupId>nz.net.ultraq.thymeleaf</groupId>
        <artifactId>thymeleaf-layout-dialect</artifactId>
        <version>最新版本号</version> <!-- 替换为你需要的版本 -->
    </dependency>
    ...
</dependencies>

接下来，在Thymeleaf配置类中启用方言：

@Configuration
public class ThymeleafConfig {

    @Bean
    public org.thymeleaf.spring5.SpringTemplateEngine templateEngine() {
        org.thymeleaf.spring5.SpringTemplateEngine engine = new org.thymeleaf.spring5.SpringTemplateEngine();
        engine.setDialect(new LayoutDialect());
        // 其他配置...
        return engine;
    }
}

现在，你可以开始使用Thymeleaf Layout Dialect提供的特性了。

3. 应用案例和最佳实践

布局装饰

<!-- 内容页面 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <title th:inline="text">[[${pageTitle}]]</title>
    <script src="content-script.js"></script>
</head>
<body>
<section layout:fragment="content">
    <p>这是内容页面的一个段落</p>
</section>
</body>
</html>

<!-- 布局文件 -->
<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <script src="common-script.js"></script>
</head>
<body>
<header>
    <h1>我的网站</h1>
</header>
<div layout:replace="fragments/content :: content">Page Content</div>
<footer layout:replace="fragments/footer :: footer">Footer</footer>
</body>
</html>

在上面的例子中，内容页面继承了布局文件，实现了头部的统一管理和内容区域的定制替换。

页面片段插入与替换

<!-- 包含页面 -->
<div th:insert="fragments/common::header"></div>
<div th:insert="fragments/messages :: alerts"></div>

<!-- 被包含的片段 -->
<div th:fragment="header">
    <nav>
        <!-- 导航条内容 -->
    </nav>
</div>

<div th:fragment="alerts">
    <div th:each="alert : ${alerts}" class="alert alert-${alert.type}">
        <!-- 报警内容 -->
    </div>
</div>

这段代码展示了如何在不同页面之间共享通用组件，如导航条和警告消息。

4. 典型生态项目

Thymeleaf Layout Dialect通常被用于Spring MVC中的模板布局，尤其是在大型Web应用程序中，以保持视图的一致性和结构化。结合Thymeleaf的其他方言和库，例如Spring Security Dialect，可以构建出强大的模板系统。

Spring Boot：许多基于Spring Boot的应用利用Thymeleaf作为其前端模板引擎，而Thymeleaf Layout Dialect则进一步增强了布局能力。
Spring Security：Spring Security提供了安全相关的方言，与Layout Dialect结合使用，可以在权限控制的基础上进行定制化的页面布局。

想了解更多详细信息，可以参考项目官网上的文档。

thymeleaf-layout-dialect

A dialect for Thymeleaf that lets you build layouts and reusable templates in order to improve code reuse

项目地址：https://gitcode.com/gh_mirrors/th/thymeleaf-layout-dialect

登录后查看全文