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行目を以下のように書き換えました。
1 | $title.attr('id', id); |
▼これは本来こうなっていたものです。
1 | // $title.attr('id', id); |
hexo clean で既に生成されてしまっているファイルをふっ飛ばしてから hexo g をして、それから hexo s して localhost:4000 で確認。適当な記事を開いて目次が動作することを確認しました。
どうやるの？
私はhexo + GitHub + Netlifyという形でホスティングしているので、以下の通りに修正しました。本番サーバー上で直接hexoを運用している人なんかは、以下は無視していいと思います。
hexo-toc側でやること
まず本家のhexo-tocのリポジトリをForkしてきます。本家のリポジトリはここにあります。
これをForkしてから git clone して、lib/filter.js を先述したように書き換えます。そして
1 | git add . |
してフォークした自分のhexo-tocのリモートリポジトリに反映させます。
hexo本体側でやること
npmを使っているので、以下の方法でもともとあったhexo-tocを削除した上で、自分でいじったhexo-tocをインストールしました。
1 | npm uninstall --save hexo-toc && npm install --save 自分のhexo-tocのリポジトリ |
そして、変更を git push で反映させます。
そしてNetlifyの自動デプロイを待ってから自分の本番サイトを確認すると…
直った！！！
総括
hexoは人によって環境がかなり違うと思うので、適宜ご自身の環境に読み替えて参考にしてください。それではまたいつか。