跳转到内容

为链接添加图标

使用一个 rehype 插件,你可以识别并修改 Markdown 文件中所指向的外部网站链接。本节示例中,将会为每个外部链接的末尾添加图标,以便让访问者知道他们将离开你的网站。

前期准备

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

操作步骤

  1. 安装 rehype-external-links 插件。

    Terminal window
    npm install rehype-external-links
  2. 在你的 astro.config.mjs 配置文件中导入该插件。

    rehypeExternalLinks 作为参数传递给 rehypePlugins 数组,并与一个包含了 content 属性的选项对象结合使用。如果你想在链接的末尾添加纯文本,只需将 content 属性的 type 设置为 text;如果你想要添加 HTML 到链接的末尾,则需要将 content 属性的 type 设置为 raw

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

资源