Jekyll テーマ bulma-clean-theme をブログ用に調整する

Published: 2021-06-29 14:30 +0900 by Chirimen

Jekyll のテーマを Bulma Clean Theme に変更してみた 前回 の続きで、 ブログ用に設定を調整していく。

ブログ用のレイアウト

Bulma Clean Theme にはブログ用のレイアウトとして blog が用意されている。

このレイアウトは Jekyll の Pagination (ページ分け) (公式ドキュメント, 日本語訳) を使用する前提で設計されているので、 まずは素直に従っておく。

レイアウトスタイルに不満がでてきたら、 カスタマイズするなり、他のテーマを探したりすればよいだろう。

_config.yml での設定

_config.yml にページ分けをするための設定を行う。

必要なのは1ページにいくつの記事を表示するかの設定と、 ページ分けされたファイルの出力先の設定である。

ここでは次のようにした。

paginatite: 5
paginate_path: "/./page:num/"

paginate: 5 は _post に置かれた記事を1ページに5つまで表示するという指定である。

paginate_path: "/./page:num/" はページ分けしたファイルの出力先の設定である。 ここでは、サイトのルートディレクトリにブログのインデックスページを置くようにした。 :num の部分は実際のページの数字に置き換えられる。 2ページ目であれば /page2/ というようにである。

設定を "/page:num/" でなく、"/./page:num/" としているのは 後述するが Bulma Clean Theme の不具合に対する回避策である。 ブログを置くパスが "/blog/page:num/" にようにサブディレクトリになっているのであれば、 回避策は不要で単に "/blog/page:num/" と指定するのでよい。

index.html

Jekyll のドキュメントに書かれているように、 ページ分けするファイルは index.md などではなく、 index.html でなければならない。

そのため、次のように記述したファイルを index.html という名称でサイトのフォルダのトップに置く。 元からある index.md は削除しておいた方がよいだろう。

---
layout: blog
title: Bulma Clean Theme
subtitle: This is the demo site for Bulma Clean Theme
show_sidebar: true
---

layout: blog で指定した Bulma Clean Theme のレイアウト blog には、 ページ分けされた記事をレンダリングするためのコードが記述されている。

show_sidebar: true は、 ページのサイドバーとして最近の記事を表示するための設定で、 ページ分けの機能とは独立している。

レンダリング結果

ページ分けの様子が分かりやすいように、 記事を6個にコピーしてレンダリングを行った。

blog blog

pagenate_path の不具合

Bulma Clean Theme の pagenate_path/page:num/ を指定すると、 1 ページ目へのリンクボタンが機能しなくなってしまう。

bulma-clean-theme の _includes/pagination.html を見ると次のようになっており、 pagenate_path/page:num/ だと href に設定するパスの値が空になる。

{% elsif page == 1 %}
<li><a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | split: '/' | pop | join: '/' }}" class="pagination-link">{{ page }}</a></li>
{% else %}

pagenate_path/blog/page:num/ の場合には、 ページ 1 へのリンクが /blog, ページ 2 へのリンクが /blog/page2 のように設定されるので、 単にパスの末尾の / が欠落しているのだと思われる。

根本的には _includes/pagination.html を修正すべきではあろうが、 _includes/pagination.html を丸ごとコピーして修正したもので置き換えるといった作業が必要になってくる。 一方、pagenate_path/./page:num/ と設定すれば、 ページ 1 が /., ページ 2 が /./page2 のようになってしまうものの、 ナビゲーション自体は機能し、こちらの方が記述量は少なくてすむ。

Share

Latest Posts

QNAP の Docker を使ってみる
QNAP の Docker を使ってみる

QNAP で Docker が使用できるようなので使ってみた。 Docker Hub のイメージも利用できるし、 試してはいないが docker compose も使えるようなので、 思ったより柔軟性の高い運用ができそうだ。

UNIX系OS (NetBSD) での Ghostscript 7.07 のコンパイル
UNIX系OS (NetBSD) での Ghostscript 7.07 のコンパイル

UNIX系 (NetBSD) で Ghostscript 7.07 をソースからコンパイルしてインストールし、 日本語フォントを利用できるようにするまでの手順のまとめ。

Windows 用 Ghostscript 7.07 の環境設定

Windows で Ghostscript 7.07 をインストールして日本語を表示させるための環境を構築する手順のまとめ。 ファイルの入手方法から設定、動作確認まで。