Thymeleaf th:replace、th:insert、th:include的使用及区别

在项目开发中像侧边栏,导航栏,底部栏,分页等公共模块一般都会单独提取出来成一个页面,再使用.在Thymeleaf中一般采用 th:replace 或 th:insert .

th:insert ：保留自己的主标签，保留th:fragment的主标签。
th:replace ：不要自己的主标签，保留th:fragment的主标签。
th:include ：保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）

这三个指令一般配合 th:fragment使用,fragment片段使用语法如下：

templatename :: selector ：::符号前面是html文件名称，后面是th:fragment的值
:: selector ：只写th:fragment的值，则加载本 html 页面对应的fragment片段
templatename ::只写html文件名称，则加载整个html页面

注意: :: 符号前后需要有空格.

示例:
footerbar.html:

<body>
	<footer class="main-footer" th:fragment="footer">
        <strong>Copyright &copy; 2019-2020 <a href="http://www.zhangligong.xyz/">FishLeap</a>.</strong>
        All rights reserved. 
    </footer>
</body>

在其它html页面中引入某html页面的fragment片段:

<div th:insert="footerbar :: footer"></div>
 
<div th:replace="footerbar :: footer"></div>
 
<div th:include="footerbar :: footer"></div>

结果为:

<div>
    <footer class="main-footer" th:fragment="footer">
        <strong>Copyright &copy; 2019-2020 <a href="http://www.zhangligong.xyz/">FishLeap</a>.</strong>
        All rights reserved. 
    </footer>
</div>  
 
<footer class="main-footer" th:fragment="footer">
        <strong>Copyright &copy; 2019-2020 <a href="http://www.zhangligong.xyz/">FishLeap</a>.</strong>
        All rights reserved. 
</footer> 
 
<div>
  <strong>Copyright &copy; 2019-2020 <a href="http://www.zhangligong.xyz/">FishLeap</a>.</strong>
        All rights reserved. 
</div>

smile radiantly

发布了92 篇原创文章 · 获赞 4 · 访问量 3162

私信关注

Thymeleaf th:replace、th:insert、th:include的使用及区别

猜你喜欢