Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use Thymeleaf template fragment technology". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use Thymeleaf template fragment technology.

Many pages in the system have a lot of common 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 fragment" content.

I. definition of template fragments

It can be a html tag, or you can use the th:fragment attribute to define a fragment.

2. Citation fragments

1. Insert fragments using the th:insert attribute. In addition, you can insert fragments using th:replace and th:include.

Syntax:

(1) th:insert= "~ {template name}"

Insert the entire content of the template

(2) th:insert= "~ {template name:: selector}"

Inserts the specified content of the template, and the selector can correspond to the name defined by th:fragment, or you can select partial fragments using syntax similar to JQuery selector.

Fragment selector syntax:

A) / name, select the node whose name is name among the child nodes

B) / / name, select the node whose name is name among all the child nodes

C) name [@ attr='value'] Select the node whose name is name and the attribute value is value. If there are multiple attributes, you can connect with and.

D) / / name [@ attr='value'] [index] Select the node whose name is name and the attribute value is value, and specify the node index

Simplified syntax for fragment selector:

A) the @ symbol can be omitted

B) use the # 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 equals div [class = 'class']

D) use% instead of fragment reference. If the fragment node uses th:ref or th:fragment, you can use div%ref to select the node.

(3) th:insert= "~ {:: selector}"

If you do not specify a template name, the selector acts on the current page

(4) th:insert= "~ {this:: selector}"

Similar to "~ {:: selector}", except that when the fragment cannot be found on this page, it will look for the fragment in the template processed by the process method of the template engine.

2. The difference between th:insert, th:replace and th:include

The tag inserted in the template in the current tag of th:insert

Th:replace replaces the current tag with the tag in the template

Insert the tag content of the template into the tag before th:include

3. Template fragments also support incoming variables.

Reference syntax: ~ {footer.html:: name (parameter)

4. Fragment block reference

You can use th:block to define fragment blocks, and th:block is an attribute container in which you can add any th attribute.

For example, the loop body of a table usually uses th:each in tr, or it can be rewritten with th:block.

5. Delete the template

Delete the template using th:remove, with the attribute value:

All: deletes the current node, including child nodes

Body: deletes all children of the current node

Tag: deletes the current node, excluding child nodes

All-but-first: delete everything except the first child node under the current node

None: do nothing

III. Examples of use

Development environment: IntelliJ IDEA 2019.2.2

Spring Boot version: 2.1.8

Create a new Spring Boot project named demo.

1 、 pom.xml

Join Thymeleaf dependency

Org.springframework.boot spring-boot-starter-thymeleaf

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;@Controllerpublic class TestController {@ RequestMapping ("/") public String test () {return "test";}}

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

Frag1frag2footer1 footer2 footer3 footer4

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

Titleth:insert reference snippet references the entire content of the specified template snippet references the snippet reference of this page the difference between frag3th:replace, th:include and th:insert partial usage of fragment selector contains variable fragment reference fragment block reference delete template

After IDEA runs, the browser visits http://localhost:8080 to view the source code of the web page. The result is as follows:

Titleth:insert reference snippet references the entire content of the specified template frag1frag2footer1 footer2footer3footer4 hello,null references snippets of the specified template frag1 references fragments of this page frag3frag3frag3th:replace, th:include and th:insert partial use of frag1frag1 fragment selector footer1footer2footer3footer4footer3footer3footer4frag1 contains variable fragment reference hello Xiaoming fragment block reference 0 1 delete template 0 to this I believe you have a deeper understanding of "how to use Thymeleaf template fragment technology". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.