HugoでRelated Content(関連記事)を表示する

はじめに

このブログはGo製のブログジェネレータHugoを使って運用しています。

ブログによくある「See Also」的なものが表示できないかと思って調べたところ、v0.27から公式にサポートされていました。

ここに書いてある通りに設定すれば、簡単に関連記事が表示できます。

Hugoで関連記事を表示する方法

公式サイトのとおりに、 layouts/partials/related.htmlを作成します。

{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<h3>See Also</h3>
<ul>
  {{ range . }}
  <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
  {{ end }}
</ul>
{{ end }}

layouts/_default/single.htmlで読み込みます（articleタグの下がよいと思います）。

<article>
...
</article>

{{ partial "related.html" . }}

config.tomlを使って細かい設定をすることも可能です（これは必須ではありません）。

以上の変更はこちらのcommitです。

詰まったところ

buildに失敗して下記のようなエラーが出ました。

Error while rendering "page": template: _default/single.html:35:15:
executing "_default/single.html" at <partial "related.htm...>: 
error calling partial: template: partials/related.html:1:20:
executing "partials/related.html" at <.Site.RegularPages.R...>: 
can't evaluate field Related in type hugolib.Pages

原因は、CIで設定しているHugoのバージョンが古かったことです。

わたしがサイトを作ったのは2016年で、そのときからWerker CIの設定ファイルを一度もアップデートしておらず、本番環境のHugoが古いバージョンになっていました。

私が使っていたのはなんとv0.26！「Related Content」のサポートはv0.27からなので、惜しかったです。

単純なミスですが、30分ほどハマってしまいました。

おわりに

HugoでRelated Content(関連記事)を表示する方法について書きました。

これからはよく使うツールのバージョンアップは定期的に行おうと思います。