2019/07/04

ブログへのPagination導入

区切り数の指定

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

Pagination 設定

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

<link rel="stylesheet" href="{{ "/css/pagination.css" | relURL }}" />

{{ partial "header.html" . }}

{{if not .IsHome }}
<h1>{{ .Title | markdownify }}</h1>
{{ end }}

{{ .Content }}
{{ partial "pagination.html" . }}

<ul>
  {{ range .Paginator.Pages }}
  <li>
  <!--- snip --->
  </li>
  {{ end }}
</ul>

{{ partial "footer.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