hugo
Pocket

Hugoのv0.27から使えるようになったRelated Contentを使って関連記事を表示してみます。

Related Content

このドキュメントを参考にすれば、特に難しいことはなくできるはずです。

layouts/partials/related.html

先ほどのドキュメントからですが以下のように書きます。「first」と書かれた右にある数字は表示数を指定できます。

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

また、関連記事である以外は普通のリストなので、サムネイルを出すことももちろんできます。以下サムネイルを出してるパターンです。

{{ $related := .Site.RegularPages.Related . | first 6 }}
{{ with $related }}
<section>
  <h3>See Also</h3>
  <ul>
    {{ range . }}
    <li>
      <a href="{{ .RelPermalink }}">
        {{ with .Params.thumbnail }}
        <img src="{{ $.Site.BaseURL }}{{ . }}" alt="">
        {{ end }}
        <span>{{ .Title }}</span>
      </a>
    </li>
    {{ end }}
  </ul>
</section>
{{ end }}

config.toml

ドキュメントではhtmlだけでも、デフォルト設定で表示されるような感じで書かれてると思ったんですが、htmlだけでは表示されずconfig.tomlに記述を追加することで表示されました。

表示されない場合はconfig.tomlを設定してみるといいかもです。というか細かく関連の条件設定できるので、書くのがオススメです。

[related]

threshold = 80

includeNewer = false

toLower = false

[[related.indices]]
name = "keywords"
weight = 150
[[related.indices]]
name  = "author"
toLower = true
weight = 30
[[related.indices]]
name  = "tags"
weight = 100
[[related.indices]]
name  = "date"
weight = 10
pattern = "2006"

以下項目の説明ですが、よく分からないのもあるので間違ってたら教えてください。あと予想で書いてるのもあります。

threshold

いきなりですが、よく分からない…(笑)関連のマッチ度とかですかね…?キーワードの完全一致かどうかを0から100のレベルで設定できる、とかでしょうか。

includeNewer

これは記事より新しい投稿を関連の対象に含めるかどうかです。falseにしていると、その記事より古いものが関連の対象になるため、記事の内容を変更したり設定を変更しない限りは同じ記事が関連記事として表示されます。

trueにすると新しい記事も含まれる、要は全ての記事が対象になります。そのため新しい記事が追加されるたびに関連記事の対象が増えて、関連記事の表示も変わってくる可能性があります。

toLower

大文字・小文字の区別です。trueにすると大文字・小文字も関連記事の要件に含まれるようです。そのぶん若干パフォーマンスは下がるようですが、より正確な関連記事になります。

related.indicesでさらに細かい設定ができます。

name

おそらく記事ごとのfrontmatterで設定してるどのパラメーターで判断するかを指定できるものだと思います。

authorやtags、keywords、時間、日付などを指定できます。

weight

関連記事の抽出でどれぐらいの重要度かを指定できます。0にしたり、負の整数にもできます。この数字を調整することで、より自分が思う関連記事の表示に近づけることができます。

pattern

これは日付のみに対応しています。2017と設定すると2017年に公開した記事の関連度が高くなります。更新頻度が高いブログの場合は201701と月レベルでの設定もできます。

toLower

これは上記で書いたtoLowerと同じく、大文字・小文字の区別についてです。

最後にサンプルです。まだ作成中ですが、スライダーと組み合わせて、関連記事をスライドさせるようなものを作っています。

hugo-related-sample

こちらのテーマに追加予定です。ぜひ使ってみてください。

https://github.com/mismith0227/hugo_theme_pickles

Pocket

Tag :