thymeleaf实现公共元素的抽取，点击菜单栏高亮显示（全）

github:​​https://github.com/pshdhx/springbootcurd​​

1、抽取公共片段
<div th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</div>

2、引入公共片段
<div th:insert="~{footer :: copy}"></div>
~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名

3、默认效果：
insert的公共片段在div标签中
如果使用th:insert等属性进行引入，可以不用写~{}：
行内写法可以加上：[[~{}]]   ;    [(~{})]；

案列：

页面1：dashboard.html,抽取顶部

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">

页面2：list.html

<div th:insert="~{dashboard::topbar}"></div>

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

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

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

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

效果:直接插入标签
<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>

抽取侧边栏

<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar" >

使用侧边栏

<div th:replace="dashboard::#sidebar"></div>

实现点击侧边栏按钮，侧边栏按钮高亮显示--bar.html

<a class="nav-link active"
                   th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"
                   th:href="@{/main.html}"
                   href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
                    <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-home">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
                    </svg>
                    Dashboard <span class="sr-only">(current)</span>
                </a>

<li class="nav-item">
                <a class="nav-link"
                   th:class="${activeUri=='emps'?'nav-link active':'nav-link'}"
                   th:href="@{/emps}">
                    <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>

我们可以在使用抽取的标签时传递参数，公共抽取页面进行参数的判断

dashboard.html

<!-- 引入侧边栏 -->
        <div th:replace="common/bar::#sidebar(activeUri='main.html')"></div>

list.html

<!-- 引入侧边栏 -->
        <div th:replace="common/bar::#sidebar(activeUri='emps')"></div>

如此，即可实现点击页面的侧边栏，其被选中的菜单高亮显示