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

以你之姓@ 2022-12-24 15:55 184阅读 0赞

### github:[https://github.com/pshdhx/springbootcurd][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,抽取顶部

页面2：list.html

三种引入公共片段的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>

抽取侧边栏

使用侧边栏

实现点击侧边栏按钮，侧边栏按钮高亮显示--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>

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

dashboard.html

<div th:replace="common/bar::#sidebar(activeUri='main.html')"></div>

list.html

<div th:replace="common/bar::#sidebar(activeUri='emps')"></div>

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

[https_github.com_pshdhx_springbootcurd]: https://github.com/pshdhx/springbootcurd