Posted at

Gatsbyのブログに目次を追加する


はじめに

ブログを見やすくして、構造化させるのに必須の項目「目次」を設定したのでその方法を記録に残したいと思います。

いちいち自分でマークダウンの目次を書くのが面倒くさいので自動で目次を生成してくれる良さそうなプラグインないかなと思いました。

最初はgatsby-transformer-remarkに標準で搭載されている機能を利用しようとしたのですが、リンクがうまく効かずに404エラーが出てしまっています。

そこで今回利用したのが「gatsby-remark-toc」です。

これを利用することで一瞬でマークダウンに目次を導入することができました。今回はその方法を紹介します。


gatsby-remark-tocの設定

まずはgatsby-remark-tocをインストールしましょう

yarn add gatsby-remark-toc 

インストールしたら次にgatsby-config.jsの設定をします。gatsby-remark-tocを追加してオプションを設定します。

headerには目次上部に出てくる見出しの名称を設定します。私は無難に「目次」と表示させます。

includeに対しては.mdファイルが存在して目次を表示させたいディレクトを指定します。これで指定したファイルのみに目次を表示させられるようになりました。


gatsby-config.js

{

resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-toc',
options: {
header: '目次',
include: ['src/pages/blog/*.md'],
},

たったこれだけで目次の表示は完了です。お疲れ様でした。

これで問題なく目次の構造を作成してHTMLとして上部に出力することができます。ただし、デザインは入っていないので各自で自由にcssを作成して、反映するようにしましょう


まとめ

以上で目次の設定は完了です。非常に簡単でした。

皆さんもgatsby-remark-tocを利用して爆速で目次をマークダウンに作成してみましょう!