HugoでPagination実装してみた。

hugoのacademicテーマのpaginationをカスタマイズしてみました。

記事一覧のpaginationがいささか寂しいなと感じたのでカスタマイズしました。

実装前は以下のようなpaginationでした。

実装後は以下のようになりました。パチパチ。

hugo academicのデフォルトのテーマは以下のようなpartialになっています。

[themes/academic/layouts/partials/pagination.html]

{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
<nav>
  <ul class="pagination justify-content-center">
    {{ if .Paginator.HasPrev }}
    <li class="page-item"><a class="page-link" href="{{ .Paginator.Prev.URL }}">&laquo;</a></li>
    {{ end }}
    {{ if .Paginator.HasNext }}
    <li class="page-item"><a class="page-link" href="{{ .Paginator.Next.URL }}">&raquo;</a></li>
    {{ end }}
  </ul>
</nav>
{{ end }}

オーバライドみたいな感じで上書きするみたいなので、以下のディレクトリにコードを書きました。

layouts/partials/pagination.html

{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
<nav>
  <ul class="pagination justify-content-center">
    {{ if .Paginator.HasPrev }}
      <li class="page-item"><a class="page-link" href="{{ .Paginator.Prev.URL }}">&laquo;</a></li>
      <li class="page-item"><a class="page-link" href="{{ .Paginator.Prev.URL }}">{{ .Paginator.Prev.PageNumber }}</a></li>

    {{ end }}
      <li class="page-item"><a class="page-link" href="{{ .Paginator.URL }}">{{ .Paginator.PageNumber }}</a></li>
    {{ if .Paginator.HasNext }}
      <li class="page-item"><a class="page-link" href="{{ .Paginator.Next.URL }}">{{ .Paginator.Next.PageNumber }}</a></li>
      <li class="page-item"><a class="page-link" href="{{ .Paginator.Next.URL }}">&raquo;</a></li>
      {{ end }}
  </ul>
</nav>
{{ end }}

最初パラメータが何をいじったらいいのかよくわからなかったのですが以下のサイトを参考にうまくできました。

Hugo Pagination

• .Paginator.PageNumber 現在のページ番号を数値で
• .Paginator.Next.PageNumber 次のページ番号を数値で
• .Paginator.Prev.URL 前のページのurlを所得

やってからまとめると意外に簡単ですね.

スタイルはbootstrapなので以下のサイトを参考にしました。

Bootstrap Pagination

まとめ

hugoのテンプレートのpaginationを軽く編集しました。

より良いサイトに地道にしていきたいですね。