Hugo で前後の記事へのリンクを追加する

August 21, 2020 - 読了時間 1 分
hugo golang template

Twitter のタイムラインでたまたま JJUG サイトを Hugo を使ってリニューアルしたという投稿をみかけました。

当社のサイトも Hugo で作っているのもあり、どんな雰囲気か覗いてみました。

次の画像は JJUG サイトのコンテンツの最下部を切り取ったものです。

jjug-site-contents

JJUGサイトのコンテンツの最下部

次の違いに気付きました。

ぱっとみて前後の記事へのボタンはシンプルでいいなと思えました。そこで当社のサイトでも追加するために調べてみました。

テンプレートに前後の記事へのリンクを追加する

Hugo’s templates are context aware and make a large number of values available to you as you’re creating views for your website.

Hugo のテンプレートには組み込み変数がたくさん用意されているとあります。

Pages Methods によると、 Pages オブジェクトがもつ .Next/.Prev メソッドを使うことで 意図したページへのリンクを取得できるようです。

公式ドキュメントでは次のように .Site.RegularPages から Permalink を取得する例が紹介されています。

{{ with .Site.RegularPages.Next . }}{{ .RelPermalink }}{{ end }}

.Site.RegularPages からコンテンツを取得すると、すべてのコンテンツから日付順に取得します。

当社のサイトでは、それぞれメニュー別にコンテンツを管理しています。

例えば、ブログのコンテンツならば、ブログ内にあるコンテンツのみを扱いたいです。

そこで .Parent.Pages からコンテンツを取得することでメニュー内のコンテンツのみを扱えます。

{{ with .Parent.Pages.Next . }}{{ .RelPermalink }}{{ end }}

実際にはコンテンツのタイトルを取得したり、タイトルの位置調整をしたり、 Font Awesome のアイコンを設定したりして次のようになりました。

{{ with .Parent.Pages.Prev . }}
<span class="prev-page far fa-arrow-alt-circle-left">
  <a href="{{ .RelPermalink }}">{{ substr .Title 0 35 }}</a>
</span>
{{ end }}

ちょっとした工夫として、タイトルが長くても1行におさまるように substr を使ってタイトルを35文字以内にしています。

追記

タイトルの文字数が多くて1行におさまらないときは複数行にわかれて表示されることがスマートフォンのブラウザで確認できました。とくに substr を使う必要はありませんでした。

これらの設定により、 次のように前後を示す矢印アイコンとコンテンツのタイトルリンクが表示されるようになりました。

kazamori-contents

当社サイトのコンテンツの最下部

まとめ

実際のソースコードの差分は a0bfc32f になります。

テンプレートのカスタマイズと Pages にある情報を使ってコンテンツのタイトルやリンク情報を扱えることを学びました。

リファレンス

DIY: 机に穴をあける Hugo で SNS 向けのシェアボタンを追加する

関連記事

Hugo で SNS 向けのシェアボタンを追加する

August 22, 2020 - 読了時間 1 分
hugo golang template

Hugo の Shortcodes テンプレートを使う

August 1, 2020 - 読了時間 1 分
hugo golang template

AWS SDK for Go v2 のユニッテスト (モックテスト)

May 29, 2020 - 読了時間 2 分
aws testing golang