Thymeleafでタグの置き換え(replace)をする方法

Thymeleaf Java

Thymeleafでタグの置き換え(replace)をする方法

Thymeleafでタグの置き換えをする方法は、th:replace 属性を使います。
th:replace 属性を使うことで、別のテンプレートを読み込んで、現在のテンプレートのタグを置き換えることができます。

以下に具体的な例を示します。

example.html (メインテンプレート)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>置き換え例</title>
</head>
<body>
  <div th:replace="fragments/header :: headerFragment"></div>
  <p>ここはメインのコンテンツです。</p>
  <div th:replace="fragments/footer :: footerFragment"></div>
</body>
</html>

fragments/header.html (ヘッダーのフラグメント)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
  <div th:fragment="headerFragment">
    <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>

fragments/footer.html (フッターのフラグメント)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
  <div th:fragment="footerFragment">
    <footer>
      <p>&copy; 2024 サイトの名前</p>
    </footer>
  </div>
</body>
</html>

この例では、example.html の中で th:replace 属性を使い、fragments/header.html と fragments/footer.html のフラグメントを読み込んでいます。
これにより、headerFragment と footerFragment の内容で、それぞれの div タグが置き換えられます。