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

JJUGのサイトをリニューアルしました。サーバを移設したばかりなので、環境によってはまだ旧サイトが表示されるかも知れません。https://t.co/iQrMXbOSV5

あと、Hugoでコミュニティ向けの良いテンプレあったら教えてください！（Hugoに限らないかも！）

— Shin Tanimoto / CERO-METAL (@cero_t) August 20, 2020

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

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

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

• シェア用途の各種ソーシャルボタン
• PREVIOUS POST と NEXT POST のボタン

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

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

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 を使う必要はありませんでした。

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

まとめ

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

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

リファレンス

• Variables and Params