Thymeleaf 模版引擎语法浅记-工具盒子

本文最后更新于 2024-07-03，文章内容可能已经过时。

1、前言 {#1-前言}

最近想学习一下 halo 主题开发，也为了修改一些现有主题供自己使用（由于大多数主题都是用了 thymeleaf 语法）所以浅浅的学习并记录一下常用语法，方便回头查看。

Thymeleaf 作为一种模板引擎，它拥有自己的语法规则。主要由如下两类：

标准表达式语法
th 开头的相关属性

2、标准表达式语法 {#2-标准表达式语法}

2.1 变量表达式 {#2-1-变量表达式}

获取对象的属性和方法，和 js 的模版语法无异，语法如下:

# obj 为一个java对象，attribute为其中的一个属性，想要获取该属性则使用下面的语法
${obj.attribute}

使用内置的对象和一些方法

#ctx ：上下文对象； #vars ：上下文变量； #locale：上下文的语言环境； #request：HttpServletRequest 对象（仅在 Web 应用中可用）； #response：HttpServletResponse 对象（仅在 Web 应用中可用）； #session：HttpSession 对象（仅在 Web 应用中可用）； #servletContext：ServletContext 对象（仅在 Web 应用中可用）。

 ${#session.getAttribute('map')}${session.map}

使用一些内置的工具类

strings：字符串工具对象，常用方法有：equals、equalsIgnoreCase、length、trim、toUpperCase、toLowerCase、indexOf、substring、replace、startsWith、endsWith，contains 和 containsIgnoreCase 等； numbers：数字工具对象，常用的方法有：formatDecimal 等； bools：布尔工具对象，常用的方法有：isTrue 和 isFalse 等； arrays：数组工具对象，常用的方法有：toArray、length、isEmpty、contains 和 containsAll 等； lists/sets：List/Set 集合工具对象，常用的方法有：toList、size、isEmpty、contains、containsAll 和 sort 等； maps：Map 集合工具对象，常用的方法有：size、isEmpty、containsKey 和 containsValue 等； dates：日期工具对象，常用的方法有：format、year、month、hour 和 createNow 等。

例如，对一段字符串去除空格：

${#strings.trim(str)}

2.2、选择变量表达式 {#2-2-选择变量表达式}

使用场景：

选择变量表达式与变量表达式功能基本一致，只是在变量表达式的基础上增加了与 th:object 的配合使用。当使用 th:object 存储一个对象后，我们可以在其后代中使用选择变量表达式（*{...}）获取该对象中的属性，其中，"*"即代表该对象。

<div th:object="${session.user}" >    <p th:text="*{fisrtName}">firstname</p></div>

2.3、 a 标签表达式 {#2-3--a-标签表达式}

不管是静态资源的引用，还是 form 表单的请求，凡是链接都可以用链接表达式（@{...}）。

链接表达式的形式结构如下：

无参请求：@{/xxx}
有参请求：@{/xxx(k1=v1,k2=v2)}

例如使用链接表达式引入 css 样式表，代码如下。

<link href="asserts/css/signin.css" th:href="@{/assets/css/signin.css}" rel="stylesheet">

2.4、国际化表达式 {#2-4--国际化表达式}

消息表达式一般用于国际化的场景。结构如下。

th:text="#{msg}"

2.5、片段引用表达式 {#2-5-片段引用表达式}

片段引用表达式用于在模板页面中引用其他的模板片段，该表达式支持以下 2 中语法结构：

推荐：~{templatename::fragmentname}
支持：~{templatename::#id}

以上语法结构说明如下：

templatename：模版名，Thymeleaf 会根据模版名解析完整路径：/resources/templates/templatename.html，要注意文件的路径。
fragmentname：片段名，Thymeleaf 通过 th:fragment 声明定义代码块，即：th:fragment="fragmentname"
id：HTML 的 id 选择器，使用时要在前面加上 # 号，不支持 class 选择器。

3、th 开头的一些常用属性 {#3-th-开头的一些常用属性}

th:text 文本替换，转义特殊字符

<p th:text="hello world" >hello</p>

th:utext 文本替换，不转义特殊字符

div th:utext="'<h1>hello！</h1>'" >欢迎你</div>

th:object 在父标签选择对象，子标签使用 *{...} 选择表达式选取值。没有选择对象，那子标签使用选择表达式和 ${...} 变量表达式是一样的效果。同时即使选择了对象，子标签仍然可以使用变量表达式。

<div th:object="${session.user}" >    <p th:text="*{fisrtName}">firstname</p></div>

th:id 替换 HTML 的 id 属性

<input  id="html-id"  th:id="thymeleaf-id"  />

th:value 替换表单元素的 value 属性

<input th:value = "${user.name}" />

th:onclick 点击事件

<td th:onclick = "'getInfo()'"></td>

th:with 局部变量赋值运算

<div th:with="isEvens = ${prodStat.count}%2 == 0"  th:text="${isEvens}"></div>

th:style 设置样式

<div th:style="'color:#F00; font-weight:bold'">hello world</div>

th:each 遍历数据，支持 Iterable、Map、List、数组等。

<table>  
   <tr th:each="m:${session.map}">  
       <td th:text="${m.getKey()}"></td>  
       <td th:text="${m.getValue()}"></td>  
   </tr>
</table>

th:if 根据条件判断是否需要展示此标签

<a th:if ="${userId == collect.userId}">

th:unless 和 th:if 判断相反，满足条件时不显示

<div th:unless="${m.getKey()=='name'}" ></div>

th:switch 与 Java 的 switch case语句类似，通常与 th:case 配合使用，根据不同的条件展示不同的内容

<div th:switch="${name}">  
   <span th:case="a">casea</span>  
   <span th:case="b">caseb</span>
</div>

th:fragment 模板布局，类似 JSP 的 tag，用来定义一段被引用或包含的模板片段

<div th:insert="commons/bar::footer"></div>

th:insert 布局标签；将使用 th:fragment 属性指定的模板片段（包含标签）插入到当前标签中。

<div th:insert="commons/bar::footer"></div>

th:replace 布局标签；使用 th:fragment 属性指定的模板片段（包含标签）替换当前整个标签。

<div th:replace="commons/bar::footer"></div>

th:selected select 选择框选中

<select>  
    <option>---</option>  
    <option th:selected="${name=='a'}">a</option>  
    <option th:selected="${name=='b'}">b</option>
</select>

th:src 替换 HTML 中的 src 属性

<img  th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" />

th:inline 内联属性；该属性有 text、none、javascript 三种取值，在标签中使用时，js 代码中可以获取到后台传递页面的对象。

<script type="text/javascript" th:inline="javascript">  
    var name = /*[[${name}]]*/ 'halo';  
    alert(name)
</script>

th:action 替换表单提交地址

<form th:action="@{/user/login}" th:method="post"></form>

4、使用 Thymeleaf 抽取公共页面 {#4-使用-Thymeleaf-抽取公共页面}

简单来说，就是增加代码的可复用性，比如 web 应用的 header、footer是公用的，需要被抽离出来！

Thymeleaf 作为一种优雅且高度可维护的模板引擎，同样支持公共页面的抽取和引用。我们可以将公共页面片段抽取出来，存放到一个独立的页面中，并使用 Thymeleaf 提供的 th:fragment 属性为这些抽取出来的公共页面片段命名。

示例：

比如有一个 public.html 的公共模版，对其命名为 fragment-name

<div th:fragment="fragment-name" id="fragment-id">  
    <span>公共页面片段</span>
</div>

现在将 public.html 文件中的片段引入其他页面，可使用如下语法：

<!--th:insert 片段名引入-->
<div th:insert="public::fragment-name"></div>
<!--th:insert id 选择器引入-->
<div th:insert="public::#fragment-id"></div>
&lt;!--th:replace 片段名引入--&gt;
&lt;div th:replace="public::fragment-name"&gt;&lt;/div&gt;
&lt;!--th:replace id 选择器引入--&gt;
&lt;div th:replace="public::#fragment-id"&gt;&lt;/div&gt;
&lt;!--th:include 片段名引入--&gt; &lt;div th:include=&quot;public::fragment-name&quot;&gt;&lt;/div&gt; &lt;!--th:include id 选择器引入--&gt; &lt;div th:include=&quot;public::#fragment-id&quot;&gt;&lt;/div&gt;

以上代码使用了 th:insert 、th:replace、th:iclude 引入了模版片段，三者有如下的不同之处：

th:insert：将代码块片段整个插入到使用了 th:insert 属性的 HTML 标签中；
th:replace：将代码块片段整个替换使用了 th:replace 属性的 HTML 标签中；
th:include：将代码块片段包含的内容插入到使用了 th:include 属性的 HTML 标签中

而使用上 3 个属性引入页面片段，都可以通过以下 2 种方式实现。

~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}：模板名::片段名

通常情况下，~{} 可以省略，其行内写法为 [[~{...}]] 或 [(~{...})]，其中 [[~{...}]] 会转义特殊字符，[(~{...})] 则不会转义特殊字符。

5、传递参数 {#5-传递参数}

Thymeleaf 在抽取和引入公共页面片段时，还可以进行参数传递。

引用公共页面片段时，我们可以通过以下 2 种方式，将参数传入到被引用的页面片段中：

模板名::选择器名或片段名(参数1=参数值1,参数2=参数值2)
模板名::选择器名或片段名(参数值1,参数值2)

注意点⚠️

若传入参数较少时，一般采用第二种方式，直接将参数值传入页面片段中；若参数较多时，建议使用第一种方式，明确指定参数名和参数值，。

示例：

在片段中传入参数：

<!--th:insert 片段名引入-->
<div th:insert="public::fragment-name(var1='insert-name',var2='insert-name2')"></div>
<!--th:insert id 选择器引入-->
<div th:insert="public::#fragment-id(var1='insert-id',var2='insert-id2')">
</div>
&lt;!--th:replace 片段名引入--&gt;
&lt;div th:replace="public::fragment-name(var1='replace-name',var2='replace-name2')"&gt;&lt;/div&gt;
&lt;!--th:replace id 选择器引入--&gt;
&lt;div th:replace="commons::#fragment-id(var1='replace-id',var2='replace-id2')"&gt;&lt;/div&gt;
&lt;!--th:include 片段名引入--&gt; &lt;div th:include=&quot;public::fragment-name(var1='include-name',var2='include-name2')&quot;&gt;&lt;/div&gt; &lt;!--th:include id 选择器引入--&gt; &lt;div th:include=&quot;commons::#fragment-id(var1='include-id',var2='include-id2')&quot;&gt;&lt;/div&gt;

在片段中使用参数：

<!--使用 var1 和 var2 声明传入的参数，并在该片段中直接使用这些参数 -->
<div th:fragment="fragment-name(var1,var2)" id="fragment-id">
    <p th:text="'参数1:'+${var1} + '-------------------参数2:' + ${var2}">...</p>
</div>

暂时先记录到这儿，在使用过程中慢慢记录一些特殊语法和踩坑记录吧！