In -depth understanding of the layout and template reuse skills in the Thymeleaf framework
In -depth understanding of the layout and template reuse skills in the Thymeleaf framework
Thymeleaf is a Java server -side template engine, which is widely used in Web development.It provides rich features, including layout and template reuse techniques, so that we can more effectively build maintenance and scalable web applications.
1. Layout
Layout refers to the same parts in multiple pages in Web applications.Thymeleaf provides the layout function, so that we can abstract these shared parts into a layout template and make reuse between multiple pages.
First, we need to create a layout template.This layout template usually contains the public part of the head, tail, navigation bar of the website.In Thymeleaf, we can use template fragments to define these public parts.For example, the following is an example of a typical layout template:
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<Title> Website Title </Title>
</head>
<body>
<header>
<!-title area->
<h1> website title </h1>
</header>
<nav>
<!-Navigation bar->
<ul>
<li> <a href="#"> 链 链 链 链 </a> </li>
<li> <a href="#"> 链 链 链 2 </a> </li>
<li> <a href="#"> 链 链 3 </a> </li>
</ul>
</nav>
<!-Specific content area, defined through Th: Fragment->
<section th:fragment="content">
<!-The default content->
</section>
<footer>
<!-Copyright information->
<p> All rights reserved 2 2022 </p>
</footer>
</body>
</html>
In the specific page, we can use the Thymeleaf's Th: Replace instruction to introduce the layout template and specify the content you need to insert through Th: Fragment.The following is an example of a page:
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<Title> Page Title </Title>
</head>
<body>
<!-Introducing layout template->
<div th:replace="layout :: content">
<!-Insert specific content->
<h2> page title </h2>
<p> Page content </p>
</div>
</body>
</html>
In this way, we can realize the flexible reuse of the page content and abstract the shared part into the layout template.
2. Template reuse
In addition to layout, Thymeleaf also provides other template reuse techniques.These techniques can help us avoid repeatedly writing the same code and improve code reuse.
2.1. Introduce other templates
We can use Thymeleaf's Th: Insert or Th: Replace instruction to introduce other templates to achieve code reuse.Th: Insert instructions insert the content of the target template to the current position, and the Th: REPLACE instruction will completely replace the current position.
The following is an example, showing how to introduce other templates:
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<Title> Page Title </Title>
</head>
<body>
<!-Introduce public template->
<div th:insert="common :: header"></div>
<h2> page title </h2>
<p> Page content </p>
<!-Introduce public template->
<div th:replace="common :: footer"></div>
</body>
</html>
2.2. Parameter transmission
Thymeleaf also supports the template through parameters.This allows us to dynamically customize the behavior of templates according to different needs.
The following is an example, showing how to reuse the template through parameter transmission:
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<Title> Page Title </Title>
</head>
<body>
<!-Introduce public templates and pass parameters->
<div th:replace="common :: message(message='Hello, Thymeleaf!')"></div>
<h2> page title </h2>
<p> Page content </p>
<!-Introduce public templates and pass parameters->
<div th:replace="common :: message(message='Goodbye, Thymeleaf!')"></div>
</body>
</html>
In public templates, we can declare parameters through the Th: With instructions and use the parameter in the template.The following is an example of how to use parameters:
html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<Title> Public Templates </Title>
</head>
<body>
<div th:fragment="message" th:with="message">
<p th:text="${message}"></p>
</div>
</body>
</html>
Through the above examples, we can flexibly reuse the template and pass parameters according to actual needs.
Summarize:
The layout and template reuse of the Thymeleaf framework played a key role in Web development.By layout, we can abstract the shared part into the layout template to improve the replication and maintenance of the code; and through the template reuse technique, we can further improve the replication of the code and dynamically customize the template on the template as needed.Behavior.By in-depth understanding and flexible application of these techniques, we can develop and maintain the web application of Thymeleaf-Based more efficiently.
