スクロールがめんどくさくなってきたので目次(Table of Contents: ToC)を設置しようと思った。 しかしGitHub Pagesでは新しいプラグインの導入ができない。 GitHub Pages組み込みのJekyllの、ソースさえコミットすれば更新できる気軽さを維持したままToCを導入したい。
しかし日本語の情報を探してみると誰も彼もプラグインを導入している。 やはりどうしようもないのか……と思ったら普通にliquidテンプレートだけで作ったToCがあった。 なぜ日本語の記事がないのか、まあ自分はそれでいいんだけどせっかくなのでこうして記事を書いている。
Javascriptを使う
これなら割と何でもできてしまうが、できる限りJSは減らしたいのでボツ。
kramdownの機能を使う
kramdownにもToC生成機能があるらしい。
ただしこれはmarkdownにしか設置できず、_layoutsのHTMLで使うことはできない。
なのでToCがほしい記事に個別に設置する形になると思う。
めんどくさいし、ブログの機能のために_posts以下のファイルを編集したくないのでそんなことはしない。
allejo/jekyll-toc
そのものズバリなリポジトリが存在する。 以下使い方。
toc.htmlの配置
リポジトリをクローンしてきて、_includes/toc.htmlを自分のサイトの_includesフォルダに入れる。
include
_layouts以下の好きなファイルの好きな場所で_includes/toc.htmlをincludeする。
{% include toc.html html=content %}
これでcontent内のhタグを探して自動的にToCを生成してくれる。
サニタイズ
自分の記事だとタイトルをリンクにすることがあるので、そのままToCを生成すると二重aタグになってしまう。 最初気が付かずにテンプレートの改造をしてしまったのだが、このテンプレートにはそういうときのための機能もある。
{% include toc.html html=content sanitize=true %}
こうするとToCの要素がリンクなどを外したプレインテキストになる。