【Thymeleaf】テンプレートフラグメントを使った部品化と取り込み

ヘッダー・フッターやメニューなど複数ページ共通のコンテンツをあらかじめ部品化して各ページへ組み込む、
Thymeleafのテンプレートフラグメントの使用方法と手順をメモ。

こちらを使用すると共通部分を使用している全ページを一度に更新出来るので効率的です。

フッター部分を共通化して取り込む例

th:fragment属性で部品化する

<○○ th:fragment=“フラグメント名”></○○>

Springプロジェクトのtemplates内に
部品化したいタグを記述するThymeleafテンプレートファイルを作成する。

ファイル名をbase.htmlとする。

base.html
(body内に記述)

<th:block th:fragment=”pageFooter”>hoge</th:block>

※ここでは部品を囲むタグそのものはhtmlとして出力されないThymeleaf独自のth:blockタグを使用している。

th:include属性で部品を取り込む

<○○ th:include=“テンプレート名 :: フラグメント名”></○○>

base.html内で部品化したコンテンツを他のテンプレートファイル内で取り込む。

<footer th:include=”base :: pageFooter”></footer>

取り込む側のタグはdiv、headerなど場合に応じて指定することが出来ます。
中身だけを出力したい場合は前述の部品側と同様、th:blockで囲うこともできます。

※フラグメント名に注意

フラグメントに指定する名前がheaderfooterなどhtmlのタグとして予約されているキーワードを使用すると、
元々タグとして指定したそれらの箇所へ重複してインクルードされてしまうなど意図しない動作になるので注意が必要です。
本記事の解説ではフラグメント名前にpageの接頭辞を使用して回避させています。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください