環境

  • Hugoのバージョン: 0.54.0
  • 使用テーマ: Robust(2019年3月10日時点の最新バージョン)

前提

/content 直下に固定ページのファイルを配置し、それ以外の記事ファイルは置かないようにします

これで固定ページのtypeパラメータに”page”が設定されるので、変数.Typeが”page”かどうかで固定ページとそれ以外の条件分岐ができます。

なお記事のフロントマターにtypeを設定すると上書きされてしまうので、特別な意図がない限りは設定しないようにしましょう。

参考:静的サイトジェネレータHugoを使ったサイト構築(レイアウト編3)- feedtailor Inc. スタッフブログ

なおRobustテーマをカスタマイズする場合には、/themes/hugo_theme_robust 内のlayoutsフォルダをルートディレクトリのlayoutsフォルダへコピーして、コピー元のファイルではなくコピーしたファイルを編集します。

ただしすでにlayoutsフォルダ内の一部のファイルやフォルダをコピー済みの場合には、まだ存在していないファイルのみをコピーしてください。

またすでにlayoutsフォルダをまるごとコピー済みの場合には、コピーしないでください。

今回の方法が必要となる場合

この方法は階層化したセクションで記事を管理している場合のやりかたです。(記事→Hugoでセクション機能を使ってカテゴリを階層化する (&ソート・記事数取得など)

記事ファイルを/content 内の単一のフォルダで管理している場合は次のようにしてください。

今回の方法が不要である場合

たとえば/content/posts 直下に固定ページ以外のすべての記事をまとめて置いているなら、もっとシンプルなやり方で済みます。

すなわち{{ with .PrevInSection }}{{ with .NextInSection }}を使って同じ階層にあるファイル同士で前後記事リンクを貼り合うようにすればいいです。

具体的にはこちらのページで解説されています。

次のページ、前のページへのリンクを表示する - まくまくHugo/Goノート

なおRobustテーマならデフォルトで対応しているので、固定ページを/content 直下か別のフォルダに隔離するだけで済むと思います。

それでは本題に入ります。

やりたいこと

セクションを階層化すると、Robustテーマのデフォルトでは同じセクション内の記事同士でしか前後記事リンクが表示されません。

そこでセクション外の記事も表示するために、{{ with .PrevPage }}{{ with .PrevPage }}を使って前後に記事があればとにかくリンクを表示する、というやり方をしていたんですが、そうすると今度は/content 直下に置いた固定ページも対象に含まれてしまうという問題がありました。

そこで、次のようにしたいと思います。

  • 前後に記事があるすべての投稿記事に前後記事へのリンクを表示させる
  • ただし固定ページでは前後記事へのリンクを非表示にする
  • また通常の記事の前後に固定ページがある場合に、その記事に固定ページへの前後記事リンクが表示されるのを防ぐ

固定ページはなるべくシンプルな見た目にしたいし、通常の記事からは区別して扱いたいということです。

ちなみにこのブログはAboutページやお問い合わせページを固定ページとして扱っています。

やったこと

Robustテーマの場合ですが、single.htmlの該当箇所で次のようにしています。

<ul>
    {{ if ne .Type "page"}}
        {{ with .PrevPage }}          
            {{ if ne .Type "page"}}
            <div class="prevarticlebutton">
                <header class="prevarticle"><h3><span class="mgr-half"><i class="far fa-arrow-alt-circle-left"></i></span>前の記事</h3></header>
                {{ .Render "li_sm" }}
            </div>
            {{ end }}
        {{ end }}
        {{ with .NextPage }}
            {{ if ne .Type "page"}}
            <div class="nextarticlebutton">
            <header class="nextarticle"><h3><span class="mgr-half">次の記事</span><i class="far fa-arrow-alt-circle-right"></i></h3></header>
            {{ .Render "li_sm" }}
            </div>
            {{ end }}
        {{ end }}
    {{ end }}
</ul>

前の記事(前半)を例にとると、

  • 最初の{{ if ne .Type "page"}}で、「いま表示している記事が固定ページでない」場合に限定される
  • その下の{{ with .PrevPage }}でさらに、「前の記事が存在する」場合に限定される
  • その次の{{ if ne .Type "page"}}でさらに、「その前の記事が固定ページでない」場合に限定される

つまり「通常の記事ページにおいて、ひとつ前の通常記事へのリンクのみを表示する」ことになり、 固定ページはリンク元としてもリンク先としても除かれます! やったー。

なお、最初の{{ if ne .Type "page"}}とその後の{{ if ne .Type "page"}}で「いま表示している記事の.Type」から「前の記事の.Type」へと判定する対象が変わるのは、{{ with .PrevPage}} 内のコンテキストに切り替わったからだと思います(自信なし)。

参考ページ

おわりに

シンプルな見た目になってよかったです。

変なところがあったらおしえていただけるとうれしいです。