つづいて、ナビゲーションメニューを作成します。固定ページをナビゲーションとして表示したり、投稿ページのカテゴリ一覧をナビゲーションとして表示したい場合の設定です。表示順は管理画面で変更できるので、設定は簡単!
固定ページをナビゲーションとして表示する
ナビゲーションを出力する基本的なタグは{{ 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