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页面中, 引用一个公共片段

引用方式:

1. ~{templateName::fragmentName} 模板名::片段名

2. ~{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.三种引用片段的区别

引用片段的方法有三种

1. th:insert 是最简单的：它会简单地插入指定的片段作为其宿主标签的主体。
2. th:replace实际上用指定的片段替换其主机标记。
3. th:include与 类似th:insert，但它不插入片段，而是仅插入此片段的内容。

例如在类路径下的templates目录下的footer页面中有如下片段

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

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>