<!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>
