Gatsby Logo

GatsbyJS製ブログに「外部リンクを別タブで開く機能」を追加する

2020-10-12

外部ドメインリンクのaタグにtarget="_blank"をつけて、別タブで開く設定にする。

手順


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

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

zsh
yarn add gatsby-remark-external-links

②configファイルを設定する

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

gatsby-remark-prismjsよりも下にgatsby-remark-external-linksを追記する。
※セキュリティ対策のため、optionにrel="noopener noreferrer"を付与する。

参考:target="_blank"には気をつけよう - Qiita

gatsby-config.js
{
  resolve: 'gatsby-transformer-remark',
  options: {
    plugins: [
      {
        resolve: 'gatsby-remark-images',
        options: {
          maxWidth: 750,
          quality: 90,
          linkImagesToOriginal: true,
        },
      },
      'gatsby-remark-prismjs-title',
      'gatsby-remark-prismjs',
      // 以下追記
      {
        resolve: `gatsby-remark-external-links`,
        options: {
          rel: "noopener noreferrer",
        }
      },
      // ここまで
    ],
  },
},

参考

Gatsby Tutorial Starter - Justin Formentin