Jekyllのテーマを自作する 基本編 – 第7回 – ページネーションを作成する

今回は、投稿記事ページの前後ページへのリンク作成と、前回作成した記事一覧へのページネーションの機能追加となります。よろしくどうぞ。

Jekyllのテーマを自作する 基本編 記事一覧

• Jekyllのテーマを自作する 基本編 – はじめに –
• Jekyllのテーマを自作する 基本編 – 第1回 – 初期データを作成する
• Jekyllのテーマを自作する 基本編 – 第2回 – 設定ファイルを作成する
• Jekyllのテーマを自作する 基本編 – 第3回 – 基本レイアウトを作成する
• Jekyllのテーマを自作する 基本編 – 第4回 – Sass(CSS)でスタイルを作成する
• Jekyllのテーマを自作する 基本編 – 第5回 – titleタグとmeta descriptionを作成する
• Jekyllのテーマを自作する 基本編 – 第6回 – トップページに記事一覧を作成する
• Jekyllのテーマを自作する 基本編 – 第7回 – ページネーションを作成する ←いまここ
• Jekyllのテーマを自作する 基本編 – 第8回 – 記事のフィード(feed.xml)を作成する
• Jekyllのテーマを自作する 基本編 – 第9回(終) – まとめ

投稿記事ページの前後ページへのリンクを作成する

第3回で作成した「_layouts/post.html」はこんな感じです。

これを以下のように修正します。

page.next	次のページの情報が含まれています。
page.next.url	次のページのURLを取得します。
page.next.title	次のページのタイトルを取得します。
page.previous	前のページの情報が含まれています。
page.previous.url	前のページのURLを取得します。
page.previous.title	前のページのタイトルを取得します。

プレビューして確認します。前後のページへのリンクが正しく表示されていればOKです。

記事一覧のページネーションを有効にする

ここからは記事一覧のページネーションの作成になります。第1回で全て設定済みではありますが、復習です。Jekyllでページネーションを有効にするには、まず設定ファイル「_config.yml」でgemを読み込みます。

gems:
  - jekyll-paginate

また、同じく設定ファイルに1ページに表示する記事数を設定します。これを書かないとページネーションは有効になりません。

paginate: 3

これで準備完了です。

2ページ目以降のURLを設定する

設定ファイル内で2ページ目以降のURLを設定できます。第一回で、以下のようにデフォルトの設定をそのまま記述しています。

paginate_path: "page:num"

この設定の場合、2ページ目のURLは「http://127.0.0.1:4000/page2/」となります。

記事一覧の「次のページ」「前のページ」リンクを作成する

前回では、 site.posts で全ての記事を取得しましたが、ページネーションを使う場合は、以下のように paginator.posts を使います。これによって、各ページごとに記事をよしなに取得できます。他は同じです。

さらに、「次のページ」「前のページ」リンクをその下に作成します。index.htmlはこのようになります。

paginator.previous_page	前のページのページ番号を取得します。
paginator.previous_page_path	前のページのURLを取得します。
paginator.page	現在のページのページ番号を取得します。
paginator.total_pages	ページの総数を取得します。
paginator.next_page	次のページのページ番号を取得します。
paginator.next_page_path	次のページのURLを取得します。

あとはスタイルを追記しましょう。

プレビューしてみます。

2ページ目以降もちゃんと作成されています。

1, 2, 3, … と各ページへリンクするページネーションを作成する

上記では、前後ページへのリンクのみでしたがお次は、1, 2, 3, …と各ページへリンクするページネーションを作成します。

index.htmlを以下のように書き換えます。

25行目から33行目は、for文で1から最大ページ数までループを回します。

if文を使って、現在のページの場合、1ページへのリンクの場合、その他のページへのリンクの場合と条件分岐します。ちょっと面倒なんですが、1ページ目とその他のページへのリンクURLは条件分岐させて別途作成しなければなりません(Jekyll バージョン3.4現在)。

1ページ目へのリンクURLはトップページのURLを指定します。その他のページは少し回りくどいやり方をしています。 {{ site.paginate_path }} で、設定ファイルにて設定したパスを読み込んで、「:num」の部分をページ番号に置換しています。

最後に、ページネーション部分のスタイルを修正します。

プレビューして、ページネーションがちゃんと動くか確認します。

3ページ目はこんな感じです。

さて、ページネーションの作成は以上です。次回はフィードの出力についてです。