Spring_Boot专栏 | ||
---|---|---|
上一篇 | 主目录 | 下一篇 |
【前言】
抽取语法
第一步:在公共模板页面footer.html中定义模板th:fragment
:
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
第二步:在各个页面引入公共片段th:insert="~{footer :: copy}"
引入语法:
th:insert="~{templatename::selector}":模板名::选择器
th:insert="~{templatename::fragmentname}":模板名::片段名
<div th:insert="~{footer :: copy}"></div>
默认效果:
insert的公共片段在div标签中
如果使用th:insert等属性进行引入,可以不用写~{}
行内写法可以加上:[[~{}]]; [(~{})];
不同引入效果
三种引入公共片段的th属性:
th:insert:将公共片段整个插入到声明引入的元素中
th:replace:将声明引入的元素替换为公共片段
th:include:将被引入的片段的内容包含进这个标签中
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
引入方式
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>
效果
<div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
</div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
引入片段时传入参数
在公共页面bar.html中的公共片段sidebar
:th:class="${activeUri=='emps'?'nav-link active':'nav-link'}"
<li class="nav-item">
<a class="nav-link active" href="#" th:href="@{/emps}"
th:class="${activeUri=='emps'?'nav-link active':'nav-link'}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
员工管理
</a>
</li>
在某页面中引入侧边栏,引入的时候传递的参数为activeUri='emps'
,而在装载#sidebar
的时候,上面的三元表达式经过判断,使得class="nav-link active"
而不是class=“nav-link”,因此会高亮。而activeUri不等于其他的标签的activeUri,就没有active,因此不会高亮。
<!--引入侧边栏;传入参数-->
<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>