Gatsby Logo

GatsbyJS製ブログに「見出しにリンクを貼る機能」を追加する

2020-10-17

hタグの見出しにアンカーリンクを設置して、URL設定できるようにする。

手順


①プラグインをインストールする

gatsby-remark-autolink-headersプラグインをインストールする。
https://www.gatsbyjs.com/plugins/gatsby-remark-autolink-headers/

zsh
yarn add gatsby-remark-autolink-headers

②configファイルを設定する

gatsby-config.jsを編集し、プラグイン設定を追加する。

gatsby-remark-prismjsよりも上にgatsby-remark-autolink-headersを追記する。
※option値を設定できる。ここではURL遷移後の見出し上部を、どのくらい空けるかについて設定している(OffsetY)

gatsby-config.js
{
  resolve: 'gatsby-transformer-remark',
  options: {
    plugins: [
      {
        resolve: 'gatsby-remark-images',
        options: {
          maxWidth: 750,
          quality: 90,
          linkImagesToOriginal: true,
        },
      },
      // 以下追記
      {
        resolve: `gatsby-remark-autolink-headers`,
        options: {
          offsetY: `16`
        }
      },
      // ここまで
      'gatsby-remark-prismjs-title',
      'gatsby-remark-prismjs',
    ],
  },
},

参考

Gatsby Tutorial Starter - Justin Formentin