一 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" />