ブログ記事を読んでいるとよく冒頭に目次があるよね。

あれを実現したいな〜(๑╹ω╹๑ )

ということで実現しました↑



手順

こちらの、目次を簡単に自動生成する手順を参考にさせていただきました。



改良したこと

タイトル下、冒頭に目次を入れたい

私の記事には、よく最後の「まとめ」の部分にだけ見出しが入っているような構成になっているものが多いです。

もし、insertPositionでfirstHeadBeforeやfirstHeadAfterを使うと、その最後の部分に目次が来るというおかしな構成になってしまいそうでした。

過去記事を修正中とはいえ、全記事見出しの付け直し作業は、すぐにできないしな...



一方、topを選択すると、目次がタイトルの上に来てしまって、やっぱりおかしかったんですね。

ということで、とりあえずタイトル下の冒頭に目次が入るように、ちょっとだけコードを改変しました。



具体的な方法

firstHeadAfterを改良して、insertPositionにこれが選択されたら、日付の下に目次が入るようにすることにしました（後からみてもわかりやすく、firstHeadAfterという名前も変えた方が良いかもしれませんが、ここは放置しました）。



if (toc_options.insertPosition== "firstHeadBefore" || toc_options.insertPosition== "firstHeadAfter") 

で始まるコードを探して、その直後の

{ el= rootElement.querySelector(toc_options.target[0]);} 

を

{ el= document.querySelector(".post-meta");} 

と変更しました。

こんな感じです



まとめ

目次が入ると、より読みやすくなりますね。

先人の知恵に感謝です。