WEBTODESIGN

Hugoで記事下に関連記事を表示する

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

前提

  • 自分でHugoのデザインをいじりながらサイトを作っている
  • HTML&CSSの基本的な知識はある

以上に該当する方向けの記事となります。使用したHugoのバージョンはv0.78.2です。

関連記事をリストアップする

実際のコード

関連記事があった場合、最大3件関連記事をリストアップするという記述です。

{{ with .Site.RegularPages.Related . | first 3 }}
<ul>
    {{ range . }}
    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
    {{ end }}
</ul>
{{ end }}

解説

ひとつずつ見ていきましょう！

{{ with .Site.RegularPages.Related . | first 3 }}
～
{{ end }}

まず、with関数で場合分けをしています。

with関数は、指定した値が設定されていた場合内容を実行し、値が設定されていない場合はスキップしてくれるというシンプルな関数です。また、取得した内容を「.」で置き換えることができます。（withの公式ドキュメント）

{{ with 条件 }}「.」を使う内容{{ end }}

今回の条件は以下です。

.Site.RegularPages.Related . | first 3

「.Site.RegularPages」は記事ページ、「.Related」は関連するものを指します。つまり関連記事のことです！

なので、今回の場合は関連記事があった場合内容を実行するという意味になります。

関連記事はタグ付けなどを読み取ってHugoが自動的に決めてくれます。スゴイ。この関連性は、config.tomlで設定も可能です。（Configure Related Contentの公式ドキュメント）

「| first 3」は最初の3件という意味です。5件取得したければ5にすればOKです。ここのポイントは、最大3件であるということです。1件しかない場合でも、withは実行されます。

with関数の中には以下の用に記述します。ulごとwithで囲っているのは、関連記事がなかったときはなにも出力しないようにするためです。なので、h3等でタイトルを付ける場合は、with関数の中に書いておきましょう。

<ul>
    {{ range . }}
    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
    {{ end }}
</ul>

ここではrange関数を使います。rangeは繰り返しをする関数で、条件が尽きるまで繰り返し出力します。

{{ range 条件 }}内容{{ end }}
{{ range . }}
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{ end }}

今回の場合は、with関数の内容を置き換えてくれる「.」を使用しています。「.」の中身は「関連記事3件」なので、関連記事の内容を3件分繰り返すということになります。つまり、liタグが３個出力されるということです。

「.RelPermalink」はその記事のリンク、「.Title」はその記事のタイトルを取得しています。タグや日付、サムネなども取得することができます。

以上を組み合わせると以下のようになります。

{{ with .Site.RegularPages.Related . | first 3 }}
<ul>
    {{ range . }}
    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
    {{ end }}
</ul>
{{ end }}

関連記事があった場合最大3件リストアップする記述ができました！（1件しかなかった場合は1件しか表示されません。）

ulやliにクラスを付与して、CSSで装飾すれば完成です。

RECOMMENDATION

NEWEST