Hugoのブログテーマを更新した(cactus-plusをminiに更新)

· 833 words · 2 minute read

Hugoでgenerateしている、このブログのテーマを更新しました。今まで使っていたcactus-plusがminiというテーマに変わったので、対応しました。

利用しているテーマはこちらです。

数年前にGitHubのリポジトリごとrenameされたことは知っていたのですが、自分でテーマのデザインを上書きして使っていたので、腰を入れて対応する必要があると思いずっと先延ばしにしていました。

Hugoを触り始めてすぐの頃だったので、よくわからないままにテーマの上書きをしたところがあり、修正すべき点が複雑になっていました。

しかし、何かのきっかけでネストした箇条書きがうまく表現されなくなったことと、コードブロックの表示でシンタックスハイライトが効かなくなったことがずっと気になっており、今回一念発起して移行しました。移行にかかった時間は、合計して1日ほどでした。

対応した内容は下記です。

  • 旧テーマを上書きしてデザインを変更している部分を洗い出す
    • ナビゲーションバー、footerなどのデザイン変更
    • ソーシャルシェア用のリンクを配置したパーツ、前後の記事を表示するパーツを追加
    • Mono Social Iconsフォントの利用をやめて、必要なものだけSVGファイルにする
  • 旧テーマを使っていた際にcommitしていたファイルのうち、結局上書きに使っていなかったファイルを削除する
  • 新テーマの設定項目に合わせてconfig.tomlを整理する
  • 新テーマの気に入っていないデザインを上書きする

見た目のbefore/after

同じ作者の方の作成したテーマなので、パッとみた時の印象はあまり変わりませんが、比較してみるとけっこう違います。

beforeafter

before top

after top

before post

after post

数年間、ビルドする際に自分のリポジトリにフォークしたテーマを使ってしのいでいたので、懸案事項が解決してうれしいです。

また、全体に細すぎる時や小さすぎる文字が減り、ネストした箇条書きやコードのシンタックスハイライトも正常に動作するようになったので、読みやすくなったと思います。