Gatsbyでマークダウンの記事に目次を追加する

5606 ワード
gatsby contentful JavaScript JavaScript テキストリンク

はじめに

こんにちは。アイスで一番好きなのは、あずきばーです。筆者です

さて、今回は記事に目次を追加したほうがSEOの評価がよくなるとからしい

そんなわけで、ものは試しに追加してみました。

参考になれば幸いです！

Gatsbyでマークダウンの記事に目次を追加する

以下を使って追加できます。
https://www.gatsbyjs.com/plugins/gatsby-remark-table-of-contents/

それではやっていきましょう。

1. gatsby-remark-table-of-contentsのインストール.

$ npm install gatsby-remark-table-of-contents

2. 別途必要なgatsby-remark-autolink-headersのインストール.

$ npm install gatsby-remark-autolink-headers

3. gatsby-config.jsを編集.

gatsby.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-autolink-headers`,
          `gatsby-remark-table-of-contents`,
        ],
      },
    },
  ],
};

4. 各種設定が必要であれば調整する.

自分は以下の3点設定しました

  1. 目次 というh2は目次に含めないようにする.
  2. ナンバリングする.
  3. 目次に使用するh*はh2だけにする.
gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-autolink-headers`,
          {
            resolve: `gatsby-remark-table-of-contents`,
            options: {
              exclude: '目次',
              ordered: true,
              toHeading: 2,
            },
          },
        ],
      },
    },
  ],
};

マークダウン側をに以下を追加.

上で設定したので、 目次が表示される 下のh2の目次は目次に含まれません

article.md
    ## 目次

    ```toc
    # This code block gets replaced with the TOC
    ```

おわりに

意外と簡単にできました
それでは！