Thymeleaf th:insert、th:replace、th:include的使用

最新推荐文章于 2024-04-25 23:13:41 发布

fengyehongWorld

最新推荐文章于 2024-04-25 23:13:41 发布

阅读量2.3k

点赞数 1

分类专栏： # Thymeleaf 文章标签： Thymeleaf

本文链接：https://blog.csdn.net/feyehong/article/details/127953997

版权

Thymeleaf 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

参考资料

一. 前期准备

⏹子页面 test14-sub.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <style>
        .children {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="children">
        <div th:id="${id}">[[${name}]]</div>
        <h1>我是子页面中的内容</h1>
        <hr>

        <div th:fragment="footer">
            我是子页面中footer片段的内容
        </div>
    </div>
</body>
<script>
    window.addEventListener("load", () => {
        console.log("子页面的内容加载了！");
    })
</script>
</html>

⏹父页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <style>
        .parent {
            width: 500px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <title>test</title>
</head>
<body>
    <div class="parent">
        我是父页面中的内容
    </div>
    <hr>

    <div class="parent-area">
        <!-- 👉👉👉在此处引入子页面👈👈👈 -->
    </div>
</body>
</html>

二. th:insert

引入子模块的所有，保留自己的主标签
当引入子页面的片段的时候，会保留 th:fragment片段的主标签

:: html表示引入整个子页面，包括子页面中的js和css

<div id="import-content" th:insert="./test14-sub :: html(id='110', name='贾飞天')"></div>

🤔效果

在这里插入图片描述

引入片段

<div id="import-content" th:insert="./test14-sub :: footer"></div>

🤔效果
可以看到th:fragment片段的主标签div依旧存在

在这里插入图片描述

三. th:include

🤪 Thymeleaf 3.0之后不推荐使用

引入子模块的所有，保留自己的主标签
当引入子页面的片段的时候，不会保留 th:fragment片段的主标签

引入整个html

<div id="import-content" th:include="./test14-sub :: html(id='110', name='贾飞天')"></div>

🤔效果

在这里插入图片描述

引入片段

<div id="import-content" th:include="./test14-sub :: footer"></div>

🤔效果
可以看到th:fragment片段的主标签已经不存在了，这一点是 th:include 和 th:insert 最大的区别

在这里插入图片描述

四. th:replace

引入子模块的所有，不保留父模块的tag。
替换当前标签为模板中的标签，加载的节点会整个替换掉加载他的div等元素标签

引入整个html

<div id="import-content" th:replace="./test14-sub :: html(id='110', name='贾飞天')"></div>

🤔效果

在这里插入图片描述

引入片段

<div id="import-content" th:replace="./test14-sub :: footer"></div>

🤔效果

在这里插入图片描述

fengyehongWorld

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf th:insert、th:replace、th:include的使用

⏹Thymeleaf th:insert、th:replace、th:include的使用
复制链接

扫一扫

专栏目录

Thymeleaf th:insert、th:replace、th:include的使用

目录

一. 前期准备

二. th:insert

三. th:include

四. th:replace

“相关推荐”对你有帮助么？