Statamic v2 テーマの作成 3:ナビゲーションメニューを動的に作成する

2017/03/30

Statamic v2 のテーマ作成 STEP2:固定ページや投稿ページのカテゴリをナビゲーションメニューとして出力します。

つづいて、ナビゲーションメニューを作成します。固定ページをナビゲーションとして表示したり、投稿ページのカテゴリ一覧をナビゲーションとして表示したい場合の設定です。表示順は管理画面で変更できるので、設定は簡単!

固定ページをナビゲーションとして表示する

ナビゲーションを出力する基本的なタグは{{ nav }}
最低限必要なテンプレートコードは次です。

#Template

<ul>
  {{ nav from="/" }}
    <li><a href="{{ url }}">{{ title }}</a></li>
  {{ /nav }}
</ul>

管理画面で設定された順番で、上から順にすべての固定ページが表示されます。順番を変えたい場合は、管理画面の固定ページ一覧画面(Pages)でページのタイトルをドラッグ&ドロップして設定を保存します。

管理画面:固定ページ一覧

特定のディレクトリ配下のみのナビゲーションを表示する

例えばグローバルナビに「会社案内」があり、該当するディレクトリが/company/である場合に、ローカルナビゲーションとして「会社案内」配下の固定ページのみを出したい場合は、form属性でディレクトリを制限します。

#Template

<ul>
  {{ nav from="/company/" }}
    <li><a href="{{ url }}">{{ title }}</a></li>
  {{ /nav }}
</ul>

階層が異なるページのナビゲーションを表示する

階層化されているページのグループと階層化されていないページが混ざっている場合、{{ *recursive children* }}を使うことで「子階層があるときだけサブメニューを出力することができます。

#Template

<ul>
  {{ nav from="/" max_depth="2" }}
    <li>
      <a href="{{ url }}">{{ title }}</a>
        {{ if is_current || is_parent }}
          {{ if children }}
            <ul>{{ *recursive children* }}</ul>
          {{ /if }}
        {{ /if }}
    </li>
  {{ /nav }}
</ul>
  • 2行目:max-depthで表示する階層の深さを2階層までに指定。
  • 5行目:is_currentで「現在ユーザがこのページを見ている場合」またはis_parent「これが親である場合」に次を実行。
  • 6行目:子階層ページがあれば7行目を実行。

この7行目にある{{ *recursive children* }}は、親の{{ nav }}〜{{ /nav }}をまるっと一式繰り返します。これにより、すべての固定ページがナビゲーションになって表示される、という仕組みです。

投稿ページのカテゴリリストをナビゲーションとして表示する

ブログのような投稿ページの「カテゴリ」などの分類リストをメニューとして表示する場合は、「カテゴリ」なり「タグ」なりが設定されているtaxonomyを出力する{{ taxonomy }}タグを使用します。

例)「tags」という名前のtaxonomyで分類している場合

#Template

<ul>
  {{ taxonomy:tags }}
    <li><a href="{{ url }}">{{ title }}</a></li>
  {{ /taxonomy:tags }}
</ul>

※この場合のtagsは、【管理画面>CONFIGURE>Content>Taxonomies】で登録済みtaxonomyの名前です。


以上が基本的なナビゲーションの形成方法です。
本家のドキュメントには、上記以外に設定できるパラメータや変数が詳しく紹介されています。

Nav - Tags - Statamic 2 Docs
Taxonomy - Tags - Statamic 2 Docs

一つ前のページへ
867867.com

Contents

Get in touch

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

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

© 867867.com All Rights Reserved.

menu