Hexoに目次を自動的に追加する方法

目次

  1. 1. はじめに
  2. 2. 実装方法
  3. 3. テンプレートの編集

はじめに

自分で記事を書いていると、目次があったら見やすかなと思うことがありました。今回は、他のブログサイトでも最近よく見かける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でスタイルを整形してあげれば完了です。