SpringBoot之使用thymeleaf进行页面抽取
1.使用th:fragment标签定义公共片段
例如在类路径下的templates目录下的dashboard.html页面中, 定义一个公共片段
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
这是公共片段的内容
</nav>
2.使用th:replace标签引入公共片段
例如在类路径下的templates目录下的list.html页面中, 引用一个公共片段
引用方式:
-
~{templateName::fragmentName} 模板名::片段名
-
~{templateName::selector} 模板名::选择器
模板名其实就是thymeleaf模板引擎渲染的页面, 片段名就是
th:fragment
标签的属性值, 选择器就是前端中的各种选择器(id, class…)
<div th:replace="~{dashboard::topbar}"></div>
上述代码等效于
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
这是公共片段的内容
</nav>
3.三种引用片段的区别
引用片段的方法有三种
th:insert
是最简单的:它会简单地插入指定的片段作为其宿主标签的主体。th:replace
实际上用指定的片段替换其主机标记。th:include
与 类似th:insert
,但它不插入片段,而是仅插入此片段的内容。
例如在类路径下的templates目录下的footer页面中有如下片段
<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>
4.携带参数的片段
在引用公共片段时我们可以在片段名的后面追加参数(写在小括号中, 若有多个参数, 用逗号隔开), 这样在片段中我们就可以使用这些参数, 例如如下
<div th:replace="comm/bar::sidebar(activeUri='main.html')"></div>
<div th:replace="comm/bar::sidebar(activeUri='list')"></div>
如下被引用的片段将根据参数来调整哪个标签将被激活, 处于活动状态
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}" href="#" th:href="@{/main.html}" >
</a>
</li>
<li class="nav-item">
<a class="nav-link" th:class="${activeUri=='list'?'nav-link active':'nav-link'}" href="#" th:href="@{/list}" >
</a>
</li>
</nav>