Thymeleafのヘッダー/フッター共通化
Spring Boot+Thymeleafで複数のページのHTMLのヘッダー/フッター部分を共通テンプレート化する方法には、大きく分けて

があります。 簡単に言うと、複数のHTMLページの中に共通部分を埋め込むのが前者、 逆に共通のHTMLレイアウトの中に複数ページの固有部分を埋め込むのが後者です。 ここでは後者の Thymeleaf Layout Dialect を使う方法をまとめています。

[1] pom.xmlの追記
pom.xmlに Thymeleaf Layout Dialect を使用するための記述を追加します。 

<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

ちなみに build.gradle の場合はdependenciesに以下を追加します。 

dependencies {
    // (略)
    mplementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
    // (略)
}

[2] Controllerクラスを作る
サンプルなのでごくごく簡単に、/test にアクセスしたらテンプレート test.html を表示するだけのControllerクラスを作ります。 

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class LayoutTestController {
    @RequestMapping("/test")
    String action() {
        return "test";
    }
}

[3] テンプレート layout.html を作る
アプリケーションのルートから、src/main/resources/templates/layout/layout.html となる位置にレイアウトのテンプレートとなるファイルを作ります。 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>[[${title}]]</title>
<link href="/css/default.css" th:href="@{/css/default.css}" rel="stylesheet"></link>
</head>
<body>

<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr><td style="text-align:left; vertical-align:bottom; font-weight:bold;">[[${pgmid}]] | Ver 1.0</td></tr>
</table>

<table border="0" width="100%" bgcolor="0000ff">
<tr><td style="text-align:center; font-weight:bold; font-size:medium; color:#ffffff">[[${title}]]</td></tr>
</table>

<div layout:fragment="content"></div>

<form th:action="@{/backtomain}">
  <input type="submit" value="メインメニューに戻る" />
</form>
</body>
</html>

枠線をTABLE要素で記述しており、今の時代となってはあまり良いサンプルではありませんね…(-_-)
それはさておき、この 

<div layout:fragment="content"></div>

の部分が、後述の内容部分を差し込まれて置き換わります。
また、このテンプレートには ${pgmid} と ${title} というパラメータ(変数)が渡されています。渡す側の記述は後述します。
なお、このlayout.htmlの中に、さらにヘッダー、フッター、サイドバー部分…と個別にテンプレートを取り込む記述も可能ですが、 ここでは省略します。

[4] 各ページの内容部分を作る
最後に、本来の各ページごとに表示する内容部分のページです。
今回の例ではこれが test.html になります。 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{layout/layout(pgmid='STNP002',title='レイアウトのサンプル')}">
<body>
<div layout:fragment="content">

ここからメインページ<br>
<div>
***
</div>
ここまでメインページ<br>

</div>
</body>
</html>

この 

<div layout:fragment="content">
...
</div>

の部分が、先ほどのlayout.htmlの 

<div layout:fragment="content"></div>

に置き換わります。両方とも全く同じ要素名なので混乱しますが、そういうものなので仕方がない……

また、取り込むレイアウトファイルは通常 

layout:decorate="~{layout/layout}"

のように書きますが、ここをサンプルのように 

layout:decorate="~{layout/layout(pgmid='STNP002',title='レイアウトのサンプル')}"

と書くと、テンプレートにパラメータを渡すことができます。 ここで定義した値がテンプレート側の [[${pgmid}]] や [[${title}]] の位置に表示される動作になります。

Java kowaza Top

(first uploaded 2024/08/05 last updated 2026/07/22, URANO398)