Thymeleafでヘッダーを共通化

Thymeleaf Java

Thymeleafでヘッダーを共通化

Thymeleafでヘッダーを共通化するためには、フラグメントを使うと便利です。
以下にヘッダーを共通化するためのサンプルコードを示します。

1. header.html（ヘッダー部分のフラグメントファイル）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>共通ヘッダー</title>
</head>
<body>
  <div th:fragment="commonHeader">
    <header>
      <h1>サイトのタイトル</h1>
      <nav>
        <ul>
          <li><a href="/">ホーム</a></li>
          <li><a href="/about">アバウト</a></li>
          <li><a href="/contact">コンタクト</a></li>
        </ul>
      </nav>
    </header>
  </div>
</body>
</html>

2. 他のHTMLファイルで共通ヘッダーをインクルードする

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>ページタイトル</title>
</head>
<body>
  <div th:include="::commonHeader"></div>
  <main>
    <h2>ページコンテンツ</h2>
    <p>ここにページ固有の内容が入ります。</p>
  </main>
</body>
</html>

これにより、header.htmlに定義したヘッダー部分を他のHTMLファイルで共通して利用することができます。
変更が必要な場合は、header.htmlを編集するだけで全てのページに反映されます。

インクルードの際に引数を設定する場合

Thymeleafでフラグメントに引数を渡すには、th:with属性を使います。
以下に、引数を使ったヘッダーの共通化の例を示します。

1. header.html（ヘッダー部分のフラグメントファイル）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>共通ヘッダー</title>
</head>
<body>
  <div th:fragment="commonHeader(title, navigation)">
    <header>
      <h1 th:text="${title}">サイトのタイトル</h1>
      <nav>
        <ul>
          <li th:each="navItem : ${navigation}">
            <a th:href="${navItem.href}" th:text="${navItem.text}">リンク</a>
          </li>
        </ul>
      </nav>
    </header>
  </div>
</body>
</html>

2. 他のHTMLファイルで共通ヘッダーをインクルードする際に引数を設定する

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>ページタイトル</title>
</head>
<body>
  <div th:include="::commonHeader" 
       th:with="title='マイページ', 
                navigation=${navigationList}">
  </div>
  <main>
    <h2>ページコンテンツ</h2>
    <p>ここにページ固有の内容が入ります。</p>
  </main>
</body>
</html>

3. コントローラーでナビゲーションリストを設定する（例：SpringBoot）

@Controller
public class MyController {

  @GetMapping("/mypage")
  public String myPage(Model model) {
    List<Map<String, String>> navigationList = new ArrayList<>();
    navigationList.add(Map.of("href", "/", "text", "ホーム"));
    navigationList.add(Map.of("href", "/about", "text", "アバウト"));
    navigationList.add(Map.of("href", "/contact", "text", "コンタクト"));

    model.addAttribute("navigationList", navigationList);
    return "mypage"; // mypage.htmlを表示
  }
}

これにより、各ページで異なるタイトルやナビゲーションメニューを動的に設定することができます。