Thymeleaf is a popular server-side Java template engine used to build dynamic web applications. One of its key features is its ability to work with fragments, which are reusable HTML templates that can be included in multiple pages. This can help reduce code duplication and make it easier to maintain your web application. In this blog, we’ll explore how to use fragments in Thymeleaf.
1. Create a Fragment
The first step is to create a fragment that we can reuse across multiple pages. A fragment is simply a small piece of HTML code that can be included in other HTML files. For example, we might want to create a header fragment that includes the logo and navigation menu for our website.
To create a fragment, we need to create an HTML file and define the fragment using the Thymeleaf th:fragment attribute. For example:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Header Fragment</title>
</head>
<body>
<header th:fragment="header">
<div class="logo">
<img src="logo.png" alt="Logo">
</div>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
In this example, we’ve defined a header fragment that includes a logo and navigation menu. We can reuse this fragment in other pages by including it using the th:replace attribute.
2. Include the Fragment in a Page
Once we’ve created our fragment, we can include it in other HTML files using the th:replace attribute. For example:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>My Website</title>
</head>
<body>
<div th:replace="fragments/header :: header"></div>
<main>
<h1>Welcome to My Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</main>
</body>
</html>
In this example, we’ve included our header fragment using the th:replace attribute. The fragments/header part of the attribute specifies the file where the fragment is defined, and the :: header part specifies the name of the fragment we want to include. The result is that our header fragment will be included at the top of our page.
3. Pass Variables to a Fragment
Fragments can also accept variables, which can be useful if we want to reuse a fragment with different content on different pages. To pass variables to a fragment, we can use the th:with attribute. For example:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>My Website</title>
</head>
<body>
<div th:replace="fragments/header :: header" th:with="pageTitle='About Us'"></div>
<main>
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</main>
</body>
</html>
In this example, we’ve added a pageTitle variable to our header fragment using the th:with attribute. We’ve set the value of the pageTitle variable to 'About Us'. In our header fragment, we can now use this variable to dynamically set the title of the page. For example:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${pageTitle}">Default Page Title</title>
</head>
<body>
<header th:fragment="header">
<div class="logo">
<img src="logo.png" alt="Logo">
</div>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
In this example, we’ve used the Thymeleaf th:text attribute to set the text of the title tag to the value of the pageTitle variable. If the pageTitle variable is not defined, the default text 'Default Page Title' will be used.
4. Use Layouts
Fragments are useful for reusing small pieces of HTML code across multiple pages, but for more complex web applications, we may want to use layouts. A layout is a template that defines the overall structure of a page, including the header, footer, and other common elements.
To use a layout in Thymeleaf, we can create a layout template that includes the common elements of our website, and then use fragments to define the content of each page. For example:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${pageTitle}">Default Page Title</title>
</head>
<body>
<div th:replace="fragments/header :: header"></div>
<div th:insert="~{content}"></div>
<div th:replace="fragments/footer :: footer"></div>
</body>
</html>
In this example, we’ve created a layout template that includes the header and footer fragments, and a placeholder for the content of each page using the th:insert attribute. We can now create new pages by defining a fragment that fills in the content placeholder, like this:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
th:include="layouts/default">
<div th:fragment="content">
<main>
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</main>
</div>
</html>
In this example, we’ve defined a new fragment that fills in the content placeholder of our layout template using the th:fragment attribute. We’ve also included our layout template using the th:include attribute. The result is a page that includes our header and footer fragments, as well as the content of our new page.
Conclusion
Fragments are a powerful feature of the Thymeleaf template engine that can help reduce code duplication and make it easier to maintain your web application. By creating reusable HTML templates, you can save time and make your code more modular and flexible. Whether you’re building a small website or a complex web application, fragments and layouts are a great way to streamline your development process and create more maintainable code.
