GatsbyJS製ブログに「外部リンクを別タブで開く機能」を追加する
2020/10/11
外部ドメインリンクの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",
}
},
// ここまで
],
},
},参考
/post-4
GatsbyJS製ブログに「外部リンクを別タブで開く機能」を追加する
Related Posts