目 录CONTENT

文章目录

Thymeleaf th:include、th:replace使用

米尔嘉
2022-08-08 / 0 评论 / 2 点赞 / 372 阅读 / 971 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-07-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

首先在pom.xml引入thymeleaf的依赖

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

将每个页面的重复信息抽取出来存为pagination.html

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <body>
	<div class="panelBar" th:fragment="pagination">
           <!--以下为公共部分-->
           <div class="pages">
			<span>显示</span>
			<select class="combox" name="numPerPage" οnchange="navTabPageBreak({numPerPage:this.value})">
				<option value="1" th:selected="${pages.numPerPage}==1">1</option>
				<option value="3" th:selected="${pages.numPerPage}==3">3</option>
				<option value="5" th:selected="${pages.numPerPage}==5">5</option>
				<option value="10" th:selected="${pages.numPerPage}==10">10</option>
				<option value="100" th:selected="${pages.numPerPage}==100">100</option>
				<option value="150" th:selected="${pages.numPerPage}==150">150</option>
				<option value="200" th:selected="${pages.numPerPage}==200">200</option>
				<option value="250" th:selected="${pages.numPerPage}==250">250</option>
			</select>
			<span id="fleeceRecordCounts" th:text="'共有'+${pages.totalCount}+'条'"></span>
		</div>
		<div id="fleece_page" class="pagination"  th:attr="targetType=${pages.targetType},totalCount=${pages.totalCount},numPerPage=${pages.numPerPage},pageNumShown=${pages.pageNumShown},currentPage=${pages.currentPage}"></div>
	</div>
    </body>
</html>

在其他页面进行引用该公共模块时如下:

<div class="panelBar" th:replace="pagination::pagination"></div>

注意:第一个pagination为上述公共部分的文件名,第二个pagination为th:fragment的值。这样便可以解决公共部分代码的抽取。
fragment加载语法如下:

  • templatename::selector:”::”前面是模板文件名,后面是选择器
  • ::selector:只写选择器,这里指fragment名称,则加载本页面对应的fragment
  • templatename:只写模板文件名,则加载整个页面
  ================== fragment语法 ============================= 
    <!--  语法说明  "::"前面是模板文件名,后面是选择器 -->
    <div th:include="template/footer::copy"></div>
    <!-- 只写选择器,这里指fragment名称,则加载本页面对应的fragment -->
    <div th:include="::#thispage"></div>
    <!-- 只写模板文件名,则加载整个页面 -->
    <div th:include="template/footer"></div>
================= 加载块 ============================
 
<span id="thispage">
    div in this page.
</span>

th:include 和 th:replace都是加载代码块内容,但是还是有所不同
th:include:加载模板的内容: 读取加载节点的内容(不含节点名称),替换div内容
th:replace:替换当前标签为模板中的标签,加载的节点会整个替换掉加载他的div

公共部分如下:

<!-- th:fragment 定义用于加载的块 -->
<span th:fragment="pagination"> 
the public pagination
</span>

引用时如下:

================= th:include 和 th:replace============================
<!-- 加载模板的内容: 读取加载节点的内容(不含节点名称),替换<div>的内容 -->
<div th:include="pagination::pagination">1</div>
<!-- 替换当前标签为模板中的标签: 加载的节点会整个替换掉加载他的<div>  -->
<div th:replace="pagination::pagination">2</div>

结果如下:

<!-- 加载模板的内容: 读取加载节点的内容(不含节点名称),替换<div>的内容 -->
<div> the public pagination</div>
<!-- 替换当前标签为模板中的标签: 加载的节点会整个替换掉加载他的<div>  -->
<span> the public pagination</span>

本文转自Thymeleaf th:include、th:replace使用

2

评论区