Thymeleafでフラグメント式を使用

Java Thymeleaf

Thymeleafでフラグメント式を使用

Thymeleafでフラグメントを使用する方法を以下に示します。
フラグメントを使うと、HTMLコードの一部を再利用することができ、テンプレートの管理が容易になります。

まず、共通部分としてフラグメントを定義するファイルを作成します。
例として、header.htmlにヘッダー部分のフラグメントを定義します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
  <div th:fragment="header">
    <header>
      <h1>サイトのヘッダー</h1>
      <nav>
        <ul>
          <li><a href="/">ホーム</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>
  </div>
</body>
</html>

次に、フラグメントを呼び出すテンプレートファイルを作成します。
例として、index.htmlにヘッダー部分をインクルードします。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>ホームページ</title>
</head>
<body>
  <div th:insert="fragments/header :: header"></div>
  <main>
    <h2>ホームページへようこそ</h2>
    <p>ここにコンテンツを追加します。</p>
  </main>
</body>
</html>

上記の例では、index.html内のdivタグにth:insert属性を使って、header.htmlのheaderフラグメントをインクルードしています。
この方法を使うと、テンプレート間で共通部分を簡単に再利用できます。