サイトを長く運営して記事数が数十、数百と増えてくると、トップページやカテゴリーの一覧ページが果てしなく縦に長くなりすぎてしまい、読者にとって非常に見づらく（ロードも遅く）なってしまいます。
そこで必須となる機能が、**「ページネーション (Pagination)」**の導入です。一定の件数ごとに記事リストを複数のページに分割（分割表示）して管理します。

実装が完了すると一覧ページの末尾に、よく見かける ← Prev 1 2 3 Next → のようなナビゲーションリンクが自動生成されるようになります。

1. 設定ファイル (hugo.toml)

まずは、1ページに何件表示するかを決めます。
hugo.toml に paginate という行を追加します（デフォルトは10件です）。

# hugo.toml
baseURL = '...'
title = '...'
theme = '...'

# 1ページあたりの記事数
paginate = 6

2. リストテンプレートの修正 (layouts/list.html)

一覧ページ (layouts/list.html) で、記事を取得する方法を変えます。
(※Hugo v0.145以前のバージョンでは layouts/_default/list.html を使用していました)
これまでは .Pages を使っていましたが、これを .Paginator.Pages に書き換えます。

<!-- layouts/list.html -->

<ul>
    <!-- 変更前: {{ range .Pages }} -->
    <!-- 変更後: -->
    {{ range .Paginator.Pages }}
    <li>
        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
        <time>{{ .Date.Format "2006-01-02" }}</time>
    </li>
    {{ end }}
</ul>

<!-- ページ送りボタンを表示する場所 -->
{{ partial "pagination.html" . }}

たったこれだけで、Hugoが自動的に記事を分割してくれます！便利！

3. ページ送りボタンの作成 (Partial)

次に、ページ移動のためのリンク（Prev/Nextなど）を作る部品を作成します。
themes/my-tutorial-theme/layouts/partials/pagination.html を新規作成し、以下のコードを記述します。

<!-- layouts/partials/pagination.html -->
{{ if gt .Paginator.TotalPages 1 }}
<nav class="pagination">
    {{ if .Paginator.HasPrev }}
    <a class="pagination-link" href="{{ .Paginator.Prev.URL }}">← Prev</a>
    {{ else }}
    <span class="pagination-link disabled">← Prev</span>
    {{ end }}

    <span class="page-number">
        Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}
    </span>

    {{ if .Paginator.HasNext }}
    <a class="pagination-link" href="{{ .Paginator.Next.URL }}">Next →</a>
    {{ else }}
    <span class="pagination-link disabled">Next →</span>
    {{ end }}
</nav>

<style>
/* 簡易的なスタイル (CSSファイルに移動させるのがおすすめ) */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
.pagination-link {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}
.pagination-link.disabled {
    color: #ccc;
    pointer-events: none;
    border-color: #eee;
}
.pagination-link:hover:not(.disabled) {
    background-color: #f5f5f5;
}
</style>
{{ end }}

ページネーションを設定してサイトの表示をスマートに保とう

一覧に表示する記事数が増加した際、すべての記事を一気に読み込ませてしまうと、表示速度（ロード時間）が長くなり読者の離脱に直結してしまいます。またスマホなどのモバイル環境ではスクロールが過大になってしまいます。

Hugoの .Paginator を使えば設定ファイルの件数（paginate）に従って一覧リストを動的に自動分割してくれるため、一覧機能を作る際はぜひ初めからページネーションを組み込んで、快適で分かりやすいリスト表示を設計しておきましょう！