「SpringBoot 2.6」Thymeleafで共通の部分レイアウトを作成する方法
環境
Windows10 64bit
Spring Boot 2.6.2
Spring Tool Suite 4
JDK 11
使用例
1.共通の部分レイアウト(common.html)
書式
th:fragment="fragment名前"
共通部品として呼ばれます。
サンプルコード
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:fragment="header_cft">
<div>共通のヘッダー(header)です 111</div>
</header>
<footer th:fragment="footer_cft">
<div>共通のフッター(footer)です 222</div>
</footer>
</html>
2.共通ファイルを呼び出す側(index.html)
書式
th:replace="フォルダ::framenet名前"
th:replaceで取り込む対象を指定します。
サンプルコード
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>共通ファイルを呼び出すサンプル</title>
</head>
<body>
<div th:replace="woka/common::header_cft"></div>
<p>テスト</p>
<div th:replace="woka/common::footer_cft"></div>
</body>
3.コントローラ側のコード
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("/woka")
public class PatController {
@GetMapping()
public String funA() {
return "woka/index";
}
}
4.プログラム実行
プロジェクトを右クリックして、「実行(R)」->「Spring Boot アノテーション」をクリックします
画面確認
ブラウザ画面で「http://127.0.0.1:8080/wokaにアクセスすると、画面に以下の結果が表示されます
実行結果
共通のヘッダー(header)です 111
テスト
共通のフッター(footer)です 222