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

2017-02-23 /

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

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

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

第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ページ目、その他のページのリンクは少し回りくどいやり方をしています。 {{ site.paginate_path }} で、設定ファイルにて設定したパスを読み込んで、1ページ目へのリンクは「page:num」を「”」つまりナシに、その他のページは「:num」の部分をページ番号に置換しています。

なぜ1ページめのリンクが {{ ‘/’ | relative_url }} じゃいけないのかと言いますと、これでは、例えば site.paginate_path: blog/page:num と指定されていた場合に対応できません。

かと言って、 {{ ‘/blog’ | relative_url }} と書くのはいただけない。

site.paginate_path: blog/page:numと指定しているんだから、これを利用するのが筋というもんです。そして、こうしておくことで、paginate_pathの変更にも強いコードとなります。

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

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

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

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