見出し画像

ThymeleafでHTMLのレイアウトを共有する方法(thymeleaf-layout-dialect)

こんにちは、TAIKIです。
Spring Bootを学習中、thymeleafでHTMLファイルで共通するレイアウト部分を共有する方法を学んだので、アウトプットも兼ねて投稿します!



thymeleaf-layout-dialectとは?

thymeleafのライブラリの一つで、レイアウトを共通化させたい時にとても便利です。
イメージとしては大枠となるレイアウトをベースとして固定し、後から必要な要素だけ足して反映させていくような形です。

手順は下記の通りで行います。


手順

①「thymeleaf-layout-dialect」ライブラリを取得

②実際にHTMLファイルに記載🔥🔥


「thymeleaf-layout-dialect」ライブラリを取得

Spring bootのプロジェクトを作成後、pom.xmlに下記を追記し、
thymeleaf-layout-dialectライブラリを追加します。

記載が完了したら
プロジェクトを右クリック → Maven → プロジェクトの更新
で反映させます。

実際にHTMLファイルに記載🔥🔥

それでは実際にHTMLファイルにthymeleafを記載していきます。
プロジェクト内は下記のようなディレクトリ構成にします。

各htmlファイルの役割は下記の通り。

◆index.html → layout.htmlからレイアウトを反映させ、必要な要素だけ記載。
◆layout.html → 共通のレイアウトをここで作成。

まず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>Layout</title>
</head>
<body style="background-color: yellow">

	<header style="width: 100%; height: 70px; background-color: black;">
		<p style="color: white; text-align: center; line-height: 70px;">header</p>
	</header>
	
	<main>
		<h1 style="font-size: 100px; text-align: center; width: 600px; border: 6px solid black; margin: 100px‹ auto;">MAIN</h1>
	</main>


	<!-- コンテンツの配置 -->
	<div layout:fragment="content"></div>
</body>
</html>


レイアウト完成図



解説

<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

xmlns:th でthymeleafを、
xmlns:layout でthymeleaf-layout-dialectを読み込んでいます。

<!-- コンテンツの配置 -->
<div layout:fragment="content"></div>

上記コードを共通化させたいコードの最後に記載します。
これを記載することにより、このコードより上に記載した内容を共通化させることができます。
laytout:fragment = "名前"  
という構文で記載することがポイントです。

次にindex.htmlの中身を作成します。


コード

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorate="~{layout/layout}">
<head>

<meta charset="UTF-8" th:remove="tag">
</head>
<body>
	<div layout:fragment="content">
		<table style="border: 5px solid black; margin: 0 auto; width: 50%;">
			<thead style="background-color: black; color: white;">
				<tr>
					<th colspan="2">Table header</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td style="border: 2px solid black;">Table Body1</td>
					<td style="border: 2px solid black;">Table Body2</td>
				</tr>
				
			</tbody>
		</table>
	</div>
</body>
</html>


完成図


解説

<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorate="~{layout/layout}">

ポイントなのは、layout:decorate="~{layout/layout}">の箇所。

この記載により、どのレイアウトを採用するのかを指定しています。
~{layout/layout}"は、layoutディレクトリのlayout(.html)を参照していることを意味しています。

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

layout.htmlで記載した上記タグ内と同じdivタグをindex.htmlに記載し、タグ内に追加したい要素を記載します。
これにより、レイアウトの記載はindex.html内にする必要はなく、追加したい内容を書くだけでいいのでかなり手間が省けます!!!

参考文献


Spring boot 2入門 基礎から実演まで


ここまで見て頂き、ありがとうございました!
皆さんのお役に立てば幸いです。




ALHについて知る



↓ ↓ ↓ 採用サイトはこちら ↓ ↓ ↓


↓ ↓ ↓ コーポレートサイトはこちら ↓ ↓ ↓


↓ ↓ ↓ もっとALHについて知りたい? ↓ ↓ ↓




この記事が参加している募集