Thymeleaf语法详解

纳西妲鸭

已于 2023-12-07 13:44:48 修改

阅读量525

点赞数 5

文章标签：服务器运维 ide

于 2023-12-07 11:57:53 首次发布

本文链接：https://blog.csdn.net/m0_71106830/article/details/134849791

版权

Thymeleaf 是一款流行的服务器端 Java 模板引擎，能够完美地集成到 Spring Framework 中，并且与 HTML、XML、JavaScript 等格式协同工作。通过 Thymeleaf 强大的模板功能和易于上手的语法，开发人员可以轻松实现动态内容的呈现和交互。本文将深入探讨 Thymeleaf 的常用语法，助你快速掌握这一工具的精髓。

在Java中使用

在后端Java代码中，通常使用Spring框架（例如Spring MVC）将数据传递给模板，然后由Thymeleaf模板引擎渲染并输出最终的HTML页面。

@Controller
public class MyController {

    @GetMapping("/home")
    public String home(Model model) {
        model.addAttribute("pageTitle", "首页");
        model.addAttribute("loggedIn", true);
        model.addAttribute("username", "Alice");
        return "home"; // 返回模板名称
    }
}

在这个示例中，home方法将数据传递给了模板，并返回了模板文件的名称。Spring框架将会自动查找名为 home.html的模板文件，并使用Thymeleaf进行渲染。

1. 变量表达式

Thymeleaf 的变量表达式功能包括文本替换和 HTML 替换两种用法，下面分别进行详细介绍：

1.1 文本替换

文本替换是指直接将变量的值替换到 HTML 标签的文本内容中。在 Thymeleaf 中，可以使用 th:text 属性来实现文本替换。

<p th:text="${user.name}">Default Text</p>

在这个例子中，${user.name} 的值会替换 <p> 标签中的文本内容，如果user.name存在，则其值会显示在页面上；如果不存在，则显示默认文本"Default Text"。

1.2 HTML 替换

HTML 替换是指将变量的值作为 HTML 内容插入到 HTML 标签中。在 Thymeleaf 中，可以使用 th:utext 属性来实现 HTML 替换。

<div th:utext="${user.description}">Default HTML</div>

在这个例子中，${user.description} 的值会被作为 HTML 内容插入到 <div> 标签中，不会被转义处理。这意味着，如果${user.description}的值包含 HTML 标签，它们会被正确地解析并显示在页面上。

当谈到Thymeleaf的变量表达式功能时，还有一些重要的用法需要提及，包括逻辑判断、属性替换等等。下面将详细介绍这些额外的功能：

1.3 逻辑判断

在Thymeleaf中，可以使用th:if和th:unless来进行逻辑判断，根据条件决定是否显示特定的内容。

<div th:if="${user.isAdmin}">
    <p>Welcome, admin user!</p>
</div>
<div th:unless="${user.isEmployee}">
    <p>You are not an employee.</p>
</div>

1.4 属性替换

除了替换标签内的文本和HTML内容，Thymeleaf还允许替换标签的属性值，例如href、src等。

<a th:href="@{'/user/' + ${user.id}}">User Profile</a>
<img th:src="@{${user.avatarUrl}}" alt="User Avatar"/>

在上述例子中，使用了th:href来替换超链接的地址，以及th:src来替换图片标签的src属性。

1.5 集合遍历

Thymeleaf还支持对集合进行遍历，通过th:each来迭代集合元素，并引用每个元素的属性或者值。

<ul>
    <li th:each="item : ${user.orders}" th:text="${item.orderNumber}">Order #1</li>
</ul>

在这个示例中，Thymeleaf会遍历user.orders集合，并将每个订单号作为列表项插入到<ul>标签中。

当谈及Thymeleaf的变量表达式功能时，还包括了运算、选择以及内置对象等功能。下面将进一步介绍这些额外的功能：

1.6运算

Thymeleaf允许在变量表达式中进行一些基本的数学运算，如加法、减法、乘法、除法等。

<p th:text="${user.age + 5}">35</p>
<p th:text="${user.salary * 1.1}">10% Increase</p>

在这个示例中，可以看到+和*符号用于对user.age和user.salary进行数学运算，结果将替换到<p>标签中的文本内容。

1.7 内置对象

Thymeleaf也提供了一些内置对象，比如#dates和#calendars等，用于处理日期和日历相关的操作。

<p th:text="${#dates.format(user.birthdate, 'dd/MM/yyyy')}">01/01/2000</p>

在上述示例中，#dates对象被用来格式化user.birthdate，并将格式化后的日期作为文本输出。

1.8字符串操作

Thymeleaf还支持一些字符串操作，比如大小写转换、字符串连接等。

<p th:text="${#strings.toUpperCase(user.name)}">JOHN DOE</p>
<p th:text="${#strings.length(user.email)}">example@example.com</p>

在这个例子中，#strings对象被用来将user.name转换为大写字母，并输出其长度。

2. 模板片段

模板片段是一种在网页开发中用于实现模块化和重用的技术。在Web开发中，经常会遇到一些在多个页面中重复使用的HTML片段，例如页眉、页脚、导航栏等，模板片段的作用就是将这些重复的部分抽取出来，以便在多个页面中进行复用。下面是详细说明：

模板片段的创建

模板片段通常表示为一个独立的HTML文件，其中包含了特定的标记或内容，代表着某个可重用的模块。

例如，一个名为header.html的模板片段可能如下所示：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>网站标题</title>
    <!-- 其他头部元素 -->
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a th:href="@{/home}">首页</a></li>
                <li><a th:href="@{/about}">关于我们</a></li>
                <!-- 其他导航链接 -->
            </ul>
        </nav>
    </header>
</body>
</html>

在页面中引入模板片段

在需要使用模板片段的页面中，可以使用Thymeleaf提供的th:insert、th:replace、th:include等属性来引入模板片段。

插入（插入而不替换当前元素）：

<div th:insert="fragments/header :: #header"></div>

替换（替换当前元素）：

<div th:replace="fragments/header :: #header"></div>

包含（直接嵌入内容）：

<div th:include="fragments/header"></div>

在上述示例中，fragments/header代表了模板片段的位置，::后面则可以添加CSS选择器以指定要引入的具体部分，#header代表这里引入的是ID为header的部分。

如果模板片段的形式如下（用的是th:fragment=“header”）：
在这里插入图片描述
则在引用时这么写

<div th:replace="fragments/header :: #header"></div>

4.链接表达式

通过@{...}语法，可以方便地引用外部链接。
Thymeleaf 的链接表达式功能包括URL 变量、URL 参数和上下文相对路径等，下面进行详细介绍：

4.1URL 变量

在 Thymeleaf 中，可以使用${...}语法将变量嵌入到链接的URL中。

<a th:href="@{'/user/details/' + ${userId}}">User Details</a>

${userId} 是一个变量，在构建链接 URL 时会被替换为具体的值，这样便可以动态地构建链接。

4.2URL 参数

Thymeleaf 允许在链接 URL 中添加参数，通过param语法。

<a th:href="@{/search/results(category=${selectedCategory}, keyword=${searchKeyword})}">Search</a>

在这个例子中，category=${selectedCategory}和keyword=${searchKeyword}表示链接会被添加类似?category=xxx&keyword=yyy的查询参数部分。

4.3上下文相对路径

当构建链接时，有时需要引用项目内的相对路径，Thymeleaf 提供了便捷的方式来引用相对路径。

<img th:src="@{/img/logo.png}" alt="Logo"/>

在这个例子中，@{/img/logo.png}表示引用项目内的相对路径，Thymeleaf 会根据当前上下文自动处理路径，以正确引用静态资源。

4.4外部链接

Thymeleaf 也支持直接引用外部链接。

<a th:href="@{https://www.example.com}">External Link</a>

4.5引入链接

<script th:src="@{/webjars/layer/src/layer.js}"></script>
<link rel="stylesheet" href="assets/css/demo.css" th:href="@{/assets/css/demo.css}">

5消息表达式

在Thymeleaf中，消息表达式用于从消息资源文件中检索本地化文本消息。通过消息表达式，可以轻松地向用户呈现多语言消息，并且不需要在HTML代码中硬编码这些消息。下面是关于Thymeleaf消息表达式的详细说明：

5.1消息表达式的格式

消息表达式的一般格式为#{...}，后面跟着消息键，如{#messages.welcome}。

5.2从消息资源文件中检索消息

假设有一个名为messages.properties的消息资源文件，其中包含了本地化文本消息的键值对，如下所示：

messages.welcome=Welcome to our website!
messages.thankyou=Thank you for visiting.

在Thymeleaf模板中，可以通过以下方式使用消息表达式：

<p th:text="#{messages.welcome}">Welcome message will be displayed here</p>

在这个例子中，#{messages.welcome}将从消息资源文件中检索messages.welcome对应的消息，然后将其作为<p>标签的文本内容进行显示。

5.3消息参数化

消息表达式还支持使用参数化消息，在消息资源文件中的消息文本中可以包含占位符，然后在Thymeleaf模板中传递参数来替换这些占位符。

消息资源文件中的定义：

messages.welcomeWithName=Welcome, {0}!

Thymeleaf模板中的使用：

<p th:text="#{messages.welcomeWithName(userId)}">Welcome message with user's name</p>

在这个例子中，userId变量被传递给消息表达式，用来替换消息中的{0}占位符。

通过消息表达式，Thymeleaf提供了国际化和本地化文本消息的支持，使得页面的多语言展示变得简单而高效。

纳西妲鸭

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf语法详解

Thymeleaf 是一款流行的服务器端 Java 模板引擎，能够完美地集成到 Spring Framework 中，并且与 HTML、XML、JavaScript 等格式协同工作。通过 Thymeleaf 强大的模板功能和易于上手的语法，开发人员可以轻松实现动态内容的呈现和交互。本文将深入探讨 Thymeleaf 的常用语法，助你快速掌握这一工具的精髓。
复制链接

扫一扫