java鬼混笔记:springboot之thymeleaf 5:模板引入与删除代码

记录模板引入,也就是别的html引入。

首先在/main/resources/templates下面创建一个footer.html,标签:th:fragment

内容如下:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Hello Thymeleaf!</title>
</head>
<body>

<div th:fragment="footer" class="xxxxxx"><!--其中fragment='footer'相当于引入的标识符-->
this is footer
</div>
    
<div id="id"><!--通过id来引用这段代码-->
from id
</div>
   
<div th:fragment="arg(one,two)"><!--可能传参,然后使用-->
<span th:text="${one}"/>
<span th:text="${two}"/>
</div>
    
</body>
</html>

接着在c.html中引入footer.html中的代码,使用方法如下

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Hello Thymeleaf!</title>
</head>
<body>

	<!-- 通过fragment标识符引入,其中第一个footer是footer.html的文件footer,第二个footer是在footer.html代码中的th:fragment="footer"的footer,意思是引入这块的代码 -->
	<div th:replace="footer :: footer"></div>

	<!-- 通过id标识符引入 -->
	<div th:replace="footer :: #id"></div>

	<!-- 带参数引入 -->
	<div th:replace="footer :: arg(1,2)"></div>
	----------

	<!-- insert直接引入包含html的内容,
	最终效果如下:
	<div th:insert="footer :: footer">this is footer(原来footer下面内容)</div>
	 -->
	<div th:insert="footer :: footer"></div>
	
	
	
	
	<!-- replace:把footer的html代码拿过来显示
	最终效果如下:
	<div class="xxxxxx">
      this is footer
    </div>
    原来的<div th:replace="footer :: footer"></div>被替换
	 -->
    <div th:replace="footer :: footer"></div>



	<!-- 官网不建议使用
	直接引入内容,最终效果如下:
	<div>
      this is footer
    </div>
	 -->
    <div th:include="footer :: footer"></div>
</body>
</html>

浏览器打开c.html后,看到效果

this is footer
from id
1 2
----------
this is footer
this is footer

---------------

删除代码,得用 th:remove

<div id="id1" th:remove="all">
	<div id="id2">sfsfsfsf</div>
</div>
th:remove有多个输入:分别如下

all 删除当前标签和其内容和子标签
body 不删除当前标签,但是删除其内容和子标签
tag 删除当前标签,但不删除子标签
all-but-first 删除除第一个子标签外的其他子标签
none 啥也不干

(直接拿别人翻译的)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值