【SpringBootチュートリアル】#4~ headerの作成と埋め込み

投稿日：2020年11月28日

概要

全ての画面で使用するヘッダーを作成します。
そして、Index画面に埋め込むところまでを行います。

共通ヘッダーの作成

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
	<meta charset="UTF-8">
	<title th:replace="${title}">title</title>
	<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
	<script th:src="@{/js/dialog.js}" defer="defer"></script>
</head>
  <body>
  	<header th:fragment="header">
		<a th:href="@{/}">ホーム</a>
		<a th:href="@{/book/list}">検索</a>
		<a th:href="@{/book/add}">新規登録</a>
		<hr>
  	</header>
  </body>
</html>

<!DOCTYPE html>

<title th:replace="${title}">title</title>

</head>

<body>

<hr>

</header>

</body>

</html>

・<head th:fragment="head(title)">
　headタグをheadというフラグメント名で埋め込む指定です。
　titleは呼び出し元から受け取る引数になります。

・<title th:replace="${title}">title</title>
　th:fragment=”head(title)” で受け取った引数(title)で、${title}を置換します。

・scriptタグではjQueryを使えるようにしています。

・<header th:fragment="header">
　headerタグをheaderというフラグメント名で埋め込めるようにします。
　
　

Index画面への埋め込み

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="header::head(~{::title})">
	<title>書籍管理システム</title>
</head>
<body>
	<header th:replace="header::header"></header>
	<div>
		<h1>
		ようこそ！<br>
		書籍管理システムへ！！
		</h1>
	</div>
</body>
</html>

<!DOCTYPE html>

<title>書籍管理システム</title>

</head>

<body>

<div>

<h1>

ようこそ！<br>

書籍管理システムへ！！

</h1>

</div>

</body>

</html>

・<head th:replace="header::head(~{::title})">
　header.htmlのth:fragment=header(title)を、index.htmlのheaderタグと置換(replace)します。
　その際、index.html内のtitleタグを引数に与える（~{::title}）ことで、「書籍管理システム」が設定されます。

・<header th:replace="header::header"></header>
　これで、header.htmlのheaderタグがindex.htmlのheaderタグとして置換されます。

作成イメージ

title：index.htmlのtitleタグの内容が、header.htmlの引数に渡されて設定できています。
header：index.htmlに、header.htmlのheaderが埋め込まれています。

まとめ

・画面内をth:fragmentで部分的に定義することができる。
・埋め込み側では、部分的に定義した画面の一部をth:replaceで置換できる。