はじめに
自分で記事を書いていると、目次があったら見やすかなと思うことがありました。今回は、他のブログサイトでも最近よく見かけるTOC(目次: Table of Contents)をHexoにも実装してみます。
実装方法
HexoにはデフォルトでTOCを生成する機能が備わっているので、テンプレートを変更すれば完了です。ちなみに、hexo-tocというプラグインもありますが、筆者の環境では動作しませんでした。
では、Hexoのデフォルトテーマであるlandscapeに目次を追加していきます。
テンプレートの編集
まず、/themes/landscape/layout/_partial/article.ejsを開き、<%- post.content %>を探します。
見つかったらその行の上に以下の記述を追加します。
<% if (!index){ %>
<div id="toc" class="toc-article">
<p class="toc-title">目次</p>
<%- toc(post.content) %>
</div>
<% } %>これで記事の冒頭に目次を自動で生成することができます。あとはCSSでスタイルを整形してあげれば完了です。