Thymeleaf系列六模板 template

最新推荐文章于 2025-04-06 09:00:00 发布

hry2015

最新推荐文章于 2025-04-06 09:00:00 发布

阅读量1.3w

点赞数

分类专栏： web前端 thymeleaf Thymeleaf学习总结文章标签： thymeleaf 模板

本文链接：https://blog.youkuaiyun.com/hry2015/article/details/73476973

版权

web前端同时被 3 个专栏收录

7 篇文章

订阅专栏

thymeleaf

6 篇文章

订阅专栏

Thymeleaf学习总结

6 篇文章

订阅专栏

本文介绍了Thymeleaf中的模板使用，包括th:fragment、th:include、th:replace、参数化模板配置和通过css选择器加载代码块等。通过实例展示了如何创建和使用公共模板，以及它们之间的区别和应用场景。

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

1. 概述

在web开发中，我们经常会将公共头，公共尾，菜单等部分提取成模板供其它页面使用。在thymeleaf中，通过th:fragment、th:include、th:replace、参数化模板配置、css选择器加载代码块等实现。下文通过例子来说明用法:

fragment语法
通过 th:fragment 和 css选择器加载代码块
th:include 和 th:replace
参数化模板配置

这应该是Thymeleaf系列的最后一篇，不容易啊！夸夸一下自己，呵呵！

注意

spring boot 1.5.4 默认使用的 thymeleaf 2，这里只演示thymeleaf 2语法

2. 例子

2.1. 公共页

/templates/template/footer.html
此页面定义待加载的模板页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8" />
<body>
    <!-- th:fragment 定义用于加载的块 -->
    <span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>

    <span id="copy-section"> 2017 hry loaded by id=copy-section</span>

    <!-- 定义模板时，可以传入参数 -->
    <span th:fragment="frag(month, date) "> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span>

  </body>

</html>

2.2. fragment语法

/templates/template/footer.html：定义要加载代码块copy

<!-- th:fragment 定义用于加载的块 -->
<span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>

/templates/template/template.html：通过th:include在本页中加载以上的代码块copy，fragment加载语法如下：

templatename::selector：”::”前面是模板文件名，后面是选择器
::selector：只写选择器，这里指fragment名称，则加载本页面对应的fragment
templatename：只写模板文件名，则加载整个页面

    ================== fragment语法 ============================= <br />
    <!--  语法说明  "::"前面是模板文件名，后面是选择器 -->
    <div th:include="template/footer::copy"></div>
    <!-- 只写选择器，这里指fragment名称，则加载本页面对应的fragment -->
    <div th:include="::#thispage"></div>
    <!-- 只写模板文件名，则加载整个页面 -->
    <div th:include="template/footer"></div>
================= 加载块 ============================
<br />
<span id="thispage">
    div in this page.
</span>

运行结果输出：

    ================== fragment语法 ============================= <br />
    <!--  语法说明  "::"前面是模板文件名，后面是选择器 -->
    <div> 2017 hry loaded by fragment=copy</div>
    <!-- 只写选择器，这里指fragment名称，则加载本页面对应的fragment -->
    <div>
        div in this page.
    </div>
    <!-- 只写模板文件名，则加载整个页面 -->
    <div>
        <html>
        <meta charset="UTF-8" />
        <body>
            <!-- th:fragment 定义用于加载的块 -->
            <span> 2017 hry loaded by fragment=copy</span>

            <span id="copy-section"> 2017 hry loaded by id=copy-section</span>

            <!-- 定义模板时，可以传入参数 -->
            <span> <span>welcome hry come in 6-19</span></span>

          </body>

        </html>
</div>

2.3. 通过 th:fragment 和 css选择器加载代码块

/templates/template/footer.html：
除了th:fragment外，还可以css选择器加载代码块。下文定义th:fragment=”copy”和id=”copy-section”。

    <!-- th:fragment 定义用于加载的块 -->
    <span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>

    <span id="copy-section"> 2017 hry loaded by id=copy-section</span>

/templates/template/template.html：

通过 th:fragment 加载代码块
通过css选择器加载代码块

================= 通过 th:fragment 和 css选择器加载代码块 =================
<!-- 这里加载”th:fragment 定义用于加载的块“ -->
<div th:include="template/footer::copy"></div>
<!-- 这里加载”id=copy-section“的节点 -->
<div th:include="template/footer::#copy-section"></div>

运行结果输出：

================= 通过 th:fragment 和 css选择器加载代码块 =================
<!-- 这里加载”th:fragment 定义用于加载的块“ -->
<div> 2017 hry loaded by fragment=copy</div>
<!-- 这里加载”id=copy-section“的节点 -->
<div> 2017 hry loaded by id=copy-section</div>

2.4. th:include 和 th:replace

th:include 和 th:replace都是加载代码块内容，但是还是有所不同，下面会展示两者不同。

/templates/template/footer.html：

<!-- th:fragment 定义用于加载的块 -->
<span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>

/templates/template/template.html：

th:include：加载模板的内容：读取加载节点的内容（不含节点名称），替换div内容
th:replace：替换当前标签为模板中的标签，加载的节点会整个替换掉加载他的div

================= th:include 和 th:replace============================
<!-- 加载模板的内容： 读取加载节点的内容（不含节点名称），替换<div>的内容 -->
<div th:include="template/footer::copy">1</div>
<!-- 替换当前标签为模板中的标签： 加载的节点会整个替换掉加载他的<div>  -->
<div th:replace="template/footer::copy">2</div>

运行结果输出：

<!-- 加载模板的内容： 读取加载节点的内容（不含节点名称），替换<div>的内容 -->
<div> 2017 hry loaded by fragment=copy</div>
<!-- 替换当前标签为模板中的标签： 加载的节点会整个替换掉加载他的<div>  -->
<span> 2017 hry loaded by fragment=copy</span>

2.5. 参数化模板配置

/templates/template/footer.html：
指定fragment时，可以指定变量

<!-- 定义模板时，可以传入参数 -->
<span th:fragment="frag(month, date) "> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span>

/templates/template/template.html：
向模板中传入变量值

================= 参数化模板配置 ============================
<div th:include="template/footer::frag(${month},${date})">...</div>

运行结果输出：

================= 参数化模板配置 ============================
<div> <span>welcome hry come in 6-19</span></div>

3. 代码

详细见代码Github

Thymeleaf系列六 模板 template

1. 概述

2. 例子

2.1. 公共页

2.2. fragment语法

2.3. 通过 th:fragment 和 css选择器加载代码块

2.4. th:include 和 th:replace

2.5. 参数化模板配置

3. 代码

Thymeleaf系列六模板 template