springboot Thymeleaf公共页抽取

Spring_Boot专栏
上一篇	主目录	下一篇

---

【前言】

---

抽取语法

第一步：在公共模板页面footer.html中定义模板th:fragment：

<div th:fragment="copy">
&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">
&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>
    &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
</div>

<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>

<div>
&copy; 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>