2019/07/04

ブログへのPagination導入

区切り数の指定

config.tomlより指定可能1。paginate = 30とした。

Pagination 設定

カテゴリ毎の記事一覧を表示するlist.htmlへ手を加える。

デフォルトである{{ template "_internal/pagination.html" . }}2の見栄えが良くないため、独自に記述。

{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
  <nav class="pagination">
    {{ if .Paginator.HasPrev }}
    <a href="{{ .Paginator.Prev.URL }}">&lt;&lt;</a>
    {{ else }}
    <span id="unavailable">&lt;&lt;</span>
    {{ end }}
    <span>Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</span>
    {{ if .Paginator.HasNext }}
    <a href="{{ .Paginator.Next.URL }}">&gt;&gt;<a>
    {{ else }}
    <span id="unavailable">&gt;&gt;</span>
    {{ end }}
  </nav>
{{ end }}

  1. Configure Hugo | Hugo
  2. Pagination | Hugo