thymeleaf方言
1、以th开头的方式，需要在html标签里引入thymeleaf的命名空间:<html xmlns:th="http://www.thymeleaf.org">
<span th:text="...">
2、以data作为前缀，是html5里标准的用于自定义属性的，不需要引入命名空间
<span data-th-text="...">
表达式
1、变量表达式：${...}
<span th:text="${data.name}">
2、消息表达式：#{...}
也称之为文本外部化、国际化或i18n，从国际化配置文件里去取key对应的值？不太懂
<table>
<th th:text="#{header.address.city}">...</th>
</table>
3、选择表达式：*{...}
经常与
th:object替换对象配合使用，th:object="${book}"首先获取到对象book，"*{}"对象里取属性。
等于变量表达式${book.title}，区别是${book}从整个上下文中取的，*{title}是从${book}中取的，执行效率更高。
<div th:object="${book}">
<span th:text="*{title}">...</span>
</div>
4、链接表达式：@{...}
绝对链接：<a th:href="@{http://www.baidu.com/main}">...</a>
协议相对链接：<a th:href="@{//static/html/initial}">...</a>
服务器相对链接：<a th:href="@{~/contents/main}">...</a>
目录相对链接：<a th:href="@{../docments/report}">...</a>
5、分段表达式：th:insert、th:replace、th:include(3.0以后不推荐)
被替换的内容：
<footer th:fragment="copy">
<a href="https://www.baidu.com">2019 蟹蟹<a/>
</footer>
执行替换的部分
<body>
<div th:insert="footer::copy"></div>
<div th:replace="footer::copy"></div>
<div th:include="footer::copy"></div>
</body>
替换效果：
<body>
// 1、insert
<div>
<footer th:fragment="copy">
<a href="https://www.baidu.com">2019 蟹蟹<a/>
</footer>
</div>
// 2、replace
<footer>
<a href="https://www.baidu.com">2019 蟹蟹<a/>
</footer>
// 3、include
<div>
<a href="https://www.baidu.com">2019 蟹蟹<a/>
</div>
</body>
文本替换
文本：' ' 单引号引起来表示是文本内容
数字：不需要单引号，也支持一些数学计算
<span th:text=" '这是要展示的文本' ">这里的部分会被替换掉</span>
<span th:text=" 1+1 ">这里的部分会被替换掉</span>
属性赋值
th:value
<input th:value = "${user.name}" />
迭代器：th:each
<li th:each="book:${books} th:text="${book.title}"><li>
状态变量：
index：迭代器索引从0开始
count：迭代器索引从1开始
size：迭代器大小
current：当前迭代器值
even/odd：当前索引是偶数/奇数
first/last：第一个/最后一个
内联表达式
[[...]] 和 [(...)] 分别对应于 th:text 和 th：utext，前者会对特殊字符进行转义，后者不会对特殊字符转义
激活内联使用th:inline 属性,它有四个模式：text、javascript、css 和 none。
1、文本内联：
<p th:text="${value}"></p> 等同于：<p th:inline="text">[[${value}]]</p>
2、JavaScript内联：
<javascript th:inline="javascript">
alert([[${value}]]);
</script>
3、CSS内联：
变量：
classname = 'main elems'
align = 'center
内联写法：
<style th:inline="css">
.[[${classname}]]{
text-align:[[${align}]];
}
</style>
转换成这样：
<style th:inline="css">
.main\ elems {
text-align: center;
}
</style>
5、禁用内联：th:inline=none
<p th:inline="none">A double array looks like this:[[1,2,3],[4,5]]!</p>
6、其它th:标签
th:value 属性赋值 <input th:value = "${user.name}" />
模板布局
一、编写base.html模板文件
1、更改html标签
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
2、定义被替换区域，容器标签里面添加：layout:fragment="content" 给容器命名为content
<div class="layui-elem-field" layout:fragment="content"> 被替换的区域 </div>
二、编写需要自定义内容的 页面
1、更改html标签,`layout:decorate="base"` 指定模板文件名
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="base">
2、替换父模板的容器
<div class="layui-elem-field" layout:fragment="content"> 新的内容 </div>
另一种布局方式(没测试)
1、在template文件夹新建fragments模板存放文件夹，在里面新建header.html和footer.html两个模板文件
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="header">
<h1>Thymeleaf in action</h1>
<a href="/users">首页</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="footer">
<a href="https://www.baidu.com">百度地址连接</a>
</div>
</body>
</html>
2、新建首页list.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dvi th:replace="~{fragments/header::header}"></dvi>
<dvi th:replace="~{fragments/footer::footer}"></dvi>
</body>
</html>
网友评论