目录
Thymeleaf简介
Thymeleaf是一个java的模板引擎，能够处理Html、Xml、Javascript、Css甚至纯文本，类似于Jsp和Freemarker
- 自然模板，原型即页面
- 语法优雅简单，OGNL、SpringEL
- 遵从web标准，支持Html5
Thymeleaf的语法规则甚多，不一一记录，在使用过程再做说明
较好文章示例：https://www.cnblogs.com/itdragon/archive/2018/04/13/8724291.html
https://www.cnblogs.com/tuanz/p/8709709.html
模板布局
通常网站中会有公用部分，比如头部、尾部和菜单等，可以提取出来作为模板片段供其他页面进行引用
定义和引用片段
定义-->th:fragment="copy"定义一个copy的片段的版权信息
<!DOCTYPE html> <!--解决th报错 --> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>thymeleaf</title> </head> <body> <div th:fragment="copy"> © 2019<a href="www.baidu.com">百度</a> </div> </body> </html>
引用-->th：insert="~{footer :: copy},指在footer处引入copy片段
<body> ... <div th：insert="~{footer :: copy}"></div> </body>
也可以不使用th:fragment，也可以引入片段，使用id
<body> ... <div id="copy-section"> © 2019<a href="https://www.baidu.com">百度</a> </div> </body>
引用-->th:insert="~{footer::#copy-section}"
th:insert、th:replace、th:include三者区别
- th:insert 将简单地插入指定的片段作为正文的主标签
- th:replace用指定的实际片段来替换其主标签
- th:include类似于th:insert，但不是插入片段，它只插入此片段的内容（3.x版本后，不再推荐使用）
<footer th:fragment="copy"> © 2019<a href="www.baidu.com">百度</a> </footer>
对上述同一片段进行引用，观察三者的区别
<body> ... <div th:insert="footer::copy"></div> <div th:replace="footer::copy"></div> <div th:inlcude="footer::copy"></div> </body>
最终效果：
<body> ... //将整个片段插入到div中 <div> ... <footer> ©2019<a href="www.baidu.com">百度</a> </footer> </div> //将片段直接整体替换 <footer> ©2019<a href="www.baidu.com">百度</a> </footer> //只引用片段的内容 <div> ©2019<a href="www.baidu.com">百度</a> </div> </body>
属性优先级
当在同一个标签中写入多个th：*属性时，会发生什么？
<ul> <li th:each="item:${items}" th:text="${item.descriptiom}">Item</li> </ul>
后面的文本取值th:text依赖于th:each，理想预期前者应先于后者（由下图优先级表可看出th:each的优先级高于th:text）
属性优先级顺序表：
注释
除了<!-- -->注释，thymeleaf还有：
- 解析器级注释块：删除<！--/* 和*/-->之间的所有内容
单行：<！--/* ... */-->
多行：<！--/* --> ... ...<！-- */-->
- 原型注释块：当模板静态打开时（比如原型设计），原型注释块所注释的代码<!--/*/ 和 /*/-->将被注释，而在模板执行时，这些注释的代码，就能被显示出来（注释th:block比较有效）
<span>hello!</span> <!--/*/ <div th:text="${...}"> ... </div> /*/--> <span>goodbye!</span>
内联
内联表达式
- [[...]]或[(...)]分别对应于th:text和th:utext
[(...)]：不会对msg中的特殊字符进行转义
<p >The message is "[(${msg})]" </p> //执行效果 <p>The message is “This is <b>great</b>” </p>
[[...]]：对特殊字符进行转义
<p>The message is "[[${msg}]]" </p> //执行效果，不会对msg中的特殊字符进行转义 <p>The message is “This is <b> great </b>” </p>
禁用内联
- 有时候需要禁用这种机制，比如：输出[[...]]或[(...)]文本内容，使用th:inline="none"
<p th:inline="none">this is msg</p>
JavaScript内联
<script th:inline="javascript"> ... var username = /*[[${session.user.name}]]*/ 'echola'; ... </script>
在解释器解析代码时，会解析里面的[[${session.user.name}]]加载静态页时会解析后面的语句var name='echola'
注意:js内联代码需要加入/*<![CDATA[*/ ... /*]]>*/代码块，thymeleaf才能正确解析运算符和操作符号&、&&等
JS内联还有两个特性
- 附加代码：/*[+ ... +]*/
- 移除代码：/*[- */... /*-]*/