baseof.htmlの作成 その3 メニュー機能の解説

こんにちはnasustです。前回の続きbaseof.htmlの解説をします。

header.html 部分テンプレート

layout/partials/header.htmlの内容は以下の通りです。 このテンプレートはグローバルメニューを表示します。

グローバルメニューの項目が現在のページに所属するか、判定をして CSSのスタイルを適用しています。

新しい関数が現れたので解説します。

<div class="m-logo">
    <a class="m-logo__link" href="/" >{{ .Site.Title }}</a>
</div>
<div class="m-global-menu">
    {{ $cp_gm := "m-global-menu__navigation" }}
    <nav class="{{$cp_gm}}" >
        <ul class="{{$cp_gm}}-list">
            {{ $page := . }}
            {{ range .Site.Menus.global_header.ByWeight }}
                {{ $active := false  }}
                {{ $menu_page := $page.Site.GetPage .URL }}
                {{ if $menu_page }}
                    {{ if eq $page $menu_page }}
                        {{ $active = true }}
                    {{ else if and (eq $menu_page.IsHome false) ($menu_page.IsAncestor $page) }}
                        {{ $active = true }}
                    {{ end }}
                {{ end }}
                <li class="{{$cp_gm}}-list-item">
                    {{ $class_name := printf "%s-list-item-link" $cp_gm }}
                    {{ if $active }}
                        {{ $class_name = printf "%s--active" $class_name }}
                    {{ end }}
                    <a class="{{ $class_name }}" href="{{ .URL }}">{{ .Name }}</a>
                </li>
            {{ end }}
        </ul>
    </nav>
</div>
html

range

rangeは配列に対してループします。 配列の現在の中身の値は.になります。

rangeの処理の前に$page := .を行っているのは、 range内の.が配列の中身の値になる為です。

range内でページの変数にアクセスしたい場合は、 $page.XXXXと指定します。

see also: range | Hugo

Hugoにはメニューを設定する機能があります。 config.tomlで以下のようにメニューを設定できます。

[menu]
    [[menu.global_header]]
        name = "Home"
        url = "/"
        weight = 1
    [[menu.global_header]]
        name = "Blog"
        url = "/post"
        weight = 2
toml

[[menu.XXXX]]のようにXXXXをメニューのグループとして定義できます。

上記のメニューは .Site.Menus.global_headerとXXXXの値が パラメーターとなりアクセスできます。

see also: Menu Entry Properties | Hugo

range .Site.Menus.global_header.ByWeight

global_headerをweight順でソートして、rangeでループします。

.Site.GetPage

指定したURLのページ変数を取得します。

see also: .GetPage | Hugo

IsAncestor

指定したページが子孫であればtrueを返します。

see also: Page Variables | Hugo

printf

printf関数は文字列を第一引数の書式と、 それに対応する変数で新しい文字を返します。

他のプログラミングで登場するsprintfと同じような関数です。

see also: printf | Hugo

次回は、right_aside.htmlを解説します。

prevnext