How to standardize header footer in Thymeleaf

Overview

How to standardize the header and footer common to each html page in a web application created using Spring Boot and Thymeleaf

environment

sample

Directory structure

I will omit the Java side, but the layout of the template and static content looks like this.

dir


src/main/resources
├── static
│   ├── css
│   │   ├── common.css
│   │   └── top.css
│   └── js
│       └── datepicker.js
└── templates
    ├── common.html
    └── index.html

When Spring Boot refers to CSS and JS files from HTML under templates, Since static is the root directory, it is configured like this.

Create common.html for common parts

common.html


<html xmlns:th="http://www.thymeleaf.org">
<!-- (1)Fragment the head you want to share-->
<head th:fragment="meta_header(title,links,scripts)">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- (2)CSS to read in common/JS -->
    <link rel="stylesheet" href="/css/common.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- (3)Title format-->
    <title th:text="${title}+' | sample app'">Each page title| sample app</title>

    <!-- (4)What is read uniquely to each view-->
    <th:block th:replace="${links} ?: _" />
    <th:block th:replace="${scripts} ?: _" />
</head>
<body>
    <!-- (5)Fragment the parts you want to standardize in the body-->
    <header th:fragment="header">
        <h1><a th:href="@{'/'}">sample app</a></h1>
    </header>
</body>
</html>

Commentary

(1) Since the fragment name can take arguments, set title, links, scripts as arguments. (2) Describe the CSS / JS that is read in common on each page. (3) Set the page title format to th: text =" " using the argument title (4) Insert the CSS / JS read on each page using th: replace By using the unprocessed token (?: _), If $ {links} is null, then th: block itself is absent. (5) If there is something you want to make common in the body, use th: fragment to make it into a part.

Call on each html side

index.html


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- (1)Replace with common header-->
<head th:replace="common :: meta_header('top',~{::link},~{::script})">
    <!-- (2)CSS to load unique to this page/JS -->
    <link rel="stylesheet" th:href="@{/css/top.css}" />
    <script type="text/javascript" th:src="@{/js/datepicker.js}"></script>
</head>
<body>
    <!-- (3)Call common parts-->
    <div th:replace="common :: header"></div>
    <h2>top page</h2>
</body>

Commentary

(1) Replace header with the one defined in common.html by passing an argument. (2) Define a file to be read uniquely to this page (ʻindex.htmlin this sample) (3) Replace common parts withth: replace =" page name :: fragment name "`

reference

How to standardize header / footer in Spring Boot Tutorial: Using Thymeleaf

Recommended Posts

How to standardize header footer in Thymeleaf
How to embed JavaScript variables in HTML with Thymeleaf
Refer to enum in Thymeleaf
[Rails] How to define macros in Rspec and standardize processing
How to use Lombok in Spring
How to find May'n in XPath
How to hide scrollbars in WebView
How to iterate infinitely in Ruby
How to run Ant in Gradle
How to master programming in 3 months
How to learn JAVA in 7 days
How to get parameters in Spark
How to install Bootstrap in Ruby
How to use InjectorHolder in OpenAM
How to introduce jQuery in Rails 6
How to use classes in Java?
How to name variables in Java
How to set Lombok in Eclipse
How to concatenate strings in java
How to install Swiper in Rails
[swift5] How to specify color in hexadecimal
How to implement date calculation in Java
How to implement Kalman filter in Java
Multilingual Locale in Java How to use Locale
How to change app name in rails
How to use custom helpers in rails
How to reflect seeds.rb in production environment
How to use named volume in docker-compose.yml
How to filter JUnit Test in Gradle
How to insert a video in Rails
How to include Spring Tool in Eclipse 4.6.3?
How to add jar file in ScalaIDE
How to do base conversion in Java
[Swift] How to fix Label in UIPickerView
How to have params in link_to method
How to use Docker in VSCode DevContainer
How to use MySQL in Rails tutorial
How to fix system date in JUnit
How to implement coding conventions in Java
How to embed Janus Graph in Java
[rails] How to configure routing in resources
How to map tsrange type in Hibernate
How to get the date in java
How to implement ranking functionality in Rails
How to use environment variables in RubyOnRails
How to implement asynchronous processing in Outsystems
How to publish a library in jCenter
How to specify id attribute in JSF
Understand in 5 minutes !! How to use Docker
How to overwrite Firebase data in Swift
How to use credentials.yml.enc introduced in Rails 5.2
How to assemble JSON directly in Jackson
How to execute multiple commands in docker-compose.yml
[For beginners] How to debug in Eclipse
How to use ExpandableListView in Android Studio
How to display error messages in Japanese
Summary of how to select elements in Selenium
How to get keycloak credentials in interceptor class
[JavaFX] How to write Eclipse permissions in build.gradle
(Memo) How to solve dummy output in Ubuntu 20.04
How to check the logs in the Docker container