SpringBoot 16: template engine Thymeleaf extracts public pages

Introduction

1. Extract pages

Assuming footer.html, the syntax is th:fragment="copy" , where copy is the name of the fragment and footer is the name of the template, which indicates the following code

<footer th:fragment="copy"> 
    &copy; 2011 The Good Thymes Virtual Grocery 
</footer>

2. Introduce public fragments

There are differences in the three ways of introduction ( th:replace is generally used, which will not affect the insertion effect )

th:insert="~{template name :: fragment name}": Insert the entire public fragment into the declared element (usually a div declaration , which is inserted into the div)
th:replace="~{template name :: fragment name}" : Replace the elements introduced by the declaration with common fragment elements
th:include="~{template name :: fragment name}": replace the content of the introduced fragment with a public fragment

Development: directly writing th:replace="template name :: fragment name" is also supported and convenient. But when writing [[]] in the line, you must use ~{template name:: fragment name}

Below is the demo in the template engine

1. The extracted page footer.html, which means that the template name is footer and the fragment name is footer

<footer th:fragment="copy">
     &copy; 2011 The Good Thymes Virtual Grocery 
</footer>

2. In test.html, use three ways to introduce the extracted page footer.html fragments

<body>
     ... 

    <div th:insert="footer :: copy"></div> 

    <div th:replace="footer :: copy"></div> 

    <div th:include="footer :: copy"></div> 
</body>

3. The final introduction effect

<body>
  ...
  <div>
    <footer>
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </div>
  
  <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
  </footer>
  
  <div> &copy; 2011 The Good Thymes Virtual Grocery</div>
</body>

Effect description:

1. When th:insert is introduced, the <footer> insert fragment tag is inserted directly into the <div> tag used to declare the insertion (use div to include the footer)

2. When th:replace is introduced, it is declared that the <div> used for insertion is not effective , and only the inserted fragment is inserted (div has no effect)

3. When th:replace is introduced, the div is there, the content is there, but the footer tag of the fragment is gone, just replace the footer with div