Thymeleaf代码片段引用

代码片段

代码⽚段表达式是表示标记⽚段的简单⽅法，并将其移动到模板周围。这允许我们复制它们，将它们传递给其他模板作为参数，等等。

最常⻅的⽤法是使⽤th:insert或th:replace或th:include进⾏⽚段插入

我们在想要抽取的代码的标签上添加这个属性th:fragment="topbar"

<!--顶部导航栏-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">注销</a>
        </li>
    </ul>
</nav>

然后要引用的话在对应页面th:replace="~{模版名::name}"

模版名就是抽取时的那个html页面的名字，thymeleaf会自动解析，name是刚刚抽取代码片段的名字，这里是topbar

<!--头部导航-->
<div th:replace="~{commons/commons::topbar}"></div>

总结：

三种引入公共片段的th属性：

th:insert：将公共片段整个插入到声明引入的元素中

th:replace：将声明引入的元素替换为公共片段

th:include：将被引入的片段的内容包含进这个标签中

th:insert和th:replace(th:include)之间的区别？

th:insert是最简单的：它将简单地插⼊指定宿主标签的标签体中。
th:replace实际上⽤指定的⽚段替换其宿主标签。
th:include类似于th:insert，⽽不是插⼊⽚段，它只插⼊此⽚段的内容。

选中高亮显示

高亮就是 class 属性后面添加 active 

 <a class="nav-link active"></a>

下面代码传递个active参数

<!--传递参数给组件-->
<div th:replace="~{commons/commons::sidebar(active='main.html')}"></div>

如果 active 的参数值为 main.html，则显示高亮，否则不显示

<a th:class="${active=='main.html'?'nav-link active':'nav-link'}" th:href="@{/index.html}">

循环遍历

用th:each标签

<tbody>
    <tr th:each="emp:${emps}">
        <td th:text="${emp.getId()}">1,001</td>
        <td th:text="${emp.getLastName()}">Lorem</td>
        <td th:text="${emp.getEmail()}">ipsum</td>
        <td th:text="${emp.getGender()==0?'女':'男'}">dolor</td>
        <td th:text="${emp.department.getDepartmentName()}">sit</td>
        <td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}">sit</td>
        <!--<td>[[${emp.getBirth()}]]</td>-->
        <td>
            <button class="btn btn-sm btn-primary">编辑</button>
            <button class="btn btn-sm btn-danger">删除</button>
        </td>
    </tr>
</tbody>