最近做到頁面數據展示分頁的功能，由於每個模塊都需要分頁，所以每個頁面都需要將分頁的頁碼選擇內容重復的寫N遍，如下所示：
重復的代碼帶來的就是Ctrl+C，Ctrl+V ,於是了解了一下thymeleaf的fragment加載語法以及th:include、th:replace的區別，得以解決。
首先在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>
————————————————
版權聲明：本文為CSDN博主「believe_stone」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/believe__sss/article/details/79992408