Thymeleafでテンプレートを共通化(フラグメント)する方法

Javaを学習したいけれどどの学習サービスを選べば良いか分からないという悩みを抱えていませんか?
Javaは市場価値が高い為、学習サービスを提供しているものも多く、条件に合うものを見つけるのに苦労しますよね。
以下の記事ではJavaを入門レベルから勉強できるおすすめ学習サービスをご紹介しています。
Spring FrameworkやThymeleafがカリキュラムに含まれているものがあるので、ぜひ参考にしてください!
OS | macOS Catalina 10.15.1 |
Eclipse | Photon 2018-09 |
Java | 8 |
Spring Tool Suit | 3.9.6 |
Spring Boot | 2.1.13 |
Thymeleaf | 2.1.2 |
開発および実行環境がない人は、以下の記事を参考に構築してください。
今回は、Thymeleafでテンプレートを共通化(フラグメント)する方法をご紹介します。
また、サンプルとして以下のようなプログラムを作成します。ぜひ参考にしてください。
Thymeleafでテンプレートを共通化(フラグメント)する方法は以下のとおりです。
th:fragment
でテンプレートを共通化(フラグメント)するth:insert
または th:replace
または th:include
で取り込むはじめに、th:fragment="copy"
でテンプレートを共通化(フラグメント)します。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy">
<span>© 2020 ミルラク</span>
</footer>
</body>
</html>
テンプレートの共通化(フラグメント)が完了したら、テンプレートファイルでフラグメントを読み込みます。
フラグメントを読み込むには、th:insert
または th:replace
または th:include
を使用します。footer :: copy
で「footer.html」で共通化したcopyというテンプレートを呼び出しています。それぞれ出力結果が異なるので使用する際の参考にしてください。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleafでテンプレートを共通化(フラグメント)する方法</title>
</head>
<body>
<!-- th:insertで読み込む -->
<div th:insert="footer :: copy"></div>
<!-- th:replaceで読み込む -->
<div th:replace="footer :: copy"></div>
<!-- th:includeで読み込む -->
<div th:include="footer :: copy"></div>
</body>
</html>
<!-- th:insertで読み込む -->
<div><footer>
<span>© 2020 ミルラク</span>
</footer></div>
<!-- th:replaceで読み込む -->
<footer>
<span>© 2020 ミルラク</span>
</footer>
<!-- th:includeで読み込む -->
<div>
<span>© 2020 ミルラク</span>
</div>
テンプレートを共通化(フラグメント)するプログラムを実装する手順は以下のとおりです。
また、フォルダ構成は以下のとおりです。
src/main/java/com.example.controller
├─ FragmentController.java
src/main/resources/templates
├─ footer.html
└─ fragment.html
はじめに、Controllerクラスを作成します。
今回は「FragmentController」という名前で作成します。
URLは「/fragment」、テンプレートファイル名は「fragment」を指定します。
package com.example.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class FragmentController {
@RequestMapping("/fragment")
public String sample(Model model) {
return "fragment";
}
}
次に、共通化(フラグメント)するテンプレートファイルを作成します。
今回は「footer」という名前で作成します。
th:fragment="copy"
と th:fragment="copy-argument(text)"
でテンプレートを共通化(フラグメント)しています。copy-argumentでは、変数としてtextを受け取り、th:text="${text}"
で出力しています。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy">
<span>© 2020 ミルラク</span>
</footer>
<footer th:fragment="copy-argument(text)">
<span>© 2020 ミルラク</span>
<span th:text="${text}"></span>
</footer>
</body>
</html>
共通化(フラグメント)するテンプレートファイルの作成が完了したら、テンプレートファイルを作成します。
今回は「fragment」という名前で作成します。
th:insert
または th:replace
または th:include
でフラグメントを読み込んでいます。それぞれ footer :: copy
で「footer.html」で共通化したcopyというテンプレートを呼び出しています。footer :: copy-argument
では、引数に表示するテキストを指定しています。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleafでテンプレートを共通化(フラグメント)する方法</title>
<style>
body {
background-color: whitesmoke;
color: #333;
}
.main {
margin: 45px 0 0 45px;
}
</style>
</head>
<body>
<div class="main">
<!-- th:insertで読み込む -->
<div th:insert="footer :: copy"></div>
<!-- th:replaceで読み込む -->
<div th:replace="footer :: copy"></div>
<!-- th:includeで読み込む -->
<div th:include="footer :: copy"></div>
<!-- 引数あり -->
<div th:replace="footer :: copy-argument('ここにテキストが入ります')"></div>
</div>
</body>
</html>
最後に、ブラウザで「http://localhost:8080/fragment」にアクセスして動作を確認します。
以下のように表示されていたら、動作の確認は完了です。
<div class="main">
<!-- th:insertで読み込む -->
<div><footer>
<span>© 2020 ミルラク</span>
</footer></div>
<!-- th:replaceで読み込む -->
<footer>
<span>© 2020 ミルラク</span>
</footer>
<!-- th:includeで読み込む -->
<div>
<span>© 2020 ミルラク</span>
</div>
<!-- 引数あり -->
<footer>
<span>© 2020 ミルラク</span>
<span>ここにテキストが入ります</span>
</footer>
</div>
Thymeleafでテンプレートを共通化(フラグメント)する方法をご紹介しました。
少しでも参考になれば幸いです。
以下の書籍は、Thymeleafを書籍で学びたい人やThymeleafと併せてSpring Frameworkを学習したい人におすすめしている書籍です。
Springについての書籍ですが、Thymeleafの基礎や基本構文から他システムとの連携等30ページほど取り上げられており、ThymeleafとSpringを一度に学べる書籍になっています。
ぜひ一度手に取ってみてください。
現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください!