Spring boot 如何使用视图解析器 thymeleaf 模板引擎整合html公共部分详情

在网站开发中 有的时候 会把网站的 公共的头部 公共的左导航 公共的尾部
抽取出来，然后哪里使用哪些引用 方便修改
下面 展示 通过 thymeleaf 引擎 来实现

先看官网文档介绍
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#template-layout

他有两种声明 公共部分的方式
方式一 th:fragment=“copy”

方式二 也可以直接使用 选择器 来引用
id=“copy-section”

th:insert="~{footer :: #copy-section}

引用的时候 ~ 可以省略不写 th:insert=“footer :: copy” 这样写 也是可以的

引用公共 html 有三种方式

//方式一
 <div th:insert="footer :: copy"></div>
//方式二
  <div th:replace="footer :: copy"></div>
//方式三
  <div th:include="footer :: copy"></div>
1
2
3
4
5
6

区别

//方式一效果
  <div>
    <footer>
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </div>
//方式二效果
  <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
  </footer>
//方式三效果
  <div>
    &copy; 2011 The Good Thymes Virtual Grocery
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

根据自己需求 选择 使用

代码实现

引用方式


查看效果