今回は､投稿記事ページの前後ページへのリンク作成と､前回作成した記事一覧へのページネーションの機能追加となります｡よろしくどうぞ｡
[feature cat=”jekyll-theme-creation-basic”]
投稿記事ページの前後ページへのリンクを作成する
第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ページ目はこんな感じです｡
さて､ページネーションの作成は以上です｡次回はフィードの出力についてです｡