thymeleaf中抽取公共页面元素

对于页面的顶部栏和侧边栏，一般在多个网页中都是相同的，可以抽取出公共元素。

thymeleaf中有这个功能，觉得挺受用的，特此记录一下。

 

给公共的片段中加入th:fragment属性。

<footer th:fragment="copy">
    这里标记属性值为“copy”
    公共元素（顶部栏/侧边栏）
</footer>

在需要的地方引入公共片段

<div th:insert="~{footer :: copy}"></div>

~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名

三种引入公共片段的属性和效果

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

<footer th:fragment="copy">
    &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>
        &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
</div>

<footer>
    &copy; 2011 The Good Thymes Virtual Grocery
</footer>

<div>
    &copy;
</div>

默认效果

insert的公共片段在div标签中！

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

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

 

参考资料

尚硅谷-Spring Boot核心技术-笔记