Hugo のノウハウのまとめ。

Links

home
- https://gohugo.io

https://gohugo.io/extras/menus/

Icon

FontAwsome のアイコンが使える。

例

name	display
fa-heart
fa-road

Issues

メニューのアイコンが表示されない

config.toml で pre = "<i class='fa fa-heart'></i>" と指定してあっても、FontAwsome アイコンが表示されない。

解決

.Site.Menus を展開する layout で .Pre を付加する様に変更する。

hugo_theme_beg では、layout/_default/baseof.htmlで .Site.Menus を展開している。{{ .Name }} を {{ .Pre }} {{ .Name }}に変更する。

layout/_default/baseof.html

            {{ range .Site.Menus }}
            <ul class="nav navbar-nav navbar-right">
              {{ range . }}
              {{ if .HasChildren }}
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ .Pre }} {{ .Name }} <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  {{ range .Children }}
                  <li><a href="{{ .URL }}">{{ .Pre }} {{ .Name }}</a></li>
                  {{ end }}
                </ul>
              </li>
              {{ else }}
              <li><a href="{{ .URL }}">{{ .Pre }} {{ .Name }}</a></li>
              {{ end }}
              {{ end }}
            </ul>
            {{ end }}

TOC の表示

どうやって、TOCを表示させるのか。

table のスタイル調整

テーブルの要素が隙間なく並んでしまう。非常に見にくいので治したい。

name	item1	item2
table	a	b
icon	c	d