外部リンクを新しいタブで開く

Astroではリンクをクリックしたときに同じタブで開く設定になっているが、rehype-external-links拡張機能を使うことで、新しいタブで開くように設定できる。

リンクの仕組み

HTMLでリンクを設定する際に、<a>コンポーネントのtarget属性の値によって、リンクを開く方法を指定できる。

同じタブ
新しいタブ

<a href="https://example.com" target="_self">リンクテキスト</a>

<a href="https://example.com" target="_blank">リンクテキスト</a>

Markdownでは、通常のリンクの書き方である

[リンクテキスト](https://example.com)

において、target属性を指定できないが、rehype-external-links拡張機能を使ってtarget属性の制御を行う。

拡張機能の使い方

拡張機能をインストールする
Terminal window
```
npm install rehype-external-links
```

astro.config.mjsに設定を追加する

import rehypeExternalLinks from 'rehype-external-links';

export default {
  markdown: {
    rehypePlugins: [
      [
        rehypeExternalLinks,
        {
          target: '_blank',
          rel: ['noopener', 'noreferrer'],
          content: { type: 'text', value: ' 🔗' }, // お好みで
        }
      ]
    ]
  }
};

今まで通りリンクをMarkdownで書く

[リンクテキスト](https://example.com)

以上で、外部リンクを新しいタブで開けるようになった。

参考

AstroでMarkdown内の外部リンクを新しいタブで開く方法