Tymeleaf common syntax: template fragment

Posted by flexxall on Sat, 19 Oct 2019 22:46:14 +0200

Many pages in the system have a lot of public content, such as menus, footers, etc., which can be extracted and placed in a public page called "template fragment", and other pages can refer to this.
Template snippet content.

I. definition of template fragment

It can be an html tag or a fragment can be defined using the th:fragment attribute.

2. Quotation fragment

1. Use the th:insert attribute to insert a fragment. In addition, you can use th:replace and th:include to insert.
Syntax:
(1) th:insert = "~ {template name}"
Insert the entire content of the template

(2) th:insert = "~ {template name:: selector}"
Insert the specified content of the template. The selector can correspond to the name defined by th:fragment, or select some fragments with the syntax similar to JQuery selector.
Fragment selector syntax:
a) /name, select the node named name in the child node
b) //name, select the node with name in all child nodes
c) name[@attr='value '] select the node with name and attribute value. If there are multiple attributes available and connected
d) //name[@attr='value'][index] select the node with name and attribute value, and specify the node index.
Simplified syntax for fragment selectors:
a) the @ symbol can be omitted
b) use ා symbol instead of ID selection, for example, div ා ID is equivalent to div [id = ID ']
c) use. Symbol instead of class selection, for example, div.class is equal to div[class='class']
d) use% instead of fragment reference. If the fragment node uses th:ref or th:fragment, div%ref can be used to select the node.

(3) th:insert = "~ {:: selector}"
If no template name is specified, the selector acts on the current page

(4) th:insert="~{this:: selector}"
Similar to "~ {:: selector}", the difference is that when the fragment cannot be found on this page, the fragment will be found in the template processed by the process method of the template engine.

2. th:insert, th:replace, th:include
th:insert the tag in the template in the current tag
th:replace replace the current label as the label in the template
Before th:include, insert the label content of the template into the label

3. Template fragments also support incoming variables
Reference syntax: ~ {footer.html:: name (parameter)

4. Fragment block reference
You can use th:block to define a chunk. th:block is an attribute container in which you can add any th attribute.
For example, in the loop body of a table, th:each is generally used in tr, and th:block can also be used for rewriting.

5. Delete template
Use th:remove to delete the template, property value:
all: delete the current node, including child nodes
body: delete all children of the current node
tag: delete the current node, excluding child nodes
All but first: delete all except the first child under the current node
none: do nothing

III. examples

Development environment: IntelliJ idea February 2, 2019
Spring Boot version: 2.1.8

Create a new Spring Boot project named demo.

1,pom.xml
Join Thymeleaf dependency

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2,src/main/java/com/example/demo/TestController.java

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {
    @RequestMapping("/")
    public String test(){
        return "test";
    }
}

3,src/main/resources/templates/footer.html

<span th:fragment="frag1">frag1</span>
<span th:fragment="frag2">frag2</span>

<div id="footer1">footer1</div>

<div>
    <div id="footer2">footer2</div>
</div>

<div>
    <span class="content">footer3</span>
    <span class="content">footer4</span>
</div>

<div th:fragment="welcome(userName)">
    <span th:text="|hello,| + ${userName}"></span>
</div>

4,src/main/resources/templates/test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h4>th:insert Quote fragments</h4>
References the entire content of the specified template
<div th:insert="~{footer.html}"></div>
Refers to the fragment of the specified template
<div th:insert="~{footer.html::frag1}"></div>
Refer to the section of this page
<div th:insert="~{::frag3}"></div>
<div th:insert="~{this::frag3}"></div>
<div th:fragment="frag3">frag3</div>

<h4>th:replace,th:include And th:insert Difference</h4>
<div th:replace="~{footer.html::frag1}"></div>
<div th:include="~{footer.html::frag1}"></div>

<h4>Partial usage of fragment selector</h4>
<div th:insert="~{footer.html::/div[@id='footer1']}"></div>
<div th:insert="~{footer.html:://div#footer2}"></div>
<div th:insert="~{footer.html::span[class='content']}"></div>
<div th:insert="~{footer.html:://span[class='content'][0]}"></div>
<div th:insert="~{footer.html:://span.content}"></div>
<div th:insert="~{footer.html::span%frag1}"></div>

<h4>Fragment reference with variable</h4>
<div th:insert="~{footer.html::welcome('Xiao Ming')}"></div>

<h4>Fragment block reference</h4>
<table>
    <th:block th:each="number : ${#numbers.sequence(0,1)}">
        <tr>
            <td th:text="${number}"></td>
        </tr>
    </th:block>
</table>

<h4>Delete template</h4>
<table>
    <th:block th:each="number : ${#numbers.sequence(0,1)}">
        <tr th:remove="${number > 0} ? all : none">
            <td th:text="${number}"></td>
        </tr>
    </th:block>
</table>

</body>
</html>

After the IDEA runs, the browser accesses: http://localhost:8080, and views the source code of the web page. The results are as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h4>th:insert Quote fragments</h4>
References the entire content of the specified template
<div><span>frag1</span>
<span>frag2</span>

<div id="footer1">footer1</div>

<div>
    <div id="footer2">footer2</div>
</div>

<div>
    <span class="content">footer3</span>
    <span class="content">footer4</span>
</div>

<div>
    <span>hello,null</span>
</div></div>
Refers to the fragment of the specified template
<div><span>frag1</span></div>
Refer to the section of this page
<div><div>frag3</div></div>
<div><div>frag3</div></div>
<div>frag3</div>

<h4>th:replace,th:include And th:insert Difference</h4>
<span>frag1</span>
<div>frag1</div>

<h4>Partial usage of fragment selector</h4>
<div><div id="footer1">footer1</div></div>
<div><div id="footer2">footer2</div></div>
<div><span class="content">footer3</span><span class="content">footer4</span></div>
<div><span class="content">footer3</span></div>
<div><span class="content">footer3</span><span class="content">footer4</span></div>
<div><span>frag1</span></div>

<h4>Fragment reference with variable</h4>
<div><div>
    <span>hello,Xiao Ming</span>
</div></div>

<h4>Fragment block reference</h4>
<table>
    
        <tr>
            <td>0</td>
        </tr>
    
        <tr>
            <td>1</td>
        </tr>
    
</table>

<h4>Delete template</h4>
<table>
    
        <tr>
            <td>0</td>
        </tr>
    
        
    
</table>

</body>
</html>

Topics: Java Fragment Attribute Spring Thymeleaf

Programmer Think

Tymeleaf common syntax: template fragment

Hot Topics