WEBTODESIGN

Hugoの記事下に前のページと次のページのリンクをつける

Hugoで、記事ページに前・次のページへのリンクをつけてみました。テンプレートファイルに簡単なコードを追加するだけです。

対象

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

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

テンプレートにコードを記述する

記事ページのテンプレートであるlayouts/_default/single.htmlの、リンクを表示したい場所にコードを付け加えます。

最低限のコード

リンクを表示するための最低限のコードは以下です。ひとつずつみていきましょう！

{{ with .Prev }}
    <a href="{{ .Permalink }}">{{ .Title }}</a>
{{ end }}
{{ with .Next }}
    <a href="{{ .Permalink }}">{{ .Title }}</a>
{{ end }}

解説

前・次のページがあるときはリンクが現れ、無いときは何も表示されないという記述にしていきます。

まず、「もし～のとき」という場合分けをしてくれるwith関数を使います。with関数の形式は以下です。

{{ with 条件 }}内容{{ end }}

「条件」を満たせば「内容」を出力してくれます。場合分けにはif関数もあるのですが、with関数はより簡潔な記述にすることができます。（例を最後に余談として載せますので気になる方はそちらを！）

そして、今回の「条件」は前・次のページがあるかどうかです。前・次のページがあるかどうかは、Hugoのページ変数が用意されています。

.Prev
.Next

ページ変数は先程のwith関数と組み合わせて使います。「.Prev」は前のページ、「.Next」は次のページを検出してくれます。

そして、with関数の「内容」に当たるのは前・次ページへのリンクです。

<a href="{{ .Permalink }}">{{ .Title }}</a>

「.Permalink」は前・次ページへのリンクを、「.Title」は記事タイトルを出力します。

以上の記述をすべて組み合わせると、以下のようになります！

{{ with .Prev }}
    <a href="{{ .Permalink }}">{{ .Title }}</a>
{{ end }}
{{ with .Next }}
    <a href="{{ .Permalink }}">{{ .Title }}</a>
{{ end }}

前の記事がある場合は前の記事のリンクつきのタイトルを表示、次の記事がある場合は次の記事のリンクつきのタイトルを表示する記述になりました！

これをテンプレートに追加すると、追加した場所にリンクが表示されるようになっているはずです😉あとはクラスなどを付与してCSSを整えれば完成です！

ページ変数についての詳細はHugoの公式ドキュメントのPage Variablesをご確認くださいね。

余談

場合分けにはwith関数の他にif関数もあって、基本的な形式は同じなんです。同じならifでもいいじゃ～んて思いますよね！

{{ if 条件 }}内容{{ end }}

試しに、今回の記述を単純にifに置き換えてみると以下です。

{{ if .Prev }}
    <a href="{{ .Permalink }}">{{ .Title }}</a>
{{ end }}
{{ if .Next }}
    <a href="{{ .Permalink }}">{{ .Title }}</a>
{{ end }}

これを実際に設置してみると、リンク先は前・次のページにはならず 「.Permalink」はこの記事のリンク、「{{ .Title }}」はこの記事のタイトルになってしまいます😨アレレ～

if関数で同じ機能にしたい場合は、以下のように記述すれば正しく動作します。

{{ if .Prev }}
    <a href="{{ .Prev.Permalink }}">{{ .Prev.Title }}</a>
{{ end }}
{{ if .Next }}
    <a href="{{ .Next.Permalink }}">{{ .Next.Title }}</a>
{{ end }}

「.Prev」と「.Next」が何度も出てきますね。

if関数の中身は、データを探す基準がこのページなんですね。なので、前のページのリンクを出力したければ 「前のページの」という前置きが必要です。

それに対してwith関数の中身は、条件で指定した場所からデータを探すんですね。なので、withの場合は前置きをしなくても大丈夫というわけでした😌

ナルホドナ～。

公式ドキュメント

場合分けについての詳細はHugoの公式ドキュメントのConditionalsの項目をご確認くださいね。

RECOMMENDATION

NEWEST