thymeleaf中th:include, th:insert, th:replace的区别

thymeleaf中th:include, th:insert, th:replace的区别

一、代码和介绍

  1. footer.html
<footer th:fragment="copy">
	需要copy的代码...
footer>
  1. 需要引用copy的页面,有三种方式
    • 【注意】这里的footer是页面的名称,不是标签的名称
<body>
    ...其他代码
    <div th:insert="footer :: copy">div> 
    <div th:replace="footer :: copy">div>
    <div th:include="footer :: copy">div>
body>
  1. 渲染后的效果

    1. th:insert

      • 相当于把需要引入的内容,标签+代码一同引如到div内部
      <div>
      	<footer th:fragment="copy">
      	需要copy的代码...
      	footer>
      div>
      
    2. th:replace

      • th:replace是在div标签上写的,渲染效果则是用footer把div替换掉
      <footer th:fragment="copy">
      	需要copy的代码...
      footer>
      
    3. th:include

      • 将footer标签体内的内容,放到div中进行渲染,div中原先有的内容也会被覆盖掉
      <div>
      	<footer th:fragment="copy">
      	需要copy的代码...
      	footer>
      div>
      

二、演示截图

  1. 代码截图

thymeleaf中th:include, th:insert, th:replace的区别_第1张图片

  1. chrome浏览器中渲染后的结果

thymeleaf中th:include, th:insert, th:replace的区别_第2张图片

你可能感兴趣的:(SpringBoot,html,前端,thymeleaf,java,SpringBoot)