HUGO のテーマを作ってみます 7(PAGINATION)

前回の記事では、 Menu Templates を使ってみました。今回は、 Pagination を使ってみます。

最初に、この記事の通り、サイトとテーマの骨組みを作成しておきました。

環境

Hugo Static Site Generator v0.38.2

Pagination

Hugo supports pagination for your homepage, section pages, and taxonomies.

Pagination | Hugo

homepage, section, taxonomies のページでページネーションがサポートされているようです。

Configure Pagination

Paginate

default = 10. This setting can be overridden within the template.

Pagination | Hugo

Hugo の標準では、 10 を区切りとするようです。

PaginatePath

default = page. Allows you to set a different path for your pagination pages.

Pagination | Hugo

Hugo の標準では、 /page/1/ のような URL になるようです。

baseof.html

以前の記事を参考に、 baseof.html ファイル (theme/<THEME>/layout/_default/baseof.html) を次のように作成しました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>
      {{ block "title" . }}
        {{ .Site.Title }}
      {{ end }}
    </title>
  </head>
  <body>
    {{ block "header" . }}
    {{ end }}
    {{ block "main" . }}
    {{ end }}
    {{ block "footer" . }}
    {{ end }}
  </body>
</html>

list.html

There are two ways to configure and use a .Paginator:

The simplest way is just to call .Paginator.Pages from a template. It will contain the pages for that page.

Select a subset of the pages with the available template functions and ordering options, and pass the slice to .Paginate, e.g. {{ range (.Paginate ( first 50 .Data.Pages.ByTitle )).Pages }}.

List Paginator Pages

一覧を表示するのに、 2 通りの方法があるようです。

.Paginator.Pages を使うシンプルな方法
.Paginate を使う方法。例えば、 {{ range (.Paginate ( first 50 .Data.Pages.ByTitle )).Pages }} のように記述すると、タイトルの順に、最初の 50 記事だけを対象に表示することができるようです。

今回は、一つ目のシンプルな方法で実装してみます。

Build the navigation

The .Paginator contains enough information to build a paginator interface.

The easiest way to add this to your pages is to include the built-in template (with Bootstrap-compatible styles):
{{ template "_internal/pagination.html" . }}
Build the navigation

ナビゲーションを表示するのに、 Hugo のビルトインのテンプレートがあるようです。 {{ template "_internal/pagination.html" . }} のように記述するだけでナビゲーションが表示できるようです。ナビゲーションのレイアウトをカスタマイズしたい場合は、手間がかかりますけど、 .Paginator のプロパティを参照して、自分で一から実装することもできるようです。今回は、 Hugo のビルトインのテンプレートを表示してみます。

以前の記事を参考に、 list.html ファイル (theme/<THEME>/layout/_default/list.html) を次のように作成しました。

{{ define "main" }}
  <main>
    <h1>{{ .Title | humanize }}</h1>
    {{ template "_internal/pagination.html" . }}
    {{ range .Paginator.Pages }}
      <article>
        <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
        <div>{{ .Date.Format "2006/01/02" }}</div>
      </article>
    {{ end }}
    {{ template "_internal/pagination.html" . }}
  </main>
{{ end }}

{{ range .Paginator.Pages }} で記事を表示しています。 {{ template "_internal/pagination.html" . }} で Hugo のビルトインのナビゲーションを表示しています。

single.html

以前の記事を参考に、 single.html ファイル (theme/<THEME>/layout/_default/single.html) を次のように作成しました。

{{ define "main" }}
  <main>
    <h1>{{ .Title }}</h1>
    {{ .Content }}
  </main>
{{ end }}

記事を表示するだけのレイアウトです。

content

ページネーションできるだけの記事が必要なので、次の 31 のファイルを作成しました。

$ install -d content/post
$ for i in $(seq -f %02g 1 31)
do
cat <<word > content/post/post-${i}.md
---
title: post ${i} title
date: 2018-01-${i}
---
This is post ${i} *content*.

This is paragraph **2**.

This is paragraph ***3***.
word
done