MiddlemanではTOC（Table Of Contents)、いわゆる目次が簡単に作ることができます。
下のようなやつですね。これは画像なのでクリックできません＾＾
MiddlemanでKramdownというmarkdownエンジンを使っている場合はとても簡単です。
詳細な使い方は、公式ドキュメントのTOCの部分を見て頂きたいですが、簡単に使い方を説明します。
Markdown内でTOCを表示したいところに以下を記入します。
|
1 2 |
1. TOC {:toc} |
大文字のTOCという部分はどんな文字列でもOKです。
|
1 2 |
1. 目次 {:toc} |
1.を-にすると、olタグではなく、ulタグで出力されます。
|
1 2 |
- TOC {:toc} |
ちなみに、このTOCの機能は文章構造を解析して入れ子状のTOCを出力します。h2、h3、h4タグなどを見て、レベルを判断しています。
どのレベルまで出力するかはオプションで設定できます。例えば下の場合は、h2とh3まで表示します。デフォルトはh4まで表示するようになっています。
|
1 |
set :markdown, toc_levels: [2,3] |
また、CSSのトリックで、上の画像のように下層の項目の数字に上層の数字を使うことができます。下のサイトを参考にしました。
結果、当サイトのTOCの部分のSCSSは下のようになっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
#markdown-toc{ margin-left: auto; margin-right: auto; display: table; background: #f9f9f9; border: 1px solid #aaa; padding: 1em; padding-left: 2.2em; padding-top: 3em; list-style-type: decimal; counter-reset: item; position: relative; &>li{ padding-left: 1.2em; text-indent: -1.2em; &>ol>li{ padding-left: 2.2em; text-indent: -2.2em; &>ol>li{ padding-left: 3.2em; text-indent: -3.2em; } } } &:before{ font-weight: bold; content: "目次"; position: absolute; top: 1em; left: 50%; margin-left: -1em; } ol{ counter-reset: item; margin-bottom: 0; } li{ font-size: 0.95em; padding:0; display: block; a{ text-decoration: none; &:hover{ text-decoration: underline; } } &:before{ content: counters(item, "-") ". "; counter-increment: item; } &:after{ content: none; } } li:last-child{ margin-bottom: 0; } } |
TOCの見出しである「目次」という文字列は、HTMLに書いているのではなく、CSSのcontent属性を使って表示しています。
