如果你的spring boot应用继承spring-boot-starter-parent, 那么只需要添加spring-boot-starter-thymeleaf这个starter依赖,即可使用thymeleaf模板引擎.
从spring-boot-dependencies中的dependencyManagement中可以看到:spring-boot-starter-thymeleaf,默认使用Thymeleaf 2.1.5版本
盗图
总所周知,2.x版本有许多坑,与HTML5有很多冲突,迁移到3.x版本势在必行 如果要改为Thymeleaf 3,只需要重写thymeleaf.versionproperties和添加thymeleaf-layout-dialect 2.x依赖,
<properties>
<thymeleaf.version>3.0.3.RELEASE</thymeleaf.version>
</properties>
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.1.2</version>
</dependency>
或者都改properties
<properties>
<thymeleaf.version>3.0.3.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.1.2</thymeleaf-layout-dialect.version>
</properties>
布局方言的1.x和2.x之间的最大变化是2.x是重写布局方言以支持Thymeleaf3. Thymeleaf3大大向后兼容于Thymeleaf2,因此布局方言已经消失摆脱了向后兼容的方式。
虽然布局方言是依据装饰器模式来进行装饰,但是在整个1.x版本中,它错误地将布局/父模板认做为装饰器,而根据设计模式,扩展(在这种情况下为内容模板)是装饰器.
此更改只是布局的重命名:layout:decorator/data-layout-decorator到layout:decorate/data-layout-decorate,所以指定的模板是正在被装饰的模板,而不是装饰器.
上述的结果是,标题模式处理器中的特殊标记也被错误地命名,因此已经引入了新的标记来解决这个问题。
Thymeleaf 3不推荐使用th:include / data-th-include
处理器,并引入th:insert / data-th-insert
处理器作为替代。
因为布局方言在Thymeleaf之后对其模板包含处理器的命名进行了图案化,所以它做了相同的处理
弃用的布局:include / data-layout-include
和引入布局:insert / data-layout-insert
<br>
是错误的
属性必须有值,<span v-cloak/>
是不被允许的
不是所有的人都会完全的遵守XML规范,Thymeleaf2中要解决这个问题,可以将spring.thymeleaf.mode这个属性改为LEGACYHTML5,然后添加nekoHTML这个库。如果使用直接Thymeleaf3,就不会存在这个问题,因为Thymeleaf3使用新的解析引擎。<p>This product is called [[${product.name}]] and it's great!</p>
Thymeleaf2.1中则需要使用内联标签th:inline
<p th:inline="text">
This product is called [[${product.name}]] and it's great!
</p>
上面的代码中也可以使用[(${product.name)]来代替,[[...]]和[(...)]区别在于[(...)]中的文本不会被Escape,就相当于th:text和th:utext的区别
<head th:fragment="common_header(title,links)">
<title th:utext="${title}">The awesome application</title>
<!-- Common styles and scripts -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
<!--/* Per-page placeholder for additional links */-->
<th:block th:replace="${links} ?: ~{}" />
</head>
在我们页面中使用这个模板
<head th:replace="base :: common_header(~{::title},~{::link})">
<title>Awesome - Main</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
结果会输出:
<head>
<title>Awesome - Main</title>
<!-- Common styles and scripts -->
<link rel="stylesheet" type="text/css" media="all" href="/awe/css/awesomeapp.css">
<link rel="shortcut icon" href="/awe/images/favicon.ico">
<script type="text/javascript" src="/awe/sh/scripts/codebase.js"></script>
<link rel="stylesheet" href="/awe/css/bootstrap.min.css">
<link rel="stylesheet" href="/awe/themes/smoothness/jquery-ui.css">
</head>
这个特性解决了通用的header和footer的问题,详细说明参考:https://github.com/thymeleaf/thymeleaf/issues/451
定义一个完全的html模版home.html
<!DOCTYPE html>
<html>
<body>
<table id="usersTable">
<tr>
<td class="username">Jeremy Grapefruit</td>
<td class="usertype">Normal User</td>
</tr>
<tr>
<td class="username">Alice Watermelon</td>
<td class="usertype">Administrator</td>
</tr>
</table>
</body>
</html>
然后只需要定义一个home.th.xml
<?xml version="1.0"?>
<thlogic>
<attr sel="#usersTable" th:remove="all-but-first">
<attr sel="/tr[0]" th:each="user : ${users}">
<attr sel="td.username" th:text="${user.name}" />
<attr sel="td.usertype" th:text="#{|user.type.${user.type}|}" />
</attr>
</attr>
</thlogic>