R note

Gatsbyで外部サイトへのリンクは別窓で開くようにした

2019年1月4日

GatsbyJS

JavaScript おじさんの真似をして、このサイトでも外部サイトへのリンクは別ウィンドウで開くようにしました。YATさんのTwitterアンケートでも外部サイトへのリンクは「新規タブ・ウィンドウを開いて欲しい」という回答が79%で圧倒的に多かったんですよね。

設置方法はいたって簡単で、gatsby-remark-external-linksというプラグインを入れるだけです。

プラグインを入れると、マークダウンに記述したリンクが以下のような挙動になります。

  • 相対パスは同じウィンドウで開く
  • httpを含むフルパスは別ウィンドウで開く

サンプル

設置方法

gatsby-config.jsのプラグイン一覧部分のgatsby-transformer-remarkのオプションとしてgatsby-remark-external-linksを設置します。

    { resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {            resolve: `gatsby-remark-external-links`,            options: {              rel: "noopener noreferrer",            }          },          {
            resolve: `gatsby-remark-prismjs`,
          }
        ]
      }
    },

セキュリティ対策としてrel="noopener noreferrer"を設定するためのオプションを入れました。プラグインのページに以下のように書いてあって、オプションを入れることが推奨されています。

When using target, consider adding rel=“noopener noreferrer” to avoid exploitation of the window.opener API.

「New Window」アイコンの設置

あと、リンクがいきなり別ウィンドウで開くと驚くと思うので、New Windowアイコンを設置しておきました。

以下、該当部分のSASSです。

  a[target="_blank"]{
    padding-right: 0.375rem;

    &::after {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url(../assets/outline-open_in_new-24px.svg) no-repeat 0 0;
      background-size: 20px 20px;
      content: " ";
      position: relative;
      top: 0.15625rem;
      left: 0.125rem;
    }
  }

サイト内リンクの置換

あと、サイト内リンクも全てフルパスで書いていたので、全部置換しました。これはAirtableの検索機能で簡単にできました。Airtableなかなか優秀ですね。

しばらく使っていますが気に入っています。

一覧に戻る