【hexo】目次のリンクがundefinedになってしまうのを直した話【hexo-toc】

hexoとhexo-tocを使用して目次を作っていますが、サイドバーの目次のウィジェットがうまく動かなかったので直しました。

TL; DR

このサイドバーの目次から見出しをクリックしても…

リンクが /#undefined になってしまって見出しに飛べないという症状があったのを直しました。結論から言うと、目次を生成しているhexo-tocというプラグインをちょっといじりました。

筆者の環境

  • hexo + hexo-theme-icarus + GitHub + Netlify でホスティング
  • ローカルの開発環境は WSL(2ではなく1) のUbuntu 18.04.4 LTS

どうやって直したの?

hexo-toc の一部を書き換えたら直った

hexoのルートディレクトリから見た node_modules/hexo-toc/lib/filter.js の28~31行目を以下のように書き換えました。

$title.attr('id', id);  
// $title.children('a').remove();  
// $title.html( '<span id="' + id + '">' + $title.html() + '</span>' );  
// $title.removeAttr('id');  

▼これは本来こうなっていたものです。

// $title.attr('id', id);  
$title.children('a').remove();  
$title.html( '<span id="' + id + '">' + $title.html() + '</span>' );  
$title.removeAttr('id');  

hexo clean で既に生成されてしまっているファイルをふっ飛ばしてから hexo g をして、それから hexo s して localhost:4000 で確認。適当な記事を開いて目次が動作することを確認しました。

どうやるの?

私はhexo + GitHub + Netlifyという形でホスティングしているので、以下の通りに修正しました。本番サーバー上で直接hexoを運用している人なんかは、以下は無視していいと思います。

hexo-toc側でやること

まず本家のhexo-tocのリポジトリをForkしてきます。本家のリポジトリはここにあります。

bubkoo/hexo-toc

これをForkしてから git clone して、lib/filter.js を先述したように書き換えます。そして

git add .  
git commit  
git push  

してフォークした自分のhexo-tocのリモートリポジトリに反映させます。

hexo本体側でやること

npmを使っているので、以下の方法でもともとあったhexo-tocを削除した上で、自分でいじったhexo-tocをインストールしました。

npm uninstall --save hexo-toc && npm install --save 自分のhexo-tocのリポジトリ  

そして、変更を git push で反映させます。

そしてNetlifyの自動デプロイを待ってから自分の本番サイトを確認すると…

直った!!!

総括

hexoは人によって環境がかなり違うと思うので、適宜ご自身の環境に読み替えて参考にしてください。それではまたいつか。

参考資料