Hugoで構築するブログに"おすすめの記事"機能を実装する

はじめに

ブログを構築していると、特定の記事をピックアップしてユーザーに読んでほしい事よくありますよね。Hugoを使ってると静的なサイトのため中々実装が面倒くさいのですが、色々こねくり回したうえでブログを構築する際に「おすすめの記事」機能を実装する方法**を共有します。

今回の実装ではHugoの記事のFront Matterに設定したパラメータをテンプレートで活用し、表示を切り替える方法で実装していきます。「favorite」というカスタムパラメータを利用して、“おすすめの記事”として表示したい記事を任意で設定できるようにします。

実装のポイント

• 記事のFront Matterに favorite: true を付与すると、その記事が“おすすめの記事”扱いになるようにする。再利用可能なpartialsを作成する
• もし「favorite指定の記事が3つ未満」だった場合、不足分を通常の記事の中から選んで補う。
• セクション（ディレクトリに一覧で表示しているページ）か、それ以外のページ(indexページ)かで取り出す記事の範囲を変える。
• セクションページの場合は、同じディレクトリ配下の記事を対象にする。
• それ以外のページ（個別記事など）では、サイト全体の“おすすめ記事”を対象にする。

実装（コード全文）

以下実装です。今回はpartialsに入れて、再利用して利用するためそのためのロジックが面倒臭いです。セクション一覧ページ（.Kind "section"）と、それ以外のページを判定し、同じディレクトリ配下の記事 or グローバルの“おすすめの記事”を表示しています。

{{ $isListPage := eq .Kind "section" }}
{{ if $isListPage }}
  <!-- list.html の処理（同じディレクトリ配下のみ）-->
  {{ with .File }}
    {{ $currentDir := .Dir }}
    {{ $favPages := first 3 (where (where $.Site.RegularPages "File.Dir" $currentDir) "Params.favorite" true) }}
    {{ $favCount := len $favPages }}
    {{ if lt $favCount 3 }}
      {{ $remain := sub 3 $favCount }}
      {{ $otherPages := first $remain (where (where $.Site.RegularPages "File.Dir" $currentDir) "Params.favorite" "!=" true) }}
      {{ $favPages = union $favPages $otherPages }}
    {{ end }}
    {{ if gt (len $favPages) 0 }}
      <div>
        <h2 class="mb-4 text-xl font-bold text-primary custom-break">
          おすすめの記事
        </h2>
        <ul class="space-y-2">
          {{ range $favPages }}
            <li>
              <a
                href="{{ .RelPermalink }}"
                class="text-secondary hover:underline">
                {{ .Title }}
              </a>
            </li>
          {{ end }}
        </ul>
      </div>
    {{ end }}
  {{ end }}
{{ else }}
  <!-- グローバルのお気に入り記事を取得 -->
  {{ $favPages := first 3 (where $.Site.RegularPages "Params.favorite" true) }}
  {{ $favCount := len $favPages }}
  {{ if lt $favCount 3 }}
    {{ $remain := sub 3 $favCount }}
    {{ $otherPages := first $remain (where $.Site.RegularPages "Params.favorite" "!=" true) }}
    {{ $favPages = union $favPages $otherPages }}
  {{ end }}
  {{ if gt (len $favPages) 0 }}
    <div>
      <h2 class="mb-4 text-xl font-bold text-primary custom-break">おすすめの記事</h2>
      <ul class="space-y-2">
        {{ range $favPages }}
          <li>
            <a
              href="{{ .RelPermalink }}"
              class="text-secondary hover:underline">
              {{ .Title }}
            </a>
          </li>
        {{ end }}
      </ul>
    </div>
  {{ end }}
{{ end }}

このコードを、対応するテンプレート (例: layouts/partials/popular-articles.html など)に書いて、それを{{ partial "sidebar/popular-articles.html" . }}などで呼び出すことで人気の記事機能を実装しています。

実際に使うFront Matter例

---
title: ブログのタイトル
date: 2025-01-24T00:25:00.000Z
favorite: true
---
## サイトの中身
(本文)

上記ができたら、記事ファイルのFront Matterでfavorite: trueとしておくと、この記事が「おすすめ記事」としてリストアップされます。3つ以上の記事に favorite: true を指定すると、そのうち最新順や表示順序の異なる記事をどう並び替えるかは、この実装例では first 3 としているため、先頭から3つが自動的に選ばれます。

（並び順をカスタマイズしたい場合は、別途 sort や last などを組み合わせて調整してください。）