paginationプラグイン

2019-05-03

paginationプラグインを使ってjekyllプロジェクトへページ機能を追加して見ましょう。

概要

jekyllは基本的にpaginationプラグインを提供してますが、私たちはjekyll-paginate-v2を使っています。 このブログはjekyll-paginate-v2の使用法について説明します。

プラグインのインストールや設定

jekyll-paginate-v2プラグインをインストールしてプレジェクトへ設定します。

プラグインのインストール

下記のコマンドでjekyll-paginate-v2のプラグインをインストールします。

gem install jekyll-paginate-v2

プラグインの設定

下記の設定内容を_config.ymlファイルへ作成します。

plugins:
  - jekyll-paginate-v2

permalink: /:year/:month/
pagination:
  enabled: true
  per_page: 12
  sort_reverse: true
  sort_field: 'date'
  title: ':title'
  trail:
    before: 2
    after: 2
  • permalink: ページの基本リンクです。このリンクがないとプラグインがうまく動作しません。
  • pagination: プラグインの設定オプションです。詳しく内容は公式サイトをご参考してください。(jekyll-paginate-v2:options)
  • enabled: プラグインを有効化します。
  • per_page: ページごとに表示するポスト数です。
  • sort_reverse: 逆整列をするかどうかを意味します。私たちは最近順でポストを表示するためtrueで設定します。
  • sort field: 整列する時使うフィールドです。私たちは最近順で表示するためdateフィールドを使ってます。
  • title: paginationで生成されたページのタイトルです。page.title変数に割り当てられる値を設定します。(ex> :title - page :num)
  • trail: 現在選択されたページの前・後へpaginationをどのぐらい表示するかを設定します。

ページ設定

ページへpaginationを表示するための設定です。paginationを持ってるページとpaginationから呼ばれるページ中に設定します。

paginationを持ってるページ

paginationを表示するためpaginationを持ってるページ(ex> categoryページ)へ下記のように設定します。

pagination:
  enabled: true
  category: 'jekyll'
  permalink: '/:num/
  • enabled: pagination機能を使います。
  • category: このカテゴリのポストをpaginationします。
  • permalink: pagination機能で生成されたページのリンクを設定します。(ex> /:num/)

paginationページから呼ばれるページ

呼ばれるページ(ex> postページ)へ下記のように設定します。

paginate_path: '/jekyll/:num/pagination-plugin/'
  • paginate_path: paginationから呼ばれる時ページの番号をリンクへ入れるための設定です。

参考

Buy me a coffeeBuy me a coffee
Posts