Hexoで記事に自動で目次を付ける方法｜hexo-tocプラグイン設定例

概要

本記事では、Hexoブログの各記事に自動で目次を生成する方法について解説していきます。

というのも長めの記事になると目次が無いと「どこに何があるのか」が分からず、読者がすぐ離脱してしまいますよね（- -;

かといって毎回手作業で目次を書くのは現実的じゃありません。

ここではhexo-tocプラグインを使って、コメントタグを1行入れるだけで目次が自動生成される手順と、見栄えを良くするCSS設定までセットで紹介していきます！

これで読者の回遊率もアップします。
それではやっていきましょう！

目次

手順

1.マークダウンにコメントを追加

site\source\_posts\[記事名].md

1
2
<!-- toc -->

記事名.md

2._config.ymlを変更

手順1のみの場合、h2～h5要素すべてが目次に設定される為、
h2要素のみ目次に表示されるように_config.yml変更

site\_config.yml

1
2
3
4
toc:
  enable: true
  maxdepth: 2
  class: post-toc
_config.yml

3.cssを変更

このままだとダサいのでCSSをいい感じに変更

site\themes\light\source\css\[自分のCSS].css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 目次 */
.post-toc {
  background-color: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  margin: 1em 0;
  color: #333;
}

.post-toc ul {
  list-style: none;
  margin: 1em 0em 1em 1em !important;
}

.post-toc ul li {
  padding: 0.1em 0em 0.1em 1em !important;
  margin: 0.3em 0em !important;
  border-left: 2px solid #e5e5e5;
}
自分のCSS.css

完成

無事目次が作成されました。

完成画像

反映されない場合

hexo-tocのライブラリが存在しない場合や壊れている可能性があるので、
再インストールを試すといいかも

1
2
npm uninstall hexo-toc --save
npm install hexo-toc --save

締め

WordPressでは目次を自動生成してくれたような気がするので、
Hexoでも実装できるかなと思いましたが、
普通にできましたね！

これでよりブログっぽくなったと思います。

以上お疲れさまでした。

エンジニアリング
ブログ, Hexo, エンジニアリング