Thymeleaf page layout
After you are familiar with the grammar and expressions of Thymeleaf, it will be more handy to develop later. Next, take a good look at how Thymeleaf implements a complete web system page layout.
1. Introduce code snippets
Often times in templates you want to include content from other template pages, such as footers, headers, menus, etc. To do this, Thymeleaf provides th:fragmentproperties. The following demonstrates how to introduce code snippets by adding a standard copyright footer to the page.
Step 01 Define the copyright footer code snippet.
Create a copyright template page footer.html in the templates directory, the sample code is as follows:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copyright">
© 2020 The Thymeleaf footer
</div>
</body>
</html>
In the above example, we created the copyright page footer.html and defined a code fragment called copyright using the th:fragment attribute.
Step 02 introduces the code snippet template.
Create a normal template page layout.html. Use th:insertor th:replace attribute to import the previously defined copyright copyright page, the sample code is as follows:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<h1>Thymeleaf模板引擎</h1>
<h3>页面布局</h3>
<div th:insert="~{footer :: copyright}"></div>
</body>
</html>
In the above example, the previously defined copyright code fragment in footer.html is imported through th:insert in layout.html, “～{footer :: copyright}”which is the copyright fragment in the footer.html template introduced in the current template page.
Step 03 starts verification.
After starting the project, enter the address http://localhost:8080/layout in the browser to verify whether the homepage can normally import the footer.html code fragment, as shown in the figure.
The layout.html page successfully includes the copyright information of the footer page in the home page through the th:insert attribute.
2. Fragment expression grammar specification
Thymeleaf fragment expressions are very practical and can realize the reuse of template pages, avoiding the need to modify multiple pages for the same content.
2.1 Tag selector
The syntax of a fragment expression is very simple, and its core is a markup selector, which is defined by the underlying AttoParser parsing library, similar to an XPath expression or a CSS selector. Fragment expressions have the following 3 different formats:
1) ～{templatename::selector}：Contains two parameters, templatename and selector, where templatename is the name of the page template, and selector is the code fragment defined in the template. For example, in the above example, “～{footer :: copyright}”the copyright fragment in the footer.html template is introduced into the current template page.
2) ～{templatename}：Bring in the full template named templatename.
3) ～{::selector}Or ～{this::selector}：Thymeleaf supports inserting a fragment from the same template. If it cannot be found on the current template, it will traverse to the initially processed template until the selector matches the corresponding template.
In addition, the template name and selector of the tag selector can also contain other expression syntax such as conditional judgment or ternary operation, such as:
<div th:insert="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>
By judging whether the background user is an administrator or not, the corresponding code fragment is introduced to realize the page distinction between administrators and ordinary users.
2.2 Reference common templates
Markup selectors are very powerful and can contain fragments that don't use any th:fragment attributes, or even markup code from a different application that doesn't know Thymeleaf at all:
<div id="copy-section">
© 2023 The Thymeleaf footer
</div>
We can use the fragment above by simply referencing it via its id attribute, similar to CSS selectors:
<div th:insert="~{footer :: #copy-section}"></div>
2.3 The difference between th:insert, th:replace and th:include
The functions of th:insert, th:replace and th:include are basically similar, and the differences between the three are as follows:
- th:insert is the simplest, it simply inserts the specified fragment as the body of its host tag.
- th:replace actually replaces its host tag with the specified fragment.
- th:include is similar to th:insert, but it does not insert a fragment, only the content of the fragment.
3. Parameterizable Fragments
Thymeleaf supports specifying a set of parameters in the fragment defined by th:fragment, which makes the template fragment more like a repeatable function. The display of the template is controlled by different parameters, so as to achieve the effect of template sharing.
The fragment defined below with th:fragment specifies a set of parameters:
<div th:fragment="frag(onevar, twovar)">
<p th:text="${onevar} + '-' + ${twovar}">...</p>
</div>
The defined frag fragment contains two parameters, and the type of the parameters does not need to be defined.
When calling this fragment with th:insert or th:replace, you need to pass in two parameters:
<div th:replace="::frag (${value1},${value2})">...</div>
<div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>
The parameter passing of the fragment is similar to the function call, and the page display is controlled through the parameters passed in.
Actual combat: Realize the overall layout of the page
The overall layout of the general business processing system page is basically fixed. The commonly used frame mode divides the page into pages such as the head, the left menu bar, the tail and the middle display area. We can use the code snippet function of Thymeleaf to realize the overall layout of the application system page.
The following example demonstrates how Thymeleaf implements the overall layout of the page.
Step 01 Create new regional template pages such as footer.html, header.html, and left.html under the templates/layout directory.
The content of footer.html is as follows:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>footer</title>
</head>
<body>
<footer th:fragment="footer">
<div style="position: fixed; bottom: 0px; background-color: green; width:100%">
<h1 style="text-align:center">我是底部</h1>
</div>
</footer>
</body>
</html>
The content of left.html is as follows:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<left th:fragment="left">
<div style="background-color: red; width:200px;height: 80vh">
<h1 style="margin: 0;">我是左侧</h1>
</div>
</left>
</body>
</html>
The content of header.html is as follows:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>header</title>
</head>
<body>
<header th:fragment="header">
<div style="background-color: blue; height: 100px">
<h1 style="margin: 0;text-align: center;">我是头部</h1>
</div>
</header>
</body>
</html>
Step 02 Create a new index.html page in the templates directory with the following content:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Layout</title>
</head>
<body style="margin: 0px;">
<div th:replace="layout/header :: header"></div>
<div th:replace="layout/left :: left"></div>
<div th:replace="layout/footer :: footer"></div>
</body>
</html>
In the above example, we use the th:replace syntax in the index.html page to introduce the head, tail, and left of the website into the page.
Step 03 Add an access entry on the backend.
@RequestMapping("/index")
public String index() {
return "index";
}
Step 04 Run the verification.
After the first three steps are completed, visit the address http://localhost:8080/layout/index after startup, and you can see the page display effect as shown in the figure.
The index.html page has successfully introduced the head, tail and left side of the page to realize the overall layout of the page. In the actual project, index.html is used as the template. When any page uses this layout, only the middle content needs to be replaced.