Ghostで目次自動生成
はてなブログで自動目次生成が流行っていましたが、それに慣れてしまったので Ghostにも設定してみました。いずれも管理画面のCode Injectionから追加します。
目次生成用JavaScript
以前の記事を参考に、Ghostの環境に合わせてコードを修正します。
修正点は2点です。
- はてなブログでは、記事内では h3レベルから見出しを使うという慣習的なルールがありましたが、通常はh2から記述を始めると思います。これに合わせてスキャンする見出しのレベルをh2にします。
- スキャンする範囲と目次を差し込む位置を特定させるために、テンプレートで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>
Comments !