Menu Close
  1. SIS Lab
  2. >
  3. Blog
  4. >
  5. HugoのRelated Contentを利用して関連記事を表示する

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

更新日:2020.03.31 作成日: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 }}

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

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

スポンサーリンク

Related contents

TECH

2017.12.22

はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました

TECH

2017.01.08

静的サイトジェネレータ「Hugo」でシンプルブログサイトを構築する

TECH

2020.03.13

npm-run-allでローカルAPI serverとHugo serverを同時に実行する

TECH

2019.10.11

AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜

TECH

2019.10.06

AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した

TECH

2016.09.08

Circle CIでテストを定期実行する

TECH

2017.10.14

HugoでのシンタックスハイライトにPython Pygmentsが不要となった

TECH

2017.08.31

Hugo Shortcodesの作り方