PaperModでページネーションをカスタムする方法！

この記事ではPaperModでページネーションをカスタム、数字をつける方法について解説します！
このブログではテーマに PaperMod を使用しています。
説明が下手なのですが、PaperModのページネーションは前のページ/次のページのような形式です。
しかし、これでは最古のページにジャンプするのができなかったり、全部で何ページあるかがわかりにくいという問題があります。
そこで今回はPaperModのページネーションを
| << | < | 1 | 2 | 3 | 4 | 5 | > | >> |
のように変更します。
早速、Hugoのテンプレート機能を使ってPaperModのページネーション上書きしましょう！

やり方

まずはページネーションを表示させるテンプレート本体を作っていきます。
そのテンプレート本体をlist.htmlから呼び出してページネーション変更します。
ページネーションについて調べていたらこんなものを見つけました。

【Hugo】ページネーションの作り方

標準で用意されている！これは実装が楽そうで良かったです。
この記事を参考に作成します。
Hugoのテンプレート機能を使ってページネーションを変更しましょう。

テンプレートを作成する

ページネーションのテンプレート

layouts/partials/pagination.html を作成します。
そして次のコードをコピーして貼り付けてください。

1
2
3
4
{{/*  Thanks: https://joni.jp/pg/hugo-pagination/  */}}
<nav>
  {{ template "_internal/pagination.html" . }}
</nav>

このコードはHugoの内部テンプレートを呼び出しています。
元コードではナビゲーションタグで囲まれていなかったのですが、ナビゲーションリンク貼ってるんで適切でしょう。( 参考 )
ついでに内部テンプレートがどこにあるのか気になったのでソースを見ました。
(Hugo)/tpl/tplimpl/embedded/templates/pagination.html
が実装っぽかったです。ちゃんと調べてないのでわかりませんが。
とりあえず、これで関連記事のテンプレートは作成できました。
次はこのページネーションのテンプレートを呼び出していきましょう。

テンプレートの呼び出し

themes/PaperMod/layouts/_default/list.html を layouts/_default/list.html にコピーしてください。
コピーしたら88行目に

88
<footer class="page-footer">

と書かれていると思います。
この下にテンプレートを呼び出すコードを書いていきます。
まず、PaperMod標準のページネーションを無効にしましょう。
89行目から106行目までをコメントアウトするか削除してください。
これは知らなかったのですが、Hugoではコメントアウトする際、

<!-- Comment -->

のようにするのではなく、

{{/*  Comment  */}}

とするらしいです。
ここらへんの仕様はあんまよくわかってないのでいつか勉強したいです。
気を取り直して、呼び出す処理を書いていきましょう。

コメントアウトするのは

89
  <nav class="pagination">

から

106
  </nav>

までです。

無効化が完了したら、次のコードをコピーしてコメントアウト/削除した行の下に貼り付けてください。

1
2
{{/*  Thanks: https://joni.jp/pg/hugo-pagination/  */}}
{{- partial "pagination.html" . -}}

これでテンプレートを呼び出すコードは終わりです。

CSSを適用する

これだけでも一応は機能しますが、見た目が最悪なのでCSSを書いていきます。

assets/css/extended/custom.css を作成してください。
ここに作成したCSSは1つのファイルにまとめられます。( 詳細 )
次のコードをコピーして貼り付けてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* ページネーションを書き換える PaperModのページネーションがベース */
/* ul */
.pagination-default {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* li */
.pagination-default > .page-item {
    display: inline-block;
    width: 100%;
    text-align: center;
}

/* テキスト */
.pagination-default > .page-item a {
    display: block;
    color: var(--theme);
    font-size: 16px;
    line-height: 36px;
    background: var(--primary);
    border-radius: calc(36px / 2);
    padding: 0;
    margin-left: 5%;
    width: 90%;
}

/* 現在のページ */
.pagination-default > .active > a {
    background: var(--secondary);
}

/* ホバー */
.pagination-default > li:not(.active) > a:hover {
    background: var(--content);
}

これでCSSは終了です。
PaperModのCSSを参考に作成しました。
PaperModのCSSは themes/PaperMod/assets/css/common/main.css にあります。
現在のページの強調やホバー時に背景が変わるようにしました。
コレ、結構気に入ってます (笑)
CSSで疑似クラスやセレクタをまじめに使用したことがなかったのですが、かなり融通が効きますね。
HTML5 + CSS3 はチューリング完全だとか聞いたことがありますが納得です。
このブログでも使用しているのでいつか確認してみてください。
その…記事が増えないと表示されないので…

完成

完成すると次のように表示されていると思います。
十分な記事数がないと表示されないので注意してください。

完成したページネーションの見た目

(これは少しカスタムしてあるのでちょっとだけ見た目が違うかもしれません)
以上で終わりです！お疲れ様でした！

おわりに

今回はHugoのテンプレート機能を使ってPaperModのページネーションをカスタムしてみました。
その他にもテンプレート機能を使うことでさまざまなことができます。
このブログでは以前に PaperModで関連コンテンツを表示する方法！という記事も投稿しているのでこちらもぜひご覧ください！
最後まで読んでいただきありがとうございました。

やり方#

テンプレートを作成する#

ページネーションのテンプレート#

テンプレートの呼び出し#

CSSを適用する#

完成#

おわりに#

やり方

テンプレートを作成する

ページネーションのテンプレート

テンプレートの呼び出し

CSSを適用する

完成

おわりに