「SpringBoot 2.6」Thymeleafで共通の部分レイアウトを作成する方法

2022年1月28日

環境
Windows10 64bit
Spring Boot 2.6.2
Spring Tool Suite 4
JDK 11

使用例
1.共通の部分レイアウト(common.html)
書式
th:fragment="fragment名前"
共通部品として呼ばれます。
サンプルコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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で取り込む対象を指定します。
サンプルコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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.コントローラ側のコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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";
}
}
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"; } }
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

Spring Boot

Posted by arkgame