How do you implement template layouts in Thymeleaf?

Table of Contents

• Introduction
• Using Thymeleaf Layouts
  • 1. Thymeleaf Layout Dialect
  • 2. Create a Layout Template
    • Example: layout.html
  • 3. Create Page Templates That Extend the Layout
    • Example: index.html
  • 4. Using Fragments in Layouts
    • Example: Using Fragments in layout.html
  • 5. Example: About Page Template Using Layouts
• Conclusion

Introduction

Thymeleaf provides a powerful way to create reusable templates using layout inheritance, which helps in building consistent and maintainable web pages. Template layouts allow you to define common elements (such as headers, footers, and navigation menus) in a base template and extend or include them in other templates. This helps in reducing redundancy and maintaining consistency across your web pages.

In this guide, we’ll show you how to implement template layouts in Thymeleaf and how to use Thymeleaf’s layout dialect for efficient template reuse in Spring Boot applications.

Using Thymeleaf Layouts

1. Thymeleaf Layout Dialect

To implement layouts in Thymeleaf, we can use the Thymeleaf Layout Dialect, an extension that allows for better management of reusable layouts. This dialect introduces additional syntax to include layout fragments and extend templates.

To get started, you need to add the Thymeleaf Layout Dialect dependency to your project. If you're using Maven, include the following in your pom.xml:

This will allow you to use the layout-specific features in Thymeleaf.

2. Create a Layout Template

A layout template is a common template where you define the header, footer, and other shared elements of your web pages. You can define a layout template that all pages in your application can inherit from.

Create a file called layout.html in the src/main/resources/templates folder. This will serve as the base layout for all pages.

Example: layout.html

In this layout:

• The <header> and <footer> are static parts that will be included in all pages.
• The content of each page is inserted into the div#content using Thymeleaf's th:replace attribute. The body placeholder will be replaced with the content from specific pages.

3. Create Page Templates That Extend the Layout

Now that you have a layout template, you can create individual pages that extend the layout and define their unique content.

For example, let’s create an index.html file for the homepage.

Example: index.html

• The th:replace="~{layout :: layout}" attribute tells Thymeleaf to include the layout.html file and use the body fragment as the page's content.
• The content inside <div th:fragment="body"> will replace the body placeholder defined in the layout.

This allows you to reuse the header, footer, and any other common structure across multiple pages by only defining the unique content for each page.

4. Using Fragments in Layouts

In Thymeleaf, a fragment is a reusable part of a template. You can define small pieces of reusable HTML (such as headers, footers, or sidebars) within a layout and include them in your pages.

Example: Using Fragments in layout.html

Let’s add a fragment for the navigation menu to make it reusable across different templates.

The navigation fragment can now be included in any other page by using the th:replace attribute:

By defining common parts as fragments, you avoid repetition and ensure consistency across your application.

5. Example: About Page Template Using Layouts

Let’s create an about.html page that uses the same layout as index.html, but with different content.

• The th:replace="~{layout :: layout}" includes the layout, and the content in the body fragment will replace the body section of the layout.
• This allows the about.html page to reuse the header, footer, and navigation from the layout.html.

Conclusion

Using template layouts in Thymeleaf allows you to create consistent and reusable web pages in your Spring Boot applications. By defining a common layout and using Thymeleaf’s layout dialect, fragments, and inheritance, you can easily structure your application’s views with shared headers, footers, and other common components. This approach not only reduces duplication but also makes maintaining the application much easier as you only need to update shared content in one place.