th:replace & th:include

原文:https://blog.csdn.net/h1021456873/article/details/79085505

Thymeleaf html 导入(th:replace & th:include)


模板模块导入

首先定义一个/WEBINF/templates/footer.html文件:

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <body>
        <div th:fragment="copy">
            &copy; 2011 The Good Thymes Virtual Grocery
        </div>
    </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

上面的代码定义了一个片段称为copy,我们可以很容易地使用th:include 或者 th:replace属性包含在我们的主页上:

<body>
...
<div th:include="footer :: copy"></div>
</body>
  • 1
  • 2
  • 3
  • 4

include的表达式想当简洁。这里有三种写法:

  • “templatename::domselector” 或者 “templatename::[domselector]”引入模板页面中的某个模块。
  • “templatename”引入模板页面。
  • “::domselector” 或者 “this::domselector” 引入自身模板的模块 
    上面所有的templatename和domselector的写法都支持表达式写法:
<div th:include="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>
  • 1

不使用th:fragment来引用模块

...
<div id="copy-section">
&copy; 2011 The Good Thymes Virtual Grocery
</div>
...
  • 1
  • 2
  • 3
  • 4
  • 5

我们可以用css的选择器写法来引入

<body>
...
<div th:include="footer :: #copy-section"></div>
</body>
  • 1
  • 2
  • 3
  • 4

th:include 和 th:replace的区别

th:include和th:replace都可以引入模块,两者的区别在于 
th:include:引入子模块的children,依然保留父模块的tag。 
th:replace:引入子模块的所有,不保留父模块的tag。 
举个栗子:

<footer th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</footer>
  • 1
  • 2
  • 3

引入界面:

<body>
...
<div th:include="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5

结果是:

<body>
...
<div>
&copy; 2011 The Good Thymes Virtual Grocery
</div>
<footer>
&copy; 2011 The Good Thymes Virtual Grocery
</footer>
</body>

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值