Hugoで関連記事を表示する

このサイトに関連記事を表示しました。

Hugo公式サイトのRelated Contentを参考にしました。

/layouts/partials/related.htmlを作成して、以下を記述する。

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

個別記事のページのレイアウトを担う/layouts/_default/single.htmlの表示させたい場所に、以下の記述を追加する。

{{ partial "related.html" . }}

これで関連記事を最大5つ表示させることができました。

時間がある時にCSSを使って装飾したり、Related Contentのページを参考に表示させる記事の調整をしようと思います。

← Hugoの自作テーマを作る part1

comments powered by Disqus