使用環境
| Name | Version |
|---|---|
| Hugo | v0.112.6-extended |
| Vanilla Framework | 3.15.0 |
私がHugoを使っていて、一番大変だと思うのが、ナビゲーションメニューです。
今回、作成するナビゲーションメニューは、グローバルメニューとサイドメニューを使います。
使い分けることで、階層型のサイドメニューに表示される内容を減らすことが出来ます。
階層型のサイドメニューには、FirstSection配下のフォルダやファイルを表示します。
直下にファイルがあれば、一覧を表示させて、直下じゃなければ、表示しないようにしたいと思っていました。
検索して探してみると、下記の参考記事を発見しました。
上記の記事を参考に作成してみました。
layouts/_default/baseof.html
{{- $current_page := . -}}
{{- $top := .FirstSection.Section -}}
<nav class="p-side-navigation" aria-label="Main navigation">
<ul class="p-side-navigation__list">
{{ partial "menu-item" (dict "menu" $top "list" (index .Site.Menus $top) "current" $current_page) }}
</ul>
</nav>
layouts/partials/menu-item.html
{{ $menu_id := .menu }}
{{ $list := .list }}
{{ $current_page := .current }}
{{ range $list }}
{{- $is_current := $current_page.IsMenuCurrent $menu_id . -}}
<li class="p-side-navigation__item">
{{- if $is_current -}}
<a class="p-side-navigation__link" aria-current="page" href="{{ .URL }}">{{ .Name }}</a>
{{- else -}}
<a class="p-side-navigation__link" href="{{ .URL }}">{{ .Name }}</a>
{{- end -}}
{{- if and .HasChildren (or ($current_page.IsMenuCurrent $menu_id .) ($current_page.HasMenuCurrent $menu_id .)) -}}
<ul class="p-side-navigation__list">
{{ partial "menu-item" (dict "menu" $menu_id "list" .Children "current" $current_page) }}
</ul>
{{- end -}}
</li>
{{ end }}
contentフォルダの中
. ├── 1000 │ ├── 1100 │ ├── 1200 │ └── _index.md ├── 2000 │ └── _index.md ├── 3000 │ ├── 3100 │ └── _index.md ├── 4000 │ ├── 4100 │ └── _index.md ├── 5000 │ ├── 5100 │ │ ├── 5110_php.md │ │ ├── 5130_php80.md │ │ ├── 5140_php81.md │ │ ├── 5190_enum.md │ │ └── _index.md │ ├── 5200 │ │ ├── 5210_ci4.md │ │ ├── 5220_symfony.md │ │ ├── 5230_laminas.md │ │ └── _index.md │ ├── 5300 │ ├── 5400 │ ├── 5500 │ └── _index.md
content/5000/5100/_index.md
--- title: "5100.PHP" linkTitle: "PHP" slug: php weight: 5100 menu: 5000: identifier: "php" weight: 5100 ---
イメージ図
画面の上部にあるのが、グローバルメニューで、左側にあるのが、サイドメニューです。
5100.PHPにアクセスした時のサブメニューに、直下のファイルを表示しています。
5200.PHP Frameworkは5000の直下であって、5100.PHPの直下じゃないので、配下のファイルは表示していません。
感想
Vanilla Framework v3に対応させたかったのと、Hugoも日々更新されていくので、新しくテーマを作り直して良かったと思っています。