Spring Bootにおけるテンプレートの利用

本日のお題

本日のお題は、「Spring Bootでのテンプレートの利用」です。

要するに、あるhtmlファイルの内容を他のhtmlに埋め込む方法ですね。

一口にテンプレートといっても、「一つのファイルに複数のファイルを埋め込む」のか逆に「一つのファイルを複数のファイルに埋め込む」のか、あるいは変数の受け渡しをするのかしないのか、でやり方が変わります。

今回は、「変数の受け渡しなし」で「一つのファイルに他の複数のファイルを集約する方法」について扱います。

他の方法は機会があれば。

他のファイルの中身を表示する仕組み

まずは、他のファイルの中身を表示する仕組みについて話します。

まず、読み込まれる（追加元）のファイルの側で、他のファイルに渡す範囲と、そこの部分につけるキー名を設定します。

次に、読み込み先のファイルで読み込み元のファイルのパスと先ほど決めたキー名を指定すれば、そのファイルが読み込まれます。

文字だけだとわかりにくいと思うので、実例を使って説明します。

読み込み元はtemplates/layout/header.html, 読み込み先はtemplates/layout/layout.htmlとします。

ライブラリの追加

まず、必要なライブラリを追加します。

pom.xmlに以下を追加してください。

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

xmlns属性の追加

次に、読み込み元・読み込み先それぞれにxmlns属性を追加します。

htmlタグの中に、以下の属性を追記してください。

xmlns:layout="http://ultraq.net.nz/thymeleaf/layout"

これを追加することで、テンプレート機能が利用できるようになります。

次に、埋め込み元を編集していきます。

埋め込み元の編集

埋め込み元、すなわち今回で言うとheader.htmlにおいて行うことは2つです。

一つは、埋め込み先の指定、もう一つは埋め込み範囲とキー名の定義です。

埋め込み先の指定

埋め込み先の指定に関しては、htmlタグの中にlayout:decorate="~{layout/layout}"と記述するだけです。

" "の中身はtemplates以下の相対パスになるので、ファイル名に合わせて適宜変更してください。

埋め込み範囲とキー名の指定

埋め込み範囲とキー名については、以下のように行います。

......省略......

</div>

他のファイルに渡したい範囲の一番外側にlayout:fragment属性を付与することで、その範囲が読み込まれます。

また、=以下の部分が読み込む際のキー名になります。

読み込む側の編集

最後に、読み込む側を編集します。

今回で言うと、layout.htmlの側ですね。

やり方は簡単で、ある要素にlayout:replace属性を付与すると、その要素が他のファイルの中身に置き換わります。

例えば、<div layout:replace="~{layout/header::header}"></div>とすると、header.htmlの中のheaderと言うキー名をつけた部分が、上記のdiv要素と置き換わります。

終わりに

以上がテンプレートの利用方法でした。

冒頭で述べたように、一口にテンプレートといっても色々なパターンがあります。

他のパターンについても、機会があれば取り上げていこうと思います。

keishiprogramming’s diary