Ghostに目次を表示する

本ブログはGhost(Pro)を利用しています。目次を表示すると読みやすいと思い簡単に表示できるようにしました。

ライブラリとCSSをヘッダ・フッタにインジェクトする

目次を自動的に表示するためのライブラリとCSSを利用します。

cdnjs.comのtocbot.min.jsをCopy Script Tagボタンでコピーします。これをサイトのフッタにペーストします。

同じくtocbot.cssをCopy Link Tagボタンでコピーしてサイトのヘッダにペーストします。

Activateコードをフッタに記述する

以下のActivateするためのコードをサイトのフッタに記述します。.gh-contentはデフォルトテーマ用なので適宜変更します。

<script>
    tocbot.init({
        tocSelector: '.toc',
        contentSelector: '.gh-content',
        hasInnerContainers: true
    });
</script>

目次を表示したいコンテンツにHTMLを記述する

目次を表示したいコンテンツに以下のコードをHTMLで挿入します。これで目次が挿入されます。

<aside class="toc"></aside>

さらにカスタマイズするには

How to add a table of contents to your Ghost siteに詳細な情報があります。参照してください。