Jekyllで目次機能をつける

最近色々とブログに機能を追加して整備しようと思っているんですが、今回は目次機能をつけました。使ったgemはjekyll-tocです。

使い方

使い方はほんとREADMEの通りなんですけど、書き方は３通りあるみたいです。まずは、目次機能を使いたいページのymlフロントマターにtoc: trueと書きます。これは共通かな。

---
layout: post
toc: true
---

そして、普通の使い方は_layouts/post.htmlとかに書いてるだろう{{ content }}を以下のように書き換える。

{{ content | toc }}

これでcontentの上に目次が出るみたいです。

もうちょっといじりたい場合は、以下のように{% toc %}を書くことで、表示する場所を調整できます（私はこれでやりました）。適当にdivで囲んだりできるよ。

<div>
  <div id="table-of-contents">
    {% toc %}
  </div>
  <div id="markdown-content">
    {{ content }}
  </div>
</div>

ただ、こういう書き方はpostのファイルでしか使えないので、その他のファイルで使いたい場合は別の書き方をしたり、もっと好きな位置に表示したい場合はHTML書いちゃうとかもできるみたいです。たぶん。

これで自動でcontent内の<h1>〜<h6>までを拾ってリストにしたHTMLをつくってくれます。

ymlの設定

あとは_config.ymlで色々設定ができる。

<h1>〜<h6>のどこからどこまでを拾うかとか、生成されるリストHTMLはクラスはなんて名前つけときます？とかですね。とりあえず私は以下だけ設定してみました。

toc:
  min_level: 2
  max_level: 3
  list_class: toc-content

CSSの調整

あとは適当にCSSを書きましょう。

私の場合もう一つ、ヘッダーを上に固定してるので、目次でジャンプしたときにタイトルがヘッダーに隠れちゃうんですね。これを直しました。

これは調べれば何通りかやり方がありますが、今回はタイトルにマイナスマージンを設定するやり方でやりました。

header {
  height: 50px;
}

h1 {
  padding-top: 50px;
  margin-top: -50px;
}

もしヘッダーが50pxだったら、paddingでヘッダーの高さ分ずらしてmarginのマイナス値で見た目元に戻しとくという。実際はもうちょいいろいろ数値をいじって調整しています。めんどくさい。

以上だよ。テストでこのページも目次表示してみたけど、いるのかこれは。

あ、あとそれから、この記事のようにコードブロックの中にjekyllのコードがあると動作しちゃうんですよね。これは{% raw %}と{% endraw %}で囲うか、front matterにrender_with_liquid: falseを追加することで回避できるんだそうです。いままで書かなかったから気がつかなかった。