Spring BootのThymeleafで共通の部分レイアウトを作成するサンプルです。
確認環境 ・Spring Boot 2.3.3 ・JDK 11.0.2 ・STS 4.7.2 |
目次
サンプル | 共通の部分レイアウトを作成する |
実行結果 |
共通の部分レイアウトを作成する
ビューのヘッダーやフッターになる共通の部分レイアウトを作成します。
1.src/main/resourcesのtemplatesフォルダのtest1フォルダ配下にpartial1.vbhtmlファイルを作成しました。
index.htmlでpartial1.htmlを読み込むようにします。
2.以下はpartial1.htmlファイルのコードです。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:fragment="header1">
<p style="background:yellow;">ヘッダーです</p>
</header>
<footer th:fragment="footer1">
<p style="background:yellow;">フッターです</p>
</footer>
</html>
3行目は、headerタグです。th:fragmentで値(header1)を指定しています。
6行目は、footerタグです。th:fragmentで値(footer1)を指定しています。
ビュー
以下はビューのコードです。ファイル名は、index.htmlです。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>check</title>
</head>
<body >
<div th:replace="test1/partial1::header1"></div>
<p>テスト</p>
<div th:replace="test1/partial1::footer1"></div>
</body>
</html>
8,10行目は、th:replaceで取り込む対象を指定します。
test1/partial1は、フォルダ名+ファイル名です。
コントローラ
以下は、コントローラです。ビューを表示します。
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/test1")
public class MainController {
@GetMapping
public String index() {
return "test1/index";
}
}
実行結果
上記コードを実行した結果です。
ビューの上下の部分に共通の部分レイアウト(partial1.htmlファイル)が表示されています。
関連の記事
SpringBoot フォームの値を入力チェック
SpringBoot DI(依存性の注入)のサンプル
SpringBoot AOPのサンプル