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

2020/10/16

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',
    ],
  },
},

Obake Engineer Blog

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

手順

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

②configファイルを設定する

参考

/post-5

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