タイトル: テンプレートフラグメント（ヘッダー等の共有化）
SEOタイトル: テンプレートフラグメント（ヘッダー等の共有化）
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<thead>
<tr><th style="background-color:#f39c12;color:#ffffff;text-align:left">この記事の要点</th></tr>
</thead>
<tbody>
<tr>
<td style="background-color:#fef9e7">
<ul>
<li>Spring (Thymeleaf) の<strong>テンプレートフラグメント</strong>: ヘッダー / フッターの共通化</li>
<li>定義: 共通部品ファイルに <code>th:fragment="name"</code> を付ける</li>
<li>読み込み: <code>th:replace="~{path/fragment :: name}"</code> または <code>th:insert</code></li>
<li>部分置換できるので、ページごとに差分だけ書ける</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>本稿は<strong>Spring Frameworkのテンプレートフラグメント</strong>について説明します。</p>
<p> </p>
<h2>テンプレートフラグメントとは？</h2>
<p>テンプレートフラグメントを利用することで、ヘッダーやフッター等を部品化し、共有化させることができます。</p>
<p> </p>
<h2>フラグメントの作成</h2>
<p>以下の内容の/src/main/resource/templates/test/fragment.htmlを作成します。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><!DOCTYPE html></span></p>
<p><span style="color:#ffffff"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"></span></p>
<p style="margin-left:40px"><span style="color:#ffffff"> <body></span></p>
<p style="margin-left:80px"><span style="color:#ffffff"> <!-- Header --></span></p>
<p style="margin-left:80px"><span style="color:#ffffff"> <div </span><span style="color:#f1c40f">th:fragment="header"</span><span style="color:#ffffff">></span></p>
<p style="margin-left:120px"><span style="color:#ffffff"> <p>ヘッダー</p></span></p>
<p style="margin-left:80px"><span style="color:#ffffff"> </div></span></p>
<p style="margin-left:80px"> </p>
<p style="margin-left:80px"><span style="color:#ffffff"> <!-- Footer --></span></p>
<p style="margin-left:80px"><span style="color:#ffffff"> <div </span><span style="color:#f1c40f">th:fragment="footer"</span><span style="color:#ffffff">></span></p>
<p style="margin-left:120px"><span style="color:#ffffff"> <p>フッター</p></span></p>
<p style="margin-left:80px"><span style="color:#ffffff"> </div></span></p>
<p style="margin-left:40px"><span style="color:#ffffff"> </body></span></p>
<p><span style="color:#ffffff"></html></span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>サンプルページの作成</h2>
<p>フラグメントを取り込むサンプルページを作成します。</p>
<p>以下の内容の/src/main/resource/templates/test/content.htmlを実装します。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><!DOCTYPE HTML></span></p>
<p><span style="color:#ffffff"><html xmlns:th="http://www.thymeleaf.org"></span></p>
<p><span style="color:#ffffff"> <head></span></p>
<p><span style="color:#ffffff"> <title>Content Page</title></span></p>
<p><span style="color:#ffffff"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></span></p>
<p><span style="color:#ffffff"> </head></span></p>
<p><span style="color:#ffffff"> <body></span></p>
<p style="margin-left:40px"><span style="color:#ffffff"> <!-- Header --></span></p>
<p style="margin-left:40px"><span style="color:#ffffff"> <div </span><span style="color:#f1c40f">th:include="/test/fragment :: header"</span><span style="color:#ffffff">></div></span></p>
<p style="margin-left:40px"> </p>
<p style="margin-left:40px"><span style="color:#ffffff"> <!-- Content --></span></p>
<p style="margin-left:40px"><span style="color:#ffffff"> <p>コンテント</p></span></p>
<p style="margin-left:40px"> </p>
<p style="margin-left:40px"><span style="color:#ffffff"> <!-- Footer --></span></p>
<p style="margin-left:40px"><span style="color:#ffffff"> <div </span><span style="color:#f1c40f">th:include="/test/fragment :: footer"</span><span style="color:#ffffff">></div></span></p>
<p><span style="color:#ffffff"> </body></span></p>
<p><span style="color:#ffffff"></html> </span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>出力結果</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff">ヘッダー</span></p>
<p><span style="color:#ffffff">コンテント</span></p>
<p><span style="color:#ffffff">フッター</span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>