向外部链接添加图标

使用 rehype 插件，你可以识别和修改 Markdown 文件中指向外部站点的链接。此示例将图标添加到每个外部链接的末尾，以便访问者知道他们正在离开你的网站。

¥Using a rehype plugin, you can identify and modify links in your Markdown files that point to external sites. This example adds icons to the end of each external link, so that visitors will know they are leaving your site.

先决条件

Section titled 先决条件

¥Prerequisites

• 使用 Markdown 作为内容页面的 Astro 项目。

秘诀

Section titled 秘诀

¥Recipe

1. Install the rehype-external-links plugin.

   npm

   npm install rehype-external-links

   pnpm

   pnpm add rehype-external-links

   Yarn

   yarn add rehype-external-links

2. Import the plugin into your astro.config.mjs file.

   Pass rehypeExternalLinks to the rehypePlugins array, along with an options object that includes a content property. Set this property’s type to text if you want to add plain text to the end of the link. To add HTML to the end of the link instead, set the property type to raw.

   // ...
   import rehypeExternalLinks from 'rehype-external-links';
   
   export default defineConfig({
     // ...
     markdown: {
       rehypePlugins: [
         [
           rehypeExternalLinks,
           {
             content: { type: 'text', value: ' 🔗' }
           }
         ],
       ]
     },
   });

   Note

   The value of the content property is not represented in the accessibility tree. As such, it’s best to make clear that the link is external in the surrounding content, rather than relying on the icon alone.

资源

Section titled 资源

¥Resources

• rehype-external-links