让 Fuwari 在新标签页打开链接

开始#

在使用 Fuwari 博客时，你可能会发现一个细节：点击文章中的外部链接时，默认是在当前页面打开的。这意味着访客如果想回到你的博客，必须点击浏览器的返回按钮，这在阅读长篇教程时非常不方便。

为了解决这个问题，我们可以通过 rehype-external-links 插件，让所有的外部链接自动带上 target="_blank" 属性，从而在新标签页中打开。

教程#

Loading Mermaid...

准备#

一个已部署好的 Fuwari 博客
你的 computer

安装插件#

首先，我们需要安装 rehype-external-links 插件。在你的项目根目录下运行：

1
pnpm i rehype-external-links

配置插件#

安装完成后，我们需要在 astro.config.mjs 中进行配置。

TIP
astro.config.mjs 是 Astro 项目的核心配置文件。它负责管理博客的所有集成（如 Tailwind、Svelte）、Markdown 渲染插件以及站点全局设置。

打开根目录下的 astro.config.mjs 文件，首先在文件顶部引入插件：

1
import rehypeComponents from "rehype-components";
2
import rehypeExternalLinks from "rehype-external-links";
3
import rehypeKatex from "rehype-katex";

然后找到 markdown.rehypePlugins 部分，添加以下配置：

1
rehypePlugins: [
2
    rehypeMermaid,
3
    rehypeKatex,
4
    [
5
        rehypeExternalLinks,
6
        {
7
            target: "_blank",
8
            rel: ["nofollow", "noopener", "noreferrer"],
9
        },
10
    ],
11
    rehypeSlug,

参数说明#

target: “_blank”: 强制在新标签页打开链接。
rel: 添加安全属性。noopener 和 noreferrer 可以防止新页面获取原页面的控制权，提高安全性；nofollow 则告诉搜索引擎不要追踪这些链接，对 SEO 有一定帮助。

效果#

配置完成后，重新启动开发服务器或构建项目。现在，你文章中所有的外部链接都会自动在新标签页打开了，而内部链接则保持原样，非常完美。