サイト全体で完全に同じHTMLを使う場合は、単純にLayoutsファイルに入れてしまえばいいのですが、サイト内の一部、例えばカテゴリごとにサイドブロックを変える場合など、条件に応じて同じブロックを使うような場合は、それらが外部ファイル化されていると便利です。
Statamicでは、そのような外部ファイルをPartialsファイルと呼び、これらを簡単に作成・管理することができる仕様になっています。
サイドブロック用のpartialファイルを作ってlayoutで読み込む
テーマディレクトリ配下にpartials/l-side.htmlを作成し、サイドブロック用のHTMLを流し込みます。
後は、デフォルトのlayoutファイルの中で作成したpartialファイルを読み込めばOK。書式は{{ partial:ファイル名 }}です。
# Template(Layouts)
<body>
<div class="l-wrapper">
<div class="l-main">
<div class="l-main__inner">
{{ template_content }}
</div>
</div>
# 次を追加（この位置にサイドブロックが表示される）
{{ partial:l-side }}
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="{{ theme:js }}"></script>
<script src="{{ theme:js src='site' }}"></script>
</body>
ブラウザでページを確認すると、サイドブロック用の外部ファイルが読み込まれて表示されていることが確認できます。
フッターも同様にpartialファイルに
テーマディレクトリ配下にpartials/l-footer.htmlを作成し、ページフッター用のHTMLを流し込みます。
サイドブロックの時と同様に、デフォルトのlayoutファイルの中で作成したフッター用のpartialファイルを読み込みます。
# Template(Layouts)
<body>
<div class="l-wrapper">
<div class="l-main">
<div class="l-main__inner">
{{ template_content }}
# 次を追加（この位置にフッターブロックが表示される）
{{ partial:l-footer }}
</div>
</div>
{{ partial:l-side }}
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="{{ theme:js }}"></script>
<script src="{{ theme:js src='site' }}"></script>
</body>
外部ファイルの作成、読み込みもとても簡単ですね。
