KOTET'S PERSONAL BLOG

#jekyll GitHub Pagesでも目次(ToC)は作れる

Created: , Last modified:
#jekyll #tech #github

これは1年以上前の記事です

ここに書かれている情報、見解は現在のものとは異なっている場合があります。

スクロールがめんどくさくなってきたので目次(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

allejo/jekyll-toc: A GitHub Pages compatible Table of Contents generator without a plugin or JavaScript

そのものズバリなリポジトリが存在する。 以下使い方。

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の要素がリンクなどを外したプレインテキストになる。