Statamic v2 テーマの作成 2:サイドブロックなどを共通パーツ化する

2017/03/26

Statamic v2 のテーマ作成 STEP2:サイドのブロックやフッターなど、サイト全体で共通して使用するHTMLパーツを外部ファイル化して管理・運用をしやすくします。

サイト全体で完全に同じ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>

外部ファイルの作成、読み込みもとても簡単ですね。

一つ前のページへ
867867.com

Contents

Get in touch

これからも、仕事と遊びを通して多くの方と出会えますように。

お問い合わせ
株式会社グランフェアズ
facebook

※個人事業主ですが、専従のため制作のご依頼はお受けしておりません。

© 867867.com All Rights Reserved.

menu