【Hexo】記事に自動で目次を付ける（テーマ：light）

概要

Webページにどんなことが書いてあるかわかりにくいので、
記事に目次を付けてみる

目次

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

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

1
<!-- 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
npm install hexo-toc --save

最後に

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

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

以上お疲れさまでした。