SpringBoot 共通レイアウトを作成(Thymeleaf)

Spring BootのThymeleafで共通の部分レイアウトを作成するサンプルです。
共通のヘッダーやフッターとして使えます。(確認環境:Spring Boot 2.5,JDK 11,STS 4)

目次 共通の部分レイアウトを作成する
  共通の部分レイアウト(partial1.html)
  共通部品を呼び出す側のビュー(index.html)
  コントローラ(MainController.java)
  実行結果
pom.xml

共通の部分レイアウトを作成する

src/main/resourcesのtemplatesのtest1フォルダ配下に2つのファイルがあります。

partial1.htmlには、各画面から呼ばれる対象の箇所(共通部品)があります。
ビューのヘッダー、フッターとして使用します。

index.htmlは共通部品を呼ぶ側です。

githubにコードがあります。
https://github.com/ut23405/springboot/tree/master/springboot-common-layout

 

共通の部分レイアウト(partial1.html)

th:fragment="名称"

共通部品として呼ばれる側のpartial1.htmlファイルのコードです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <header th:fragment="header1">
    <p style="background: yellow">ヘッダーです</p>
  </header>
  <footer th:fragment="footer1">
    <p style="background: yellow">フッターです</p>
  </footer>
</html>

th:fragmentは、呼び出す側からの対象になります。
fragment(フラグメント)は断片という意味です。

 

共通部品を呼び出す側のビュー(index.html)

th:replace="場所::名称"

共通部品側を呼び出す側のindex.htmlのコードです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>check</title>
  </head>
  <body>
    <div th:replace="test1/partial1::header1"></div>
    <p>テスト</p>
    <div th:replace="test1/partial1::footer1"></div>
  </body>
</html>

th:replaceで取り込む対象を指定します。
test1/partial1は、フォルダ名+ファイル名です。

 

コントローラ(MainController.java)

ビューを表示します。

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/test1")
public class MainController {

    @GetMapping()
	public String index()  {
		return "test1/index";
	}
}

 

実行結果

http://localhost:8080/test1/でアクセスします。

上記コードを実行した結果です。

ビューの上下の部分に共通の部分レイアウト(partial1.htmlファイル)が表示されています。

 

pom.xml

必要なライブラリです。

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

関連の記事

SpringBoot フォームで入力チェック(バリデーション)
SpringBoot DI(依存性の注入)のサンプル
SpringBoot AOPのサンプル

△上に戻る