Gatsbyの公式ブログスターターから作成したブログの投稿へ見出しを追加する。 pluginのgatsby-remark-table-of-contentsを追加して、見出しから目次を自動で生成する。
目次
必須プラグインをインストールする
アンカーリンクを生成するプラグインをインストール
npm i --save gatsby-remark-autolink-headers目次を自動生成するプラグインをインストール
npm i --save gatsby-remark-table-of-contents設定ファイル(gatsby-config.js)へプラグインを追加する
gatsby-config.jsへプラグインの記載を追加する。
設定項目については、プラグインのページを参照。
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-table-of-contents`,
options: {
exclude: "目次",
tight: false,
ordered: false,
fromHeading: 2,
toHeading: 6,
className: "table-of-contents"
},
},
`gatsby-remark-autolink-headers`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 630,
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
`gatsby-remark-prismjs`,
],
},
},記事(index.md)へ目次を追加する
目次の追加はマークダウンで記述できる。
目次コードブロックを追記
投稿の目次を追加したい場所へtocのコードブロックを記述する。
```toc
```