Ghostで目次自動生成

カテゴリー:  Tech タグ:  web/tech

はてなブログで自動目次生成が流行っていましたが、それに慣れてしまったので Ghostにも設定してみました。いずれも管理画面のCode Injectionから追加します。

目次生成用JavaScript

以前の記事を参考に、Ghostの環境に合わせてコードを修正します。

修正点は２点です。

  1. はてなブログでは、記事内では h3レベルから見出しを使うという慣習的なルールがありましたが、通常はh2から記述を始めると思います。これに合わせてスキャンする見出しのレベルをh2にします。
  2. スキャンする範囲と目次を差し込む位置を特定させるために、テンプレートでdiv要素で囲われた範囲のクラス名を変更していきます。以下は、Purusテーマの場合です。
<script type="text/javascript">  
$(function(){
    var list = "";
    // h2見出しを検索
    $(".postcontent_purus h2").each(function(i){
        var idName = "section"+i;
        $(this).attr("id",idName);
        list += '<li><a href="#' + idName + '">' + $(this).text() + '</a></li>';
    });
    // h3見出しが2つ以上あったら目次を表示する
    if ($(".postcontent_purus h2").length >= 2){
        $("<div class='sectionList'><h2>Table of Contents</h2><ol>" + list + "</ol></div>").prependTo(".postcontent_purus");
    }
    // 見出しへのスクロールを滑らかにする
    $('.sectionList a').on("click", function() {
        $('html,body').animate({scrollTop: $(this.hash).offset().top}, 600);
        return false;
    });
});
</script>

目次のスタイル

上のコードで挿入される目次のスタイルを設定していきます。こちらはお好みでどうぞ。

<style>
/* 目次 */
article .postcontent_purus .sectionList {  
    background: #F8F8F8;
    padding: 2rem;
    border: 1px solid #CCC;
}

article .postcontent_purus .sectionList h2 {  
    font-size: 2rem;
    margin: 0;
}

article .postcontent_purus .sectionList ol {  
    margin: 1rem 1rem 1rem;
    padding: 0 0 0 5rem ;
    list-style: decimal;
    font-size: 1.5 rem;
}
</style>

関連リンク

コメント