Thymeleaf 常见使用

1.1 官网地址

• 网站：

https://www.thymeleaf.org/

• 文档地址:

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 

1.2 遍历

<div class="media" th:each="question:${questions}"><div class="media-left media-middle"><a href="#"><img class="media-object img-circle" th:src="@{/images/c6.png}" alt="头像"></a></div><div class="media-body media-middle"><h4 class="media-heading"><a th:href="@{'/question/'+ ${question.id}}" th:text="${question.title}"></a></h4><p class="text-desc"><span th:text="${question.commentCount}"></span> 个回复 ? &nbsp;<span th:text="${question.viewCount}"></span> 次浏览 ? &nbsp;<span th:text="${question.createTime}"></span></p></div>
</div>

1.3 a 标签 href 地址

<h4 class="media-heading"><a th:href="@{'/question/'+ ${question.id}}" th:text="${question.title}"></a>
</h4>

1.4 thymeleaf js 获取页面上的值

<script data-th-inline="javascript">let questionId = [[${question.id}]];
</script>

1.5 onclick 向js传值

<button type="button" class="btn btn-success pull-right mt-10"th:onclick="addSubComment([[${comment.id}]])">评论
</button>

1.6 判断加样式

<a href="/profile/question" class="list-group-item" th:classappend="${section ==  'question'} ? 'active':''"><i class="fa fa-question-circle" aria-hidden="true"></i>&nbsp;我的问题
</a>

1.7 thymeleaf 格式化时间

<span th:text="${#dates.format(article.date, 'yyyy-MM-dd HH:mm:ss')}"></span>

1.8 thymeleaf 格式化jdk8 LocalDateTime 时间

• 引入pom.xml

<dependency><groupId>org.thymeleaf.extras</groupId><artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>

• 增加配置

package com.example.demo.config.web;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.thymeleaf.extras.java8time.dialect.Java8TimeDialect;@Configuration
public class TemplateConfiguration {@Beanpublic Java8TimeDialect java8TimeDialect() {return new Java8TimeDialect();}
}

• 文档地址:

         https://github.com/thymeleaf/thymeleaf-extras-java8time

• 使用

<span th:text=" ${#temporals.format(article.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>

1.10 thymeleaf 的 a标签如何携带多个参数

<a th:href="@{/search(page=1, title=${title})}" aria-label="Previous" class="page-item"><span aria-hidden="true">首页</span>
</a>

1.11 thymeleaf 如何不转义直接输出

<a th:href="@{'/article/'+ ${article.id}}" th:utext="${article.title}"></a>

1.12 thymeleaf 如何向th:fragment 传值

<!-- 标签页 -->
<div class="container" th:fragment="base-head(name)"><div class="panel"><div class="panel-body"><ul class="nav nav-pills"><li th:classappend="${name == 'index'} ? 'active': ''"><a href="/index"><i class="fa fa-file-text-o" aria-hidden="true"></i><span>文章</span></a></li><li th:classappend="${name == 'category'} ? 'active': ''"><a href="/header/category"><i class="fa fa-paper-plane-o" aria-hidden="true"></i><span>分类</span></a></li><li th:classappend="${name == 'tag'} ? 'active': ''"><a href="/header/tag"><i class="fa fa-tags" aria-hidden="true"></i><span>标签</span></a></li><li th:classappend="${name == 'link'} ? 'active': ''"><a href="/header/help"><i class="fa fa-link" aria-hidden="true"></i><span>编程网址</span></a></li></ul></div></div>
</div>

• 引用并传递值

<div th:replace="~{navigation :: base-head('notice')}"></div>

1.13 th:if 使用

<span class="label label-success" th:if="${article.status} == 1">草稿</span>
<span class="label label-danger" th:if="${article.status} == 2">已发布</span>