概要
Spring BootとThymeleafを使って作るWebアプリで、各htmlのページに共通しているヘッダーやフッターを共通化する方法
環境
- Java8
- Spring Boot
- version: 2.1.9.RELEASE
- Thymeleaf
- version: 3.0.11.RELEASE
- Eclipse
- version: 2018-09 (4.9.0)
サンプル
ディレクトリ構成
Java側は省略しますが、templateと静的コンテンツの配置はこんな感じ。
dir
src/main/resources
├── static
│ ├── css
│ │ ├── common.css
│ │ └── top.css
│ └── js
│ └── datepicker.js
└── templates
├── common.html
└── index.html
SpringBootはtemplates配下のHTMLからCSSやJSファイルを参照する場合、
staticがルートディレクトリになるので、このような構成にしてます。
共通部品用のcommon.htmlを作成する
common.html
<html xmlns:th="http://www.thymeleaf.org">
<!-- (1)共通にしたいheadをfragment化する -->
<head th:fragment="meta_header(title,links,scripts)">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- (2)共通で読み込むCSS/JS -->
<link rel="stylesheet" href="/css/common.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- (3)タイトルのフォーマット -->
<title th:text="${title}+' | sample app'">各ページタイトル | sample app</title>
<!-- (4)各View固有で読み込むもの -->
<th:block th:replace="${links} ?: _" />
<th:block th:replace="${scripts} ?: _" />
</head>
<body>
<!-- (5)body内で共通化したい部品をfragment化する -->
<header th:fragment="header">
<h1><a th:href="@{'/'}">sample app</a></h1>
</header>
</body>
</html>
解説
(1) fragment名は引数を取れるのでtitle,links,scriptsを引数に設定する
(2) 各ページで共通に読み込むCSS/JSを記載する
(3) 引数のtitleを使ってth:text=""にページタイトルのフォーマットを設定する
(4) 各ページで読み込むCSS/JSをth:replaceを使って差し込む
処理なしトークン(?: _)を使うことで、${links}がnullだった場合はth:block自体が無かったものになる
(5) body内でも共通化したいものがあったらth:fragmentを使って部品化する
各html側で呼び出す
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- (1)共通headerで置き換える -->
<head th:replace="common :: meta_header('top',~{::link},~{::script})">
<!-- (2)このページ固有で読み込むCSS/JS -->
<link rel="stylesheet" th:href="@{/css/top.css}" />
<script type="text/javascript" th:src="@{/js/datepicker.js}"></script>
</head>
<body>
<!-- (3)共通部品を呼び出す -->
<div th:replace="common :: header"></div>
<h2>top page</h2>
</body>
解説
(1) headerをcommon.htmlで定義したものに引数を渡して置き換える
(2) このページ(このサンプルではindex.html)固有で読み込むファイルを定義する
(3) 共通部品もth:replace="ページ名::fragment名"で置き換える