Thymeleaf的使用

基本模板

设置标签文本值

1
<p th:text="${type}">1</p>

map.addAttribute("type","xxx");后,模板引擎会把上面的代码变成

1
<p>xxx</p>

这个功能可以替代el表达式中在标签文本中的值。

设置标签属性值

1
<input type="text" name="ttype"  th:attr="value=${type}"/>

map.addAttribute("type","xxx");后,模板引擎会把上面的代码变成

1
<input type="text" name="ttype"  value="xxx"/>

这个功能可以替代el表达式在标签中的属性

th:text=”#{home.welcome}

模板嵌套

常规方式

新建模板footer.html,使用th:fragment来标记要嵌套的语句

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copyright">
© 2017 xxx
</div>
</body>
</html>

上面定义了一个叫做copyright的片段,接着我们可以使用th:include或者th:replace属性来使用它:

1
2
3
4
<body>
...
<div th:include="footer::copyright"></div>
</body>

文件名::片段名的方式

dom选择器方式

通过强大的dom选择器,我们可以在不添加任何Thymeleaf属性的情况下定义模板:

1
2
3
<div id="copy-section">
&copy; xxxxxx
</div>

通过dom选择器来加载模板,如id为copy-section

1
2
3
4
5
<body>
...
<div th:include="footer::#copy-section">
</div>
</body>

th:include 和 th:replace区别

th:include 是加载模板的内容,而th:replace则会替换当前标签为模板中的标签

模板参数配置

eclipse插件

thymeleaf时,遇到html中输入th:自动提示
插件地址为: http://www.thymeleaf.org/eclipse-plugin-update-site/

参考


Thymeleaf的使用
https://blog.fengcl.com/2017/11/28/thymeleaf-use/
作者
frank
发布于
2017年11月28日
许可协议