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

Spring BootのThymeleafで共通の部分レイアウトを作成するサンプルです。

確認環境
・Spring Boot 2.3.3
・JDK 11.0.2
・STS 4.7.2

サンプル	共通の部分レイアウトを作成する
	実行結果

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

ビューのヘッダーやフッターになる共通の部分レイアウトを作成します。

１．src/main/resourcesのtemplatesフォルダのtest1フォルダ配下にpartial1.vbhtmlファイルを作成しました。

index.htmlでpartial1.htmlを読み込むようにします。

２．以下は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>

3行目は、headerタグです。th:fragmentで値(header1)を指定しています。
6行目は、footerタグです。th:fragmentで値(footer1)を指定しています。

ビュー

以下はビューのコードです。ファイル名は、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>

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

コントローラ

以下は、コントローラです。ビューを表示します。

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";
	}
}

実行結果

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

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