GridsomeでTable Of Contents（目次）を自動挿入する方法

下準備

マークダウンファイルをGridsomeに組み込む

Girdsomeでマークダウンファイルでページを生成する方法は、

1. @gridsome/source-filesystem
2. @gridsome/vue-remark

の二つの方法があります。

Gridsomeの公式サイトで紹介されている方法は、@gridsome/source-filesystemですが、Table Of Contents（目次）を自動生成したいなら、@gridsome/vue-remark一択です。というのも、後ほど紹介するremark-tocプラグインが使えるのが@gridsome/vue-remarkだからです。

@gridsome/vue-remark

@gridsome/vue-remarkをインストールして、

yarn add @gridsome/vue-remark

gridsome.config.jsに設定を記述します。

module.exports = {
  plugins: [
    {
      use: '@gridsome/vue-remark',
      options: {
        typeName: 'Documentation', // Required
        baseDir: './content/docs', // Where .md files are located
        pathPrefix: '/docs', // Add route prefix. Optional
        template: './src/templates/Documentation.vue' // Optional
      }
    }
  ]
}

あとはテンプレートに、

<VueRemarkContent />

と入れれば、マークダウンファイルがHTMLに変換されます。

試しにマークダウンファイルを入れて、開発サーバーで表示されればOKです。

remark-tocをインストール・設定追加する

さて、Gridsomeでvue-remarkが使えるようになったらremark-tocをインストールして設定します。

remark-toc

yarn add remark-toc

インストールが出来たら、先ほどの設定にpluginを追加します。

module.exports = {
  plugins: [
    {
      use: '@gridsome/vue-remark',
      options: {
        typeName: 'Documentation',
        baseDir: './content/docs',
        pathPrefix: '/docs',
        template: './src/templates/Documentation.vue',
        plugins: ['remark-toc'], // <=== ここを追加
      }
    }
  ]
}

ここまで出来たら下準備は完了です。

マークダウンファイルにTable Of Contents（目次）を追加する

HUGOなどの静的サイトジェネレータだと、Table Of Contents（目次）だけ別の変数で持っていたりしますが、Gridsomeではそういった機能は標準ではありません。

vue-remarkは、マークダウンファイルに「## Table of Contents」というブロックを追加すると、自動で挿入する方式になっていますので、マークダウンファイルに入れます。

---
title: タイトル
.
.
省略
.
.
---

## Table of Contents <== ここ。「## toc」でも良い

## ほげ

### ふが

挿入する際の文字列は、

1. Table of Contents
2. toc
3. table-of-contents

の3つが使えます。

レンダリングされたページをチェックすると、「## Table of Contents」のところに、Table Of Contents（目次）が表示されているはずです。

vue-remarkは、Vueコンポーネントを読み込むことができるので、コンポーネントと組み合わせることで、かなり自由にレイアウトができるようになります。（本来はテンプレート側でやりたいところですけどね）

GridsomeでTable Of Contents（目次）を自動挿入する方法でした。