##環境
Thymeleaf 3.0
Spring Boot 2.4.2
Mac OS Big Sur
Maven
##状況
以下のコードのようにlayout:flagmentとlayout:decorateを用いてテンプレートを取り込もうとしていた。
ディレクトリ構造
|-template
|
|-- customers
| |
| |-- edit.html
| |-- list.html
|
|-- commons
|
|-- layout.html
layout.html(テンプレート部分)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>layout</title>
</head>
<body>
<div class="container">
<h1 class="text-center text-primary mt-5">顧客管理システム</h1>
<div>
</div>
<div layout:fragment="content">
Fake Content
</div>
</div>
</body>
</html>
list.html (フラグメント部分)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org/" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorate ="~{/commons/layout}">
<head>
<title>顧客一覧</title>
</head>
<body>
<div layout:fragment="content" class="col-sm-12">
<form th:action="@{/customers/create}" th:object="${customerForm}" method="POST">
<dl>
<dt><label for="lastName">姓</label></dt>
<dd>
<input type="text" id="lastName" name="lastName" th:field="*{lastName}" th:errorclass="error-input"
value="山田" />
<span th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}" class="error-messages">error!</span>
</dd>
</dl>
<dl>
<dt><label for="firstName">名</label></dt>
<dd>
<input type="text" id="firstName" name="firstName" th:field="*{firstName}" th:errorclass="error-input"
value="太郎" />
<span th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}" class="error-messages">error!</span>
</dd>
</dl>
<input type="submit" value="作成">
</form>
<table>
<tr th:each="customer : ${customers}">
<td th:text="${customer.id}">100</td>
<td th:text="${customer.lastName}">山田</td>
<td th:text="${customer.firstName}">太郎</td>
<td>
<form th:action="@{/customers/edit}" method="GET">
<input type="submit" name="form" value="編集">
<input type="hidden" name="id" th:value="${customer.id}" />
</form>
</td>
<td>
<form th:action="@{/customers/delete}" method="POST">
<input type="submit" value="削除">
<input type="hidden" name="id" th:value="${customer.id}" />
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
list.htmlの冒頭に**layout:decorate ="~{/commons/layout}"**を記述することでフラグメントとして導入されるテンプレートファイルを指定することができる。
しかし、このlayout:deocorateを書籍通り記述するもフラグメントとして組み込まれない。
##pom.xmlに追記
layout:decorateが機能しない理由はdecorateが依存関係に追加されていないから。
どうやらみなさんがよく使うであろう「spring-boot-starter-thymeleaf」にはdocorate機能がない。
だからdocorateを依存関係に追加するためpom.xmlに以下のコードを追記する。
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
これで正しく反映されます！