一つのウェブ画面にはヘッダー、フッターなど共通で使っているところがあります。
それらが画面ごとに書かれていて、ヘッダーを修正する場合、全ての画面を触らなあかんですね。
そんな面倒くさい作業を避けるために、Thymeleaf Layout Dialectを使って画面レイアウトの共通化をやってみます！

イメージ図

build.gradleにThymeleaf Layout Dialectの依存関係を追加

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf:2.6.2'
	implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.5.3'
}

Thymeleaf Layout Dialectの他のバージョンはここで確認

レイアウト設定

beanの登録

import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Bean;
import nz.net.ultraq.thymeleaf.LayoutDialect;

@Configuration
public class LayOutConfig {
	
	// thymeleaf layout
	@Bean
	public LayoutDialect layoutDialect() {
	    return new LayoutDialect();
	}
}

layout-dialectを使うためにはbeanの登録が必要です。

ディレクトリ構成

templates
	ㄴfragments
	|	ㄴconfig.html
	|	ㄴfooter.html
    |	ㄴheader.html
    ㄴlayout
	|	ㄴlayout.html
	ㄴindex.html

*フォルダ名やファイル名はご自由につけてください。その場合、layout.htmlで各fragmentのパスを書くときに注意してください。

config.html

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <th:block th:fragment="config">
        <head>
            <!-- メタデータ、共通で使用するcssやjsファイルなどを宣言 -->
        </head>
    </th:block>
</html>

・th:fragment=""にfragment名を書きます。

header.html

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <th:block th:fragment="header">
    <!-- ヘッダーの内容を記入 -->
  </th:block>
</html>

footer.html

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <th:block th:fragment="footer">
    <!-- フッターの内容を記入 -->
  </th:block>
</html>

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="~{layout/layout}">
  <th:block layout:fragment="content">
    <!-- メイン内容を記入 -->
  </th:block>  
</html>

→layout:decorator="~{layout/layout}"：layout.htmlのパス(.htmlは省略)

layout.html

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <th:block th:replace="fragments/config :: config"></th:block>
  <body>
    <div>
      <th:block th:replace="fragments/header :: header"></th:block>
      <th:block layout:fragment="content"></th:block>
      <th:block th:replace="fragments/footer :: footer"></th:block>
    </div>
  </body>
</html>

→<th:block th:replace="fragmentのパス(.htmlは省略) :: fragment名"></th:block>
→<th:block layout:fragment="メイン内容のfragment名"></th:block>

結果画面

おわり

詳細のコードはここをクリック