✒️ タグ機能について④

タグ追加ごとに、タグ一覧ページの作成が必要

新規タグ追加毎にタグ一覧ページを作成しないといけないのは、管理が煩雑となり、ミスも多くなります。

タグ毎に異なる内容のページを用意する必要がないのであれば、ひな形から自動作成するのが便利です。

👉 Eleventyには、１つのテンプレートにより、複数ページを自動生成するページング機能が標準で存在します。

Eleventyのページング（Pagination）とは、

👉 配列データを分割して複数ページを自動生成する機能です。

例えば：

• ブログ記事一覧を10件ずつ表示
• タグごとの記事一覧ページを作る

といった用途で使われます。

なぜページングが必要？

もしページングを使わないで一覧ページを作成した場合…

• 記事が100件 → 1ページに全部表示
• ページが長くなりすぎる
• 表示が重くなる
• UXが悪化

👉 本来、こういった事を解決する為のものがページング機能です。

基本的な仕組み

Eleventyでは、テンプレートのフロントマターに pagination を書くだけです。

---
pagination:
  data: collections.posts
  size: 10
---

意味はこうです👇

実際の使用例

投稿記事の一覧表を1ページ5件でページ分割する場合...

.eleventy.jsに記事コレクションを用意します。

module.exports = function (eleventyConfig) {
              ：
  eleventyConfig.addCollection("posts", function(collectionApi) {
    return collectionApi.getFilteredByGlob("./src/posts/*.md");
  });
              ：
};

記事一覧ページを作ります。

---
pagination:
  data: collections.posts
  size: 5
  alias: posts
permalink: "/posts/page/{{ pagination.pageNumber + 1 }}/"
---

<h1>記事一覧</h1>

<ul>
{% for post in posts %}
  <li>
    <a href="{{ post.url }}">{{ post.data.title }}</a>
  </li>
{% endfor %}
</ul>
<nav>
  {% if pagination.href.previous %}
    <a href="{{ pagination.href.previous }}">前へ</a>
  {% endif %}

  {% if pagination.href.next %}
    <a href="{{ pagination.href.next }}">次へ</a>
  {% endif %}
</nav>

生成されるページ

例えば記事が12件あって size: 5 の場合：

👉 自動でページが増えます

よく使うオプション

• alias（超重要）

alias: posts

👉 pagination.data のデータをテンプレート内で扱いやすくする

• permalink

permalink: "/posts/page/{{ pagination.pageNumber + 1 }}/"

👉 URL構造を自由に決められる

• reverse（新着順）

pagination:
  data: collections.posts
  size: 5
  reverse: true

👉 新しい記事を先頭に

タグ別ページング（実務でよく使う）

タグごとのページを作る例👇

---
pagination:
  data: collections.tagList
  size: 1
  alias: tag
permalink: "/tags/{{ tag }}/index.html"
---
<h1>{{ tag }}</h1>

<ul>
{% for post in collections[tag] %}
  <li>{{ post.data.title }}</li>
{% endfor %}
</ul>

👉 下記のようなページが自動生成される

• /tags/はじめて/index.html
• /tags/２回目/index.html
• /tags/JavaScript/index.html

初心者がハマるポイント

• aliasを忘れる

👉 テンプレートで扱えなくなる

• permalinkを書かない

👉 URLが意図しない形になる

• dataの指定ミス
  • data: collections.post ← ❌
  • data: collections.posts ← ✅

実務での使いどころ

ページングはほぼ必須です👇

• ブログ一覧
• カテゴリ一覧
• タグ一覧
• 商品一覧

👉 「一覧ページ＝ページング」くらい重要

まとめ

• ページングは「配列を分割してページ生成する機能」
• フロントマターに書くだけで使える
• alias と permalink が重要
• タグページにも応用できる

おまけ（理解のコツ）

最初はこう考えると分かりやすいです。👇

👉 「for文をページ単位に分割したもの」