您的位置：首页 > 编程语言 > Java开发

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

2017-11-23 22:25 786 查看

记录模板引入，也就是别的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 啥也不干

（直接拿别人翻译的）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航