Thymeleaf模板片段
阿新 • • 發佈：2020-07-25
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('Thymeleaf模板片段')" /> </head> <body class="gray-bg"> <div class="row"> <div class="col-sm-12"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>Thymeleaf模板片段</h5> </div> <div class="ibox-content"> <div class="panel-body"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#dyyyymbpd">1、定義與引用模板片段</a> </h4> </div> <div id="dyyyymbpd" class="panel-collapse collapse in" th:with="year=2019"> <div class="panel-body" th:with="result=true"> <p class="text-danger">定義與引用模板片段（~{模板名稱::選擇器}）</p> th:insert ： 保留自己的主標籤，保留th:fragment的主標籤。 <div th:insert="~{fragment/footer.html :: copy}"></div> th:replace ：不要自己的主標籤，保留th:fragment的主標籤。 <div th:replace="~{fragment/footer.html :: copy}"></div> th:include ：保留自己的主標籤，不要th:fragment的主標籤。 <div th:include="~{fragment/footer.html :: copy}"></div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#xzqdjcyf">2、選擇器的基礎語法</a> </h4> </div> <div id="xzqdjcyf" class="panel-collapse collapse"> <div class="panel-body"> 1、選擇直接子節點id為footerA的div <p class="text-left"><div th:insert="~{fragment/select.html :: /div[@id='footerA']}"></div></p> 2、選擇全部子節點中id為footerB的div <p class="text-left"><div th:insert="~{fragment/select.html :: //div[@id='footerB']}"></div></p> 3、選擇class為content的span節點 <p class="text-left"><div th:insert="~{fragment/select.html :: span[@class='content']}"></div></p> 4、選擇class為footerG的span（有多個），選出第一個 <p class="text-left"><div th:insert="~{fragment/select.html :: //span[@class='footerG'][0]}"></div></p> 5、選擇class為footerContent並且id為footerE的span（多級篩選） <p class="text-left"><div th:insert="~{fragment/select.html :: //div[@class='footerContent']//span[@id='footerE']}"></div></p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#hybldpdyy">3、含有變數的的片段引用</a> </h4> </div> <div id="hybldpdyy" class="panel-collapse collapse"> <div class="panel-body" th:with="userName='張三',deptName='技術部'"> 1、使用常量傳參 <div th:replace="~{fragment/param.html :: welcome('張三','技術部')}"></div> 2、使用變數傳參 <div th:replace="~{fragment/param.html :: welcome(${userName},${deptName})}"></div> 3、不傳入引數情況（不會出現異常） <div th:replace="~{fragment/param.html :: welcome_1}"></div> 4、不顯示指定片段引數 <div th:replace="~{fragment/param.html :: welcome_1(val1='張三', val2='技術部')}"></div> 5、片斷塊引用 <table class="table"> <thead> <tr> <th>使用者ID</th> <th>使用者名稱</th> </tr> </thead> <tbody> <th:block th:each="user : ${users}"> <tr> <td th:text="${user.userId}"></td> <td th:text="${user.userName}"></td> </tr> </th:block> </tbody> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#scmb">4、刪除模板</a> </h4> </div> <div id="scmb" class="panel-collapse collapse"> <div class="panel-body"> 1、普通方法 <p class="text-left"><div th:if="false">我是當前節點<div>我是子節點</div></div></p> 2、remove刪除方法（all刪除包含標籤和所有的子節點） <table class="table"> <thead> <tr th:remove="all"> <th>使用者ID</th> <th>使用者名稱</th> </tr> </thead> <tbody> <th:block th:each="user : ${users}"> <tr> <td th:text="${user.userId}"></td> <td th:text="${user.userName}"></td> </tr> </th:block> </tbody> </table> 3、remove刪除方法（body不包含標記刪除,但刪除其所有的子節點） <table class="table"> <thead> <tr th:remove="body"> <th>使用者ID</th> <th>使用者名稱</th> </tr> </thead> <tbody> <th:block th:each="user : ${users}"> <tr> <td th:text="${user.userId}"></td> <td th:text="${user.userName}"></td> </tr> </th:block> </tbody> </table> 4、remove刪除方法（tag包含標記的刪除,但不刪除它的子節點） <table class="table"> <thead> <tr th:remove="tag"> <th>使用者ID</th> <th>使用者名稱</th> </tr> </thead> <tbody> <th:block th:each="user : ${users}"> <tr> <td th:text="${user.userId}"></td> <td th:text="${user.userName}"></td> </tr> </th:block> </tbody> </table> 5、all-but-first（刪除所有包含標籤的孩子，除了第一個） <table class="table"> <thead> <tr th:remove="all-but-first"> <th>使用者ID</th> <th>使用者名稱</th> </tr> </thead> <tbody> <th:block th:each="user : ${users}"> <tr> <td th:text="${user.userId}"></td> <td th:text="${user.userName}"></td> </tr> </th:block> </tbody> </table> 6、none（什麼也不做） <table class="table"> <thead> <tr th:remove="none"> <th>使用者ID</th> <th>使用者名稱</th> </tr> </thead> <tbody> <th:block th:each="user : ${users}"> <tr> <td th:text="${user.userId}"></td> <td th:text="${user.userName}"></td> </tr> </th:block> </tbody> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#mbzs">5、模板註釋</a> </h4> </div> <div id="mbzs" class="panel-collapse collapse"> <div class="panel-body"> 1、註釋可見 <!-- 你看的見我 --> 2、註釋不可見 <!--/* 你看不見我 */--> </div> </div> </div> </div> </div> </div> </div> </div> <th:block th:include="include :: footer" /> </body> </html>