【Gatsby】え？令和に手動でrel="noopener"付けてるの？それはもうチョベリバ！

4314 ワード
gatsby contentful JavaScript JavaScript テキストリンク

はじめに

こんにちは。先日、知らないうちにゆいレールが延伸しててびっくりしました、しかも最近とかではなく、結構前に...。沖縄に行かなきゃ！筆者です

さて、先日以下の記事を書いたわけですが、対応として、Contentfulで管理している記事に対して、全記事、ぺちぺち手動で追加して対応したのですが、なんかそれくらいスクリプトでできる気がした次第です。

そして、それくらい先人の方々が既に行っているのでは
と思ったら、案の定見つけましたので、記事にします！

自分のように運用でカバーみたいなことする人が1人でも減ることを切に願っております

外部リンクに自動でrel="noopener"付けるよ！

これで実現できます！

1. まずは以下パッケージのインストール.

npmの方

$ npm install gatsby-remark-external-links

yarnの方

$ yarn add gatsby-remark-external-links

2. gatsby-config.js 編集.

noopener未対応ブラウザのために、noreferrerも付けました

gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-external-links`,
            options: {
              rel: 'noopener noreferrer'
            }
          },
        ],
      },
    },
  ],
};

3. build

buildしましょう

おわりに

いやー、自動って素晴らしい
手動なんて大っ嫌いだぜ！

それでは！