サイトメニュー

HUGO.

https://github.com/ucsbphil/philweb/blob/master/layouts/partials/nav.html を参考に、サイトメニューの表示と現在開いているページのメニューをアクティブ化、というのをしてる。

config.toml:

[[menu.global]]
    name = "blog"
    identifier = "blog"
    weight = 0
    url = "/blog/"
[[menu.global]]
    name = "work"
    identifier = "work"
    weight = 1
    url = "/work/"
[[menu.global]]
    name = "about"
    identifier = "about"
    weight = 2
    url = "/about/"

layouts/partials/header.html:

<ul class="global-nav">
  {{ $currentNode := . }}
  {{ range .Site.Menus.global }}
    {{ $atTopLevel := $currentNode.IsMenuCurrent "global" . }}
    {{ $inScope := ( $currentNode.HasMenuCurrent "global" . ) }}
    <li>
      {{ if $atTopLevel }}
        <a href="{{ .Url }}" class="global-nav-link is-active">{{ .Name }}</a>
      {{ else if $inScope }}
        <a href="{{ .Url }}" class="global-nav-link is-active">{{ .Name }}</a>
      {{ else }}
        <a href="{{ .Url }}" class="global-nav-link">{{ .Name }}</a>
      {{ end }}
    </li>
  {{ end }}
</ul>

content/blog/something.md:

+++
[menu]
  [menu.global]
      parent = "blog"

+++

/blog とか /work などの一覧ページのときは {{ if $atTopLevel }} で、その子にあたるページに対しては {{ else if $inScope }} でアクティブ状態のクラスを追加するように指定してる。...面倒くさそう。

content/blog/something.md に書いてるようなことは archetypes に書いておいて、新規コンテンツ作成時にそのデータが挿入されるようにしておけば大分面倒臭さも軽減されそうだけど。

あと、単純に書き方がわからないんだけど、このへんはどうにかしたい。

{{ if $atTopLevel }}
  <a href="{{ .Url }}" class="global-nav-link is-active">{{ .Name }}</a>
{{ else if $inScope }}
  <a href="{{ .Url }}" class="global-nav-link is-active">{{ .Name }}</a>
{{ else }}
  <a href="{{ .Url }}" class="global-nav-link">{{ .Name }}</a>
{{ end }}

追記

あと、単純に書き方がわからないんだけど、このへんはどうにかしたい。

こうなんやで:

{{ if or $atTopLevel $inScope }}
  <a href="{{ .Url }}" class="global-nav-link is-active">{{ .Name }}</a>
{{ else }}
  <a href="{{ .Url }}" class="global-nav-link">{{ .Name }}</a>
{{ end }}

http://golang.org/pkg/text/template/#hdr-Functions を見たんやで。