yuya-yuzen

GatsbyJSで構築したブログサイトの記事に目次を付ける

2020/08/07
2020/08/07

GatsbyJSで構築したブログサイトで、ブログ記事に目次を付ける方法について解説します。

結論

gatsby-remark-table-of-contents というプラグインを導入します。

gatsby-remark-table-of-contents | GatsbyJS

前提

  • 筆者の環境

    • Windows 10 Home 64bit
    • node v12.18.0
    • npm 6.14.4

手順

  1. パッケージをインストールする
  2. 設定ファイルにプラグインの記述をする
  3. ブログ記事に追加の記述をする

パッケージをインストールする

2つのパッケージをインストールします。

$ npm install gatsby-transformer-remark
$ npm install gatsby-remark-table-of-contents
$ npm install gatsby-remark-autolink-headers

設定ファイルにプラグインの記述をする

gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-table-of-contents`,
            options: {
              exclude: "目次",
              tight: false,
              fromHeading: 1,
              toHeading: 6,
            },
          },
          `gatsby-remark-autolink-headers`,
        },
      ],
    },
  ],
}

ブログ記事に追加の記述をする

/content/blog/article.md
## 目次

```toc
exclude: 目次
from-heading: 2
to-heading: 6
``` 

この記述を追加することで、「目次」以外の見出しを目次として表示することができます。 gatsby-remark-autolink-headers により、リンク付きの見出しになります。


Share:
ゆうや