Hugoブログのリンクを修正する

ブログの下部にあるメニューのリンクがうまくいっていなかった。具体的には、「今いるページのURL」にそのままパス (About ページの場合 /about) がくっついて、トップページ以外からのページ移動ができなくなっていた。

https://kattsun.dev/ → About
- OK (https://kattsun.dev/about/ )
https://kattsun.dev/about/ → About
- 404 エラー (https://kattsun.dev/about/about/ )

対応

使用しているテーマの menu.html のリンクを修正した。 theme 直下の menu.html は修正できないため、ブログディレクトリ直下の layouts/partials ディレクトリに menu.html をコピーし、修正することにした。

.
├── layouts
│   └── partials
│       └── menu.html ←theme からコピーして修正
└── themes
    └── hugo_theme_pickles
        └── layouts
            └── partials
                └── menu.html ←修正できない！

下記の修正により、absURL (= https://kattsun.dev/ ) に各ページのパスが正しく渡せるようになった。

layouts/partials/menu.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{{ if .Site.Menus.main }}
<nav class="l-nav p-menu">
  <ul class="p-menu__lists">
    {{ range .Site.Menus.main.ByWeight }}
    {{ if .HasChildren }}
    <li class="p-menu__listitem p-menu__parent">
      <span>{{ .Name }}</span>
      <ul>
        {{ range .Children }}
        <li class="p-menu__listitem p-menu__child"><a href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
        {{ end }}
      </ul>
    </li>
    {{ else }}
    <li class="p-menu__listitem">
-     <a href="{{ .URL }}">
+     <a href="{{ .URL | absURL }}">
        {{- .Name -}}
      </a>
    </li>
    {{ end }}
    {{ end }}
  </ul>
</nav>
{{ end }}

参考

absURL | Hugo