thymeleaf公共页面元素抽取和高亮显示

一 thymeleaf公共页面元素抽取

1、抽取公共片段，在公共页面footer.html的片段上加上th:fragment属性

<div th:fragment="copy"> 

© 2011 The Good Thymes Virtual Grocery

</div>

2、引入公共片段，

<div th:insert="~{footer :: copy}"></div>  模板是：footer.html

~{templatename::selector}：模板名::选择器　　 选择器：标签的id属性值

~{templatename::fragmentname}:模板名::片段名 

3、默认效果：

insert的公共片段在div标签中

如果使用th:insert等属性进行引入，可以不用写~{}：

行内写法可以加上：[[~{}]];    [(~{})]；

三种方式引入公共片段的th属性：
th:insert：将公共片段整个插入到声明引入的元素中
th:replace：将声明引入的元素替换为公共片段
th:include：将被引入的片段的内容包含进这个标签中

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

二 thymeleaf高亮显示

既然我们写了属性，就要引用它才会生效，来看哪里引用，看到我们引用的侧边栏的sidebar中，有一个active的属性，这个就是高亮的意思，那么我做下修改，加个判断：（如果打开的是请求xx，就高亮，否则不高亮）：

<a class="nav-link active" href="#" th:href="@{/main.html}"

                th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}">

<a class="nav-link" href="#" th:href="@{/emps}" methods="get"

                   th:class="${activeUri=='emps'?'nav-link active':'nav-link'}">

<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" />