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 関連記事](https://res.cloudinary.com/meganii/image/upload/v1596888296/36875101903_b778fc6630_o_sbfqjs.png)
関連記事をどのように抽出しているかは、おいおいドキュメントやソースを確認してみたいと思います。
Related contents
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2017.12.22
はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/f_auto,q_auto/v1594903789/sislab_hugo_j8ykf6.png)
TECH
2017.01.08
静的サイトジェネレータ「Hugo」でシンプルブログサイトを構築する
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/f_auto,q_auto/v1594903789/sislab_hugo_j8ykf6.png)
TECH
2023.02.03
Hugo v0.109.0でパンくずリストをシンプルに実装する
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2022.08.14
GitHub PagesからCloudflare Pagesへの移行
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/f_auto,q_auto/v1594903789/sislab_hugo_j8ykf6.png)
TECH
2020.03.13
npm-run-allでローカルAPI serverとHugo serverを同時に実行する
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2019.10.11
AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2019.10.06
AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/f_auto,q_auto/v1594903789/sislab_hugo_j8ykf6.png)
TECH
2016.09.08
Circle CIでテストを定期実行する