症状

当サイトは 静的サイトジェネレーター Hugo で構築しております。

先日 Hugo を 0.43 から 0.52 にアップグレードしました。
すると、一部でいわゆる「リンク切れ」が発生するようになってしまいました。

原因

アーカイブ、カテゴリなどのタクソノミーで、一覧ページの生成ルールが変わったようです。

具体例

当サイトではカテゴリを次のように定義しおります。
これは スラッシュ / でカテゴリの階層構造を表現したかったためです。

1categories = [
2  "JavaScript",
3  "JavaScript/Vue.js",
4]

0.52 アップグレード前は / がディレクトリ構造として扱われました。
出力されるリンクは次の様に階層化されていました。

1categories
2  | - javascript/index.hml
3       | - vue.js/index.hml

0.52 からは次のようにフラットな構造が出力されるようになりました。

1archives
2  | - javascript/index.hml
3  | - javascript-vue.js/index.hml

スラッシュ ‘/’ が ハイフン ‘-’ に変換されている点に注意です。


これに対し、リンクはスラッシュ ‘/’ がそのまま出力されており、リンク切れにつながっておりました。

対処方法

layouts に直接手を入れて対処しました。

「記事ページ中のカテゴリ出力」をサンプルコードとして掲載いたいます。

修正前のコード

1<ul class="terms">
2  {{ range .Params.categories }}
3  <li><a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}">{{ . }}</a></li>
4  {{ end }}
5</ul>

修正後のコード

1<ul class="terms">
2  {{ range .Params.categories }}
3  <li><a href="{{ "/categories/" | relLangURL }}{{ replace . "/" "-" | urlize }}">{{ . }}</a></li>
4  {{ end }}
5</ul>

「スラッシュ ‘/’ を ハイフン ‘-’ 」に置換する力技でした。
もっとスマートな解決方法がある気がします。

おわりに

Hugo はカスタマイズが難しくとっつきにくさは否めません。
しかし、繰り返しになりますが、この速度はとても貴重 ですね。


Hugo のアップグレード情報は次をご覧ください。

Hugo News
https://gohugo.io/news/
この記事の著者 Webrow (うぇぶろう)
Web アプリ開発、 Web 顧問 エンジニア、WordPress サポートいたします。