◀ 3.

テンプレートフラグメント（ヘッダー等の共有化）

編集
ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

本稿はSpring Frameworkのテンプレートフラグメントについて説明します。

 

テンプレートフラグメントとは？

テンプレートフラグメントを利用することで、ヘッダーやフッター等を部品化し、共有化させることができます。

 

フラグメントの作成

以下の内容の/src/main/resource/templates/test/fragment.htmlを作成します。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

  <body>

    <!-- Header -->

    <div th:fragment="header">

    <p>ヘッダー</p>

    </div>

 

    <!-- Footer -->

    <div th:fragment="footer">

    <p>フッター</p>

    </div>

  </body>

</html>

 

サンプルページの作成

フラグメントを取り込むサンプルページを作成します。

以下の内容の/src/main/resource/templates/test/content.htmlを実装します。

<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org">

    <head>

        <title>Content Page</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    </head>

    <body>

    <!-- Header -->

    <div th:include="/test/fragment :: header"></div>

 

    <!-- Content -->

    <p>コンテント</p>

 

    <!-- Footer -->

    <div th:include="/test/fragment :: footer"></div>

    </body>

</html> 

 

出力結果

ヘッダー

コンテント

フッター

 

子ページ
子ページはありません
同階層のページ
  1. 導入方法と基本動作
  2. メッセージ式
  3. テンプレートフラグメント（ヘッダー等の共有化）

人気ページ

最近更新/作成されたページ

最近コメントのあったページ

最近の質問

コメント一覧

コメントがありません

ログインしなければコメント投稿はできません。