PS: the original text was first published on wechat official account: Jingxing zhi (Jzman-blog)

The previous articles have experimented with interface development, Thymeleaf templates, and their common syntax. Read the previous articles before reading this:

  • Spring Boot series to develop an interface
  • Spring Boot series Thymeleaf template introduction
  • Spring Boot series Thymeleaf common syntax

Thymeleaf template layout is mainly to better divide the front-end page, mainly through Thymeleaf related syntax to the front-end page layout, the main content is as follows:

  1. Reference template fragment
  2. Fragment expression syntax
  3. Parameterized template fragments
  4. Removing template fragments
  5. Template layout inheritance

Reference template fragment

Using th: Fragment to define layout fragments that can be referenced by other pages, define template fragments in foter.html as follows:

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Footer</title>
</head>
<body>
<! Define layout fragments -->
<div th:fragment="copy">
    &copy;2020 to practice</div>
</body>
</html>
Copy the code

A fragment named copy is defined above, which can be moved into template fragments using th: Insert, th:replace, and th:include, which is not recommended after Thymeleaf 3.0, Introduce the template fragment in home.html as follows:

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Template Layout.</title>
</head>
<body>
    <! -- Importing template fragments -->
    <div th:insert="~{footer::copy}"></div>
</body>
</html>
Copy the code

Run the project, check http://localhost:8080/home, reference is as follows:

© 2020To practice the ©2020To practice theCopy the code

Let’s look at the differences between th:insert, th:replace, and th:include.

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Template Layout.</title>
</head>
<body>
    <! --th:insert, th:replace, th:include
    <p>--th:insert, th:replace, th:include</p>
    <! Insert template fragment directly -->
    <div id="insert" th:insert="~{footer::copy}">insert</div>
    <! -- Replace the current segment directly -->
    <div id="replace" th:replace="~{footer::copy}">replace</div>
    <! Insert the contents of the specified fragment directly into the current fragment.
    <div id="include" th:include="~{footer::copy}">include</div>
</body>
</html>
Copy the code

Insert, replace, and include are the three divs in the above code. After running the project, check the source code in the browser as follows:

<! -... -->

<! --th:insert, th:replace, th:include
<p>--th:insert, th:replace, th:include</p>
<div id="insert">
	<div>
		&copy;2020 to practice</div>
</div>
<div>
	&copy;2020 to practice</div>
<div id="include">
	&copy;2020 to practice</div>
<! -... -->
Copy the code

The differences among the three are as follows:

  • th:insert: Insert template fragment directly;
  • th:replace: Replaces the current fragment directly;
  • th:include: Inserts the contents of the specified fragment directly into the current fragment.

Fragment expression syntax

The template mainly uses fragment expressions, which have the following syntax:

  • ~ {templatename: : the selector}: imports the template fragment named by the specified template.
  • ~ {templatename}: imports all fragments of the specified template.
  • ~ {: : the selector}With:~ {this: : the selector}Imports the template fragment with the name specified by the current template.

Where templatename represents the templatename, such as footer, and selector represents the fragment name, such as copy.

A selector can also be an ID selector, a class selector, and a tag, so you can use the corresponding template fragment without defining th:fragment, as follows:

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Footer</title>
</head>
<body>
    <div id="head">
        <p>Use the fragment expression --id without defining th:fragment</p>
    </div>
    <div class="head">
        <p>Use the fragment expression --class without defining th:fragment</p>
    </div>
    <div >
        <span>Use the fragment expression --span without defining th:fragment</span>
    </div>
</body>
</html>
Copy the code

You can use the corresponding code snippet above in another template as follows:

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Template Layout.</title>
</head>
<body>
    <! Use fragment expressions without th:fragment expressions -->
    <div th:insert="~{footer::#head}"></div>
    <div th:insert="~{footer::.head}"></div>
    <div th:insert="~{footer::span}"></div>
</body>
</html>
Copy the code

Run the project with the following results:

Use fragment expressions without th:fragment defined --id use fragment expressions without th:fragment defined --classIn the absence of definitionth:fragmentIn this case, fragment expressions are usedspan
Copy the code

Parameterized template fragments

When using th:fragment to define template fragments, you can add parameters as follows:

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Footer</title>
</head>
<body>
    <! Add parameters to template fragment -->
    <div th:fragment="frag(name)" th:assert="${! #strings.isEmpty(name)}">
        <p th:text=${name}" ${name}">Default</p>
    </div>
</body>
</html>
Copy the code

Then reference the above fragment in the corresponding page to pass the corresponding parameters, as follows:

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Template Layout.</title>
</head>
<body>
    <! -- Parameterized template fragment -->
    <div th:insert="~{footer::frag(${gzh})}"></div>
    <! -- If there are multiple arguments, the order can be changed -->
    <div th:insert="~{footer::frag(name=${gzh})}"></div>
</body>
</html>
Copy the code

GZH = = = = = = = = = = = = = = = =

Official account name: Gongxingzhi Official account name: GongxingzhiCopy the code

You can use the th: Assert attribute in the template fragment to validate arguments. If the expression in th: Assert is true, the execution will continue. Otherwise, an exception will be thrown.

Removing template fragments

The template fragment is removed using the th:remove property, which can be set to the following values:

  • All: Removes the current label and all sublabels.
  • Body: do not remove the tag, only remove the corresponding child tag;
  • Tag: Only the tag is removed, but its sub-tags are not deleted.
  • All-but-first: Removes all children of the tag except the first.
  • None: No removal operation is performed.

The specific usage mode is as follows:

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <th>NAME</th>
        <th>PRICE</th>
        <th>COMMENT</th>
    </tr>
    <! Remove the tag and all subtags.
    <tr th:remove="all">
        <td>A</td>
        <td>1</td>
        <td>AA</td>
    </tr>
    <! -- Remove the tag, only remove the child tag -->
    <tr th:remove="body">
        <td>B</td>
        <td>2</td>
        <td>BB</td>
    </tr>
    <! Select * from tag; select * from tag;
    <tr th:remove="tag">
        <td>C</td>
        <td>3</td>
        <td>CC</td>
    </tr>
    <! Remove all children of the tag except the first.
    <tr th:remove="all-but-first">
        <td>D</td>
        <td>4</td>
        <td>DD</td>
    </tr>
    <! -- No remove operation -->
    <tr th:remove="none">
        <td>E</td>
        <td>5</td>
        <td>EE</td>
    </tr>
</table>
</body>
</html>
Copy the code

Focus on th:remove property setting different values after running effect, equivalent to the following page:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <th>NAME</th>
        <th>PRICE</th>
        <th>COMMENT</th>
    </tr>
    <! Remove the tag and all subtags.
    
    <! -- Remove the tag, only remove the child tag -->
    <tr></tr>
    <! Select * from tag; select * from tag;
        <td>C</td>
        <td>3</td>
        <td>CC</td>
    <! Remove all children of the tag except the first.
    <tr>
        <td>D</td>
    </tr>
    <! -- No remove operation -->
    <tr>
        <td>E</td>
        <td>5</td>
        <td>EE</td>
    </tr>
</table>
</body>
</html>
Copy the code

Template layout inheritance

Template layout inheritance uses th:fragment and th:replace. The following example shows how to write template layout inheritance. Define the page to inherit as follows:

<! DOCTYPEhtml>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:replace="${title}">Layout Title</title>
</head>
<body>
<h1>Layout H1</h1>
<div th:replace="${content}">
    <p>Layout content</p>
</div>
<footer>
    Layout footer
</footer>
</body>
</html>
Copy the code

A file that inherits the above page will replace the above title and content values and will inherit the above page as follows:

<! DOCTYPEhtml>
<html th:replace="~{base :: layout(~{::title}, ~{::section})}" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Page Title</title>
</head>
<body>
<section>
    <p>Page content</p>
    <div>Included on page</div>
</section>
</body>
</html>
Copy the code

After running, the effect is as follows:

Layout H1

Page content

Included on page
Layout footer
Copy the code

Can pay attention to the public number [practice] exchange learning, reply keyword [Spring Boot] to obtain the corresponding case source link.