phoenix-power jekyll-toc-generator を使います。

jekyll-toc-generator

Download

1
2
3
4
5
6
7
8
9
10
$ cd ~/octopress/plugins

$ curl -O https://raw.githubusercontent.com/dafi/jekyll-toc-generator/master/_plugins/tocGenerator.rb

# 目次を作る見出しタグの種類を変更する(Default:h1, h2)
$ sed -i "" -e 's/h2/h3/g' -e 's/h1/h2/g' !$:t

$ cd ~/octopress/source/javascripts

$ curl -O https://raw.githubusercontent.com/dafi/jekyll-toc-generator/master/js/jquery.tocLight.js

HTML

Articlesなどの独立ページでも使用したければ、page.htmlにも記述します。

contentの部分を変更します。body内に記述されています。

octopress/source/_layouts/default.html,page.html
1
2
3
<div id="content">
  {{ content | expand_urls: root_url | toc_generate }}
</div>

CSS

CSSもデフォルトで用意されていますので、適応したい方は、適応しましょう。

1
2
3
$ curl -o ~/octopress/sass/partials/toc.css https://raw.githubusercontent.com/dafi/jekyll-toc-generator/master/css/toc.css

$ echo '@import "partials/toc";' >> ~/octopress/sass/_partials.scss

Setting

表示したくない時は、個別記事にnoToc: trueのオプションを付けます。

1
2
3
4
5
6
7
layout: post
title: "Octopressで見出しタグを目次にしてみる"
date: 2014-07-06
comments: true
categories: blog
tags: [github, octopress, jekyll]
noToc: true

参考:

Octopressで見出しの目次を作る方法 - 割り箸ポテチ