hugoで関連記事を表示する

ツイートブックマーク

最近hugoのテンプレートを変更したり、過去にoctopressから移行できてない記事を移行しました。
ocotpressからの移行って普通は必要ないんですが、ファイルのディレクトリ変えたかったりいろいろな諸事情があったので頑張っていました。

hugoの関連記事表示はできるのか？

残念ながら完全に関連記事を表示する事は現状無理です。
Roadmapには今後対応するみたいな事書いてありますが、気長に待つしかなさそうです。

じゃあ今回はどのように関連記事を表示したのか

記事のYaml部分に「related」いうパラメータを設定して、それに属している記事を表示するようにしました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


{{ if .Params.related }}
  {{ $related := .Params.related }}
  <h3>関連記事</h3>
  <ul>
  {{ $page_link := .Permalink }}
  {{ $title := .Title }}
  {{ range (where .Site.Pages ".Params.related" $related) }}
      {{ $page := . }}
      {{ if ne $title  $page.Title }}
      <li><a href="{{ $page.Permalink }}">{{ $page.Title }}</a></li>
      {{ end }}
  {{ end }}
  </ul>
{{ end }}

Params.relatedが記事に設定されていたらwhere関数を用いてrelatedが同じ記事を取得するという簡単なものです。

実査にgithub上でテンプレート自体は公開しているので、そちらを見ればすぐにわかると思います。

記事はどのように指定するのか？

yamlの部分にこんな感じで書いています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


---
date: "2015-12-04T00:25:36+09:00"
title: "fluent-plugin-mysqlrecord作ってみた"
categories:
  - tech
tags:
  - fluentd
  - ruby
  - gem
eyecatch: fluentd.png
related: fluentd
---

tagから取得できるようにすれば？

たしかに公式のドキュメントにもタグを元に関連記事を表示する方法が記載されています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<ul>
{{ $page_link := .Permalink }}
{{ $tags := .Params.tags }}
{{ range .Site.Pages }}
    {{ $page := . }}
    {{ $has_common_tags := intersect $tags .Params.tags | len | lt 0 }}
    {{ if and $has_common_tags (ne $page_link $page.Permalink) }}
        <li><a href="{{ $page.Permalink }}">{{ $page.Title }}</a></li>
    {{ end }}
{{ end }}
</ul>

記事一覧をすべて取得して、tagがどれか一つマッチするものだけ表示するという結構鬼のような方法ですね。
この方法だと記事の生成に1000記事程度で8秒ぐらいかかってしまいます・・・。さらに、タグに紐付いている記事が多いと記事がものすごく表示されてしまいます。

あとから気づいたんですがScratchを使えば、関連記事の数は減らせるのかな？

今度試してみます。

最後に

前回Hugoを導入した時は適当にテンプレートカスタマイズしていましたが、今回はちゃんと英語のドキュメントと格闘しながら、カスタマイズしてみました。

golangを学びながらhugoのテンプレートカスタマイズすると楽しいので、興味がある方はぜひ試してみてください。

まだまだいろいろ試行錯誤をしている段階なので、もっと良い方法を知っている方は教えていただけると助かります。