• SIS Lab
  • >
  • Blog
  • >
  • HugoのRelated Contentを利用して関連記事を表示する

HugoのRelated Contentを利用して関連記事を表示する

更新日:2023.05.05 作成日:2017.10.07

いつのまにかHugo 0.29から関連コンテンツ表示機能が追加されています。これによって他のCMSではプラグインで簡単にできていたのに、Hugoではできないというポイントが解消されました。もはや、Hugo最強説!!。

さっそくこのブログにも試してみました。

使い方は、ドキュメントを見ていただければ分かると思いますが、.Site.RegularPages.Relatedに関連ページが含まれているのでそれを表示するだけです。

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

そうすると、以下の通りいい感じで関連記事を出してくれます。関連記事表示のスニペットを入れたからといって、ビルド時間が遅くなったというのは感じられませんでした。(元々爆速なので)

Hugo 関連記事

関連記事をどのように抽出しているかは、おいおいドキュメントやソースを確認してみたいと思います。

Related contents