ブログをPelicanからNikolaに移行、その後

CSSフレームワーク Bulmaの最新化

Hemingwayでは CSSフレームワークとして Bulma を使用していますが、SASSでBulmaのソースを取り込んでコンパイルして テーマのCSSを作成するという手法と取っています。Bulmaの使い方としては 正しいのですが、Bulmaがバージョンアップする度にコンパイルが必要です。

面倒なのでソースレベルでの取り込みを止めて、BulmaのCDNをHTMLのテンプレート で読み込むようにして、テーマのCSS(SASS)では差分のみ定義するようにしました。

これによりBulmaのバージョンが最新化されるので、ブログの各要素に指定している CSSクラスを最新のBulmaに合わせて修正しました。

また、PaginationやFooterなど、Bulmaのコンポーネントが使用されていなかった 部分の対応してみました。

Bug対応

このNikola用にポーティングしたテーマは結構バギーで、一番の問題はレスポンシブ 対応がおかしくなっており、スマホなどで正しく見えないことでした。

Nikolaのほとんどのテーマはレスポンシブ対応となっていますし、このテーマで 使用している CSSフレームワークも当然レスポンシブ対応です。おかしいなと 思い調べてみると、以下のヘッダーが生成されていませんでした。

<meta name="viewport" content="width=device-width">

よく見ると、titleヘッダーも出力されていません。

確認してみると、このテーマがベースにしている Baseテーマではちゃんと設定されて います。結局、テーマのテンプレート base.tmlp で以下のステートメントを入れ忘れ ているようでした。

${base.html_helperstart()}

その他の改善

その他に以下のような修正を行いました。

• Google Analytics 対応をしました。 Google Adsenseの取り込みは見送りました。

• カテゴリーアーカイブに対応しました。

• PostページのPaginationに対応しました。

• Code用のフォントとして Fira Codeを組込みました。

• 「みんなの文字」を適用しました(テーマの改変でなくカスタマイズとして)

• 日にちベースのアーカイブに対応しました。

いろいろやった結果、見た目は踏襲しているのですがコードレベルでみると ほぼ別物のテーマになってしまいました。

Nikolaのテーマは、基本的なテンプレートとなる組み込みのテーマを継承して 作成されるので、1つ1つのテーマが他の静的ジェネレータのテーマより 軽くなっていてコードの見通しがよくなっています。

修正を加えたいとき、修正点がそのテーマで定義されたものか、ベースの テーマで定義されたものかで迷うことはありますが、テーマの改変は 他のジェネレータのテーマより敷居は低いと思います。

Pelicanのほうは日本語の情報もかなりありますが、Nikolaを使っている 日本人が少ないのかほとんど情報が日本語では見当りません。けれど、 ソースを見ると大体対応できます。