2024年10月にHexoのテーマButterflyのバージョン5.0がリリースされました。
使用中のバージョン4.13を5.0にアップグレードした時に、つまづいた点や工夫した点をご紹介します。

アップグレードの方法

手順1

  • VScode でターミナルに以下のコマンドを入力実行。
1
npm install hexo-theme-butterfly@latest

私は、npmを使ってインストールしています。
git を使ってインストールした方には、参考にならないかもしれません。

📌NOTE
  • 公式サイトに記載のコマンド「npm upgrade hexo-theme-butterfly」は機能しませんでした。

上記のコマンドで、HexoのテーマButterflyはアップグレードされましたが、config.butterfly.ymlは未更新の状態です。

バージョン5.0になり、ymlファイルの構成が変更になっていますので、作り直す必要があります。

次に、config.butterfly.ymlを更新する手順を説明します。

手順2

  • VScode のツリーから、ルートフォルダにある「_config.butterfly.yml」を、コピーし、その場所に貼り付ける。(ファイル名が、「_config.butterfly copy.yml」になる。)

  • フォルダ「node_module」内のフォルダ「hexo-theme-butterfly」のファイル「_config.yml」のコードをコピーする。

  • クリップボードにコピーした「_config.ymlのコード」をバージョン4.13で使用していた「_config_butterfly.yml」に上書きする。

  • 「_config.butterfly copy.yml」を参考に、「_config.butterfly.yml」を書き換える。

  • 書き換えが完了したら、「_config.butterfly copy.yml」を削除する。

その他つまづいた点と解決策

  • インデックスページの各投稿の概要が表示されないものがある。(解決策:Frontmatterのexcerptをdescriptionにする。)

  • スマホ標準で、目次のアイコンが右下に出ない。(解決策:configの405行目あたりのrightside_item_orderのshowの空白スペースを消す。)

  • 各投稿のpermalink削除。config.ymlのpermalinkを/:name.html

未解決の問題

  • addtoanyを利用するよう設定しても、バージョン5.0ではエラーとなり使えない。(20204.10.10時点)