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

模板模块导入

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


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

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


  
  
  1. <body>
  2. ...
  3. <div th:include= "footer :: copy" > </div>
  4. </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来引用模块


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

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


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

th:include 和 th:replace的区别

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


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

引入界面:


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

结果是:


  
  
  1. <body>
  2. ...
  3. <div>
  4. &copy; 2011 The Good Thymes Virtual Grocery
  5. </div>
  6. <footer>
  7. &copy; 2011 The Good Thymes Virtual Grocery
  8. </footer>
  9. </body>

猜你喜欢

转载自blog.csdn.net/qq_22771739/article/details/82261883
th