环境:
springboot1.5.4
win10
intellij IDEA2017.1
迁移到Thymeleaf3
如果你的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,所以指定的模板是正在被装饰的模板，而不是装饰器.
$DECORATOR_TITLE 改名为 $LAYOUT_TITLE
上述的结果是，标题模式处理器中的特殊标记也被错误地命名，因此已经引入了新的标记来解决这个问题。
不推荐使用 include, introduced insert
Thymeleaf 3不推荐使用th：include / data-th-include处理器，并引入th：insert / data-th-insert处理器作为替代。
因为布局方言在Thymeleaf之后对其模板包含处理器的命名进行了图案化，所以它做了相同的处理
弃用的布局：include / data-layout-include和引入布局：insert / data-layout-insert
Full HTML5 markup support（完整的HTML5 标记支持）
Thymeleaf 2.1中，html代码必须严格遵守XML规范，必须是XML-well-formed HTML5 code，比如：
标签必须闭合，<br>是错误的
属性必须有值，<span v-cloak/>是不被允许的
不是所有的人都会完全的遵守XML规范，Thymeleaf2中要解决这个问题，可以将spring.thymeleaf.mode这个属性改为LEGACYHTML5，然后添加nekoHTML这个库。如果使用直接Thymeleaf3，就不会存在这个问题，因为Thymeleaf3使用新的解析引擎。Template modes（模板类型）
HTML、XML、TEXT、JAVASCRIPT、CSS、RAW
分为三类：标记型模板（HTML，XML）,文本型模板(TEXT, JAVASCRIPT和CSS)，无操作(no-op)模板 (RAW)。
Thymeleaf2.1中的HTML5, XHTML, VALIDXHTML和LEGACYHTML5相当于3.0中的 HTML
Thymeleaf2.1中的VALIDXML也就是3.0中的XML
所以在Thymeleaf3中使用HTML包括了HTML5，HTML4和XHTML在内的所有类型的HTML标记，此时，标记的作用范围按可能的最大化处理。
Improved inlining mechanism（增强的内联机制）
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的区别
Fragment Expressions（片段表达式）
Thymeleaf 3.0 引入了一个新的Fragment Expressions。像是这样：~{commons::footer}。例如，我们定义一个模版页面base.html
<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
Decoupled Template Logic（模板逻辑解耦）
定义一个完全的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>
作者：芥末无疆sss
链接：https://www.jianshu.com/p/4935233c3a4a
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
随时随地看视频
