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 #模板
Thymeleaf的使用
https://blog.fengcl.com/2017/11/28/thymeleaf-use/
作者
frank
发布于
2017年11月28日
许可协议