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

toc目次

関連記事の一覧表示

Hugoには関連記事を表示させる機能がデフォルトで備わっているため、テンプレートを修正すれば関連記事を表示させることが可能です。

関連記事を表示させる方法

関連記事用のHTMLファイル作成

Hugoのテーマフォルダー内のlayouts/partialsフォルダーに関連記事用のHTMLファイル(related.html)を作成します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!-- 最大5つの関連記事を作成するサンプル -->
{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<h3>関連記事</h3>
<ul>
  {{ range . }}
  <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
  {{ end }}
</ul>
{{ end }}

singleページテンプレート修正

Hugoのテーマフォルダー内のlayouts/_default/single.htmlの関連記事を表示させたい部分に{{ partial "related.html" . }}を追記します。

1
2
3
4
5
{{ define "main" }}
...
{{ partial "related.html" . }} <!-- 追記 -->
...
{{ end }}

表示される関連記事の調整

Hugoはデフォルトで関連記事を取得する設定が行われていますが、表示する記事を調整したい場合はhugo.toml[related]設定を追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 設定例
[related]
  includeNewer = true
  threshold = 80
  toLower = false

[[related.indices]]
  name = "tags"
  weight = 100

[[related.indices]]
  name = "categories"
  weight = 60

[[related.indices]]
  name = "keywords"
  weight = 30

[[related.indices]]
  name = "date"
  pattern = "2006"
  weight = 10

tagscategoriesなどに重み(weight)を設定し、重みがしきい値(threshold)を超えると関連記事として表示されるようになります。

[related]設定で使用されるオプションは以下の通りです。

トップレベルの設定オプション

オプション 内容
includeNewer trueを設定すると現在のページよりも新しいページを関連記事に含める
threshold 関連記事を表示させるしきい値(0 - 100の値を設定)
toLower trueを設定するとキーワードを小文字にして比較する

インデックスごとの設定オプション

オプション 内容
name マッピングに使用する値(tags, keywords, dateなど)を指定
weight パラメーターの重みを設定(負の値も設定可能)
pattern "2006"を設定すると同じ年、"200601"を設定すると同じ年月に重みが加わる
dateのみで有効)
toLower trueを設定するとキーワードを小文字にして比較する

参考