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

参考资料

  1. 八、模板布局(Template Layout)
  2. Thymeleaf中th:include、th:replace、th:insert、th:fragment用法及区别
  3. Thymeleaf参考手册(八):模板布局

目录

  • 一. 前期准备
  • 二. th:insert
  • 三. th:include
  • 四. th:replace


一. 前期准备

⏹子页面 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>testtitle>
head>
<body>
    <div class="parent">
        我是父页面中的内容
    div>
    <hr>

    <div class="parent-area">
        
    div>
body>
html>

二. th:insert

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

  • :: html表示引入整个子页面,包括子页面中的jscss
<div id="import-content" th:insert="./test14-sub :: html(id='110', name='贾飞天')">div>

效果

Thymeleaf th:insert、th:replace、th:include的使用_第1张图片

  • 引入片段
<div id="import-content" th:insert="./test14-sub :: footer">div>

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

Thymeleaf th:insert、th:replace、th:include的使用_第2张图片


三. th:include

Thymeleaf 3.0之后不推荐使用

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

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

效果

Thymeleaf th:insert、th:replace、th:include的使用_第3张图片

  • 引入片段
<div id="import-content" th:include="./test14-sub :: footer">div>

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

Thymeleaf th:insert、th:replace、th:include的使用_第4张图片


四. th:replace

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

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

效果

Thymeleaf th:insert、th:replace、th:include的使用_第5张图片

  • 引入片段
<div id="import-content" th:replace="./test14-sub :: footer">div>

效果

Thymeleaf th:insert、th:replace、th:include的使用_第6张图片

你可能感兴趣的:(#,Thymeleaf,Thymeleaf)