30.在springboot中使用thymeleaf的模板（include,insert）

本文链接：https://blog.csdn.net/weixin_59334478/article/details/126775752

本文介绍了如何在Spring Boot项目中使用Thymeleaf插件实现模板的插入和包含，通过实例展示了`th:insert`和`th:include`的不同用法，以及如何引用和复用head和footer等公共模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：

本项目是在

https://blog.csdn.net/weixin_59334478/article/details/126770911?spm=1001.2014.3001.5501https://blog.csdn.net/weixin_59334478/article/details/126770911?spm=1001.2014.3001.5501springboot文章29

修改而来

pom.xml文件，核心配置文件等文件，与文章29保持一致，本文只展示最新添加的文件，以减小文章冗余，更容易看出thymeleaf的使用方法。

知识点：

1.插入模板相当于，在当前标签中间插入引用过来的模板：例如

<div th:insert="~{head :: top}">
    第一种方式使用模板，th:insert
</div>

就等于

<div th:insert="~{head :: top}">
<div th:fragment="top">
    <p>百度公司</p>
    <p>网站：www.baidu.com</p>
</div>
</div>

2.包含模板就相当于，引用过来的模板替换了当前的标签，例如：

<div th:include="~{head :: top}">
</div>

就等于

<div th:fragment="top">
    <p>百度公司</p>
    <p>网站：www.baidu.com</p>
</div>

项目结构：

1.index.html添加连接语句

2.ThymeleafController类添加方法

3.创建html文件

1)head.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>head</title>
</head>
<body>
          <div th:fragment="top">
              <p>百度公司</p>
              <p>网站：www.baidu.com</p>
          </div>


        <div th:fragment="menu">
            <p>文档|下载|blog</p>

        </div>
</body>
</html>

2)footer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>footer</title>
</head>
<body>
       <div>
           footer.html
           @www.baidu.com
       </div>
</body>
</html>

3)common目录下的leaf.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    左侧树形结构
    部门管理
    人员管理
    考勤入口
</div>

</body>
</html>

4）customtpl.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>使用模板</title>
</head>
<body>
      <div style="margin-left: 200px;">

          <h3>使用其他目录中的模板文件</h3>
          <div th:insert="common/left :: html"></div>
          <br/>
          <br/>
          <div th:include="common/left"></div>


          <div th:insert="head :: menu"></div>


          <br/>
          <br/>
          <h3>插入模板  th:insert    第一种方式</h3>
          <div th:insert="~{head :: top}">
              第一种方式使用模板，th:insert
          </div>

          <br/>
          <br/>
          <h3>插入模板   th:insert   第二种方式</h3>
          <p th:insert="head :: top"></p>


          <br/>
          <br/>
          <h3>包含模板，  th:include   第一种语法</h3>
          <div th:include="~{head :: top}">

          </div>


          <br/>
          <br/>
          <h3>包含模板，  th:include   第二种语法</h3>
          <div th:include="head :: top">

          </div>


          <br/>
          <br/>
          <h3>使用整个文件作为复用的内容(整个文件作为模板使用)</h3>
          <div th:include="footer :: html"></div>
          <br/>
          <br/>
          <div th:include="footer"></div>
          <br/>
          <br/>
          <div th:insert="footer"></div>




      </div>
</body>
</html>

4.测试