[Jekyll] jekyll-pagination プラグインを使ってみた

Jekyll Jekyll

Nプログラマです。

今回はJekyllでページネーションを表示する内容です。
jekyll-paginationプラグインを使った内容を備忘録として残します。

事前の準備

プラグイン (jekyll-paginate)について

作成されるページについて

index.htmlをベースにしてページングがついたページが、ディレクトリ単位で作成されるみたいです。(設定で変更とかできないのかな。。。)

デフォルトで出力される設定

デフォルト(未設定)だとこのように生成されます。

/
├── index.html
├── page2
│   └── index.html
└── page3
    └── index.html

1000記事ならpaginate:5の設定で、page2 から page 200までディレクトリがindex.htmlと同じ場所に生成されます。

多くなってくるとファインダーが荒れそうです。。。

これでもいいですが、記事数が増えてきた時のことを考えて別ディレクトリにしておいたほうがいいかもしれません。
paginate_pathの設定で出力先を変更することができます。

設定 (_config.yml)

それでは、jekyll-paginateプラグインの設定を行っていきます。

基本的に公式ページのPaginationに沿って設定をします。
設定の読み込みはjekyllのコマンドの起動時であることに注意しましょう(変更したら再起動)

plugins (利用するプラグインの指定)

Jekyllで利用可能ですがpluginsの指定が必要になります。

plugins:
  - jekyll-paginate

paginate: 1ページに表示する件数の設定

投稿している記事数が指定した値より少ないと、ページングが表示されないので注意します。
今回は記事数が少ないので1にします。

paginate: 1

paginate_path: ページを生成するディレクトリを指定

設定するパスは、jekyllの作業ディレクトリから見たパスを指定します。

生成先をサブディレクトリに変更する設定

ページングで生成されるファイルをサブディレクトリ(pages)に変更します。
サブディレクトリは予め作成しないと生成できないようなので、先に作っておきます。

ディレクトリを作成
 mkdir pages
設定を追加
 paginate_path: "/pages/page:num/"
設定後のページングファイルの出力情報

設定を追加後、pages配下にページングファイルが出力されました。

pages
├── page2
│   └── index.html
└── page3
    └── index.html

設定の準備ができたので、index.htmlにページングを表示するコードを記述していきます。

index.htmlへページングを表示する

ページネーションのリンクは公式のコードを引用して利用します。
投稿一覧はタイトルにリンクをつけたシンプルな状態で表示します。

すでに投稿一覧を表示している場合は、site.postsのループを回していると思いますので、siteをpaginatorという変数に変更してあげるとうまく表示されると思います。

投稿記事は予めサンプルとして3つほど準備しておきます。

コード

index.html

---
---
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <style>
    .pagination {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>index</h1>
  <h2>posts</h2>
    <ul>
      {% for post in paginator.posts %}
        <li><a href="{{ post.url}}">{{ post.title }}</a></li>
      {% endfor %}
    </ul>

    <!-- Pagination links(公式のサンプルを引用) -->
    <div class="pagination">
      {% if paginator.previous_page %}
        <a href="{{ paginator.previous_page_path }}" class="previous">
          Previous
        </a>
      {% else %}
        <span class="previous">Previous</span>
      {% endif %}
      <span class="page_number ">
      Page: {{ paginator.page }} of {{ paginator.total_pages }}
    </span>
      {% if paginator.next_page %}
        <a href="{{ paginator.next_page_path }}" class="next">Next</a>
      {% else %}
        <span class="next ">Next</span>
      {% endif %}
    </div>
  </body>
</html>

divにpaginationというクラスがあるので、これにCSSを適用すれば色々と装飾ができます。

今回は、ページングの位置を中央寄せにしておきます。
サンプルなので、headに直接書いています。

結果

cap-01
ページングを表示したページ
トリミングしたので中央寄せが右寄せっぽく見えてます

これでページングを表示することができました。
デザインが寂しいので、CSSで飾り付けをすると見栄えがグッと良くなりそうです。

終わりに

今回はJekyllのプラグインでページネーションを使ってみたという内容でした。

ページングにはタグやカテゴリに対して使えない制約があるみたいですが、今のトコロ問題ないのでこのまま使います。
jekyll-paginate-v2というプラグインもありますが、GitHub Pagesではサポートされていないようです(公式のPaginationより)

それでは、このへんで。
バイナリー!

参考サイト

Jekyll

docs

paginations
Pagination
With many websites — especially blogs — it’s very common to break the main listing of posts up into smaller lists and display them over multiple pages. Jekyll o...

github

jekyll-paginate

最初urlが分からなかったので、docker内のgemのインストール先にあるjekyll-paginate-1.1.0のREADME.mdから探し出しました。
jekyllのgithubのページの真ん中あたりにありました。

jekyll/jekyll-paginate
NO LONGER UNDER ACTIVE DEVELOPMENT as of Jekyll 3: Pagination Generator for Jekyll - jekyll/jekyll-paginate
タイトルとURLをコピーしました