Gatsby製ブログ内の外部リンクを別タブ対応する

前提条件

• gatsby-transformer-remark導入済

ライブラリのインストール

今回はgatsby-remark-external-linksを使用します。 markdownからHTMLへの変換時に、外部サイトのみtarget="_blank"を指定して別タブで開くようにするライブラリです。

• gatsby-remark-external-links | GatsbyJS

yarn add gatsby-remark-external-links

設定

gatsby-config.jsのgatsby-transformer-remark下のpluginsに追記します。

plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-external-links',
          options: {
            target: '_blank',
            rel: 'noopener',
          },
        },
      ]
    }
  }
]

使用方法

特別な使用方法はありません。 今まで通りにリンクを貼って、外部サイトへのリンクのみ別タブで開かれることを確認しましょう。

まとめ

今回はGatsby製ブログで、外部サイトのみ別タブで開くようにするためのライブラリを紹介しました。 こういった細かい機能も自由にカスタマイズできるのがGatsbyのいいところですよね。

SNSでシェアする

タグ

• Gatsby
• GatsbyJS
• react
• ブログ
• 外部リンク
• リンク