前言#

看标题可能不明白在说什么。但是如果我放出这两个链接让你点，你应该知道是什么意思。

打开必应 | 在新标签页打开必应

可以看到，第一个按钮是在当前页面打开必应，而第二个是在新标签页打开必应。如果你用的是手机，那这两种在外观上看不出很大的区别（手机版 Chrome 点击第二个按钮会表现为右上角的标签页个数+1）。但是如果你用的是电脑浏览器，那就很容易看出区别了： chrome-newtab-blogbing
浏览器开了一个新标签页用于访问必应，这就是我们想要的，因为 Astro 的打开行为是第一个按钮（在本页打开）。下面是这两个按钮的代码：

1
<a href="https://www.bing.com">打开必应</a>

1
<a href="https://www.bing.com" target="_blank">在新标签页打开必应</a>

仔细观察，会发现第二个按钮的代码多了一个 `target=“_blank”。这个就是控制这个链接的打开方式，如果不写 target 就是默认为当前页面打开，Astro 就是这样。 <a>：锚元素#target - MDN - Mozilla

设想一下，看的教程需要我们打开一个链接操作，但是点了之后，链接就立马在本页打开，教程就被那个链接的新页面覆盖，看不到了。那这时候你要么鼠标中键开链接（快速用新标签页打开链接），要么右键开。不过，还是挺麻烦的吧。

所以我们需要：让我们的链接通过新标签页打开，而非在当前页面打开。

当然，你自己在文章里写 <a href="https://xxx.com" target="_blank">xxx</a> 也是一样的效果，但谁又会有这么多时间去写这么一长串的a元素呢？

使用插件 rehype-external-links#

rehypejs

/

rehype-external-links

Waiting for api.github.com...

00K

0K

Waiting...

笔记
即使这个插件的官方 npm 文档 When should I use this? 中描述的样例和我们的需求有着天壤之别，但没关系，它的功能已经包含了我们需要的东西。

安装插件#

假如你的项目使用的包管理器是 pnpm，那就用 pnpm 的命令安装。npm 同理。

1
pnpm i rehype-external-links

1
npm i rehype-external-links

安装成功后你的 package.json 中会新增一个类似于 "rehype-external-links": "^3.0.0", 的行：

50
    "rehype-components": "^0.3.0",
51
    "rehype-external-links": "^3.0.0",
52
    "rehype-katex": "^7.0.1",

配置插件#

在根目录的 astro.config.mjs 文件内加入以下5行代码：

1
import sitemap from "@astrojs/sitemap";
104 collapsed lines
2
import svelte from "@astrojs/svelte";
3
import tailwind from "@astrojs/tailwind";
4
import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
5
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
6
import swup from "@swup/astro";
7
import expressiveCode from "astro-expressive-code";
8
import icon from "astro-icon";
9
import { defineConfig } from "astro/config";
10
import rehypeAutolinkHeadings from "rehype-autolink-headings";
11
import rehypeComponents from "rehype-components"; /* Render the custom directive content */
12
import rehypeKatex from "rehype-katex";
13
import rehypeSlug from "rehype-slug";
14
import remarkDirective from "remark-directive"; /* Handle directives */
15
import remarkGithubAdmonitionsToDirectives from "remark-github-admonitions-to-directives";
16
import remarkMath from "remark-math";
17
import remarkSectionize from "remark-sectionize";
18
import { expressiveCodeConfig } from "./src/config.ts";
19
import { pluginLanguageBadge } from "./src/plugins/expressive-code/language-badge.ts";
20
import { AdmonitionComponent } from "./src/plugins/rehype-component-admonition.mjs";
21
import { GithubCardComponent } from "./src/plugins/rehype-component-github-card.mjs";
22
import { parseDirectiveNode } from "./src/plugins/remark-directive-rehype.js";
23
import { remarkExcerpt } from "./src/plugins/remark-excerpt.js";
24
import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
25
import { pluginCustomCopyButton } from "./src/plugins/expressive-code/custom-copy-button.js";
26
import rehypeExternalLinks from 'rehype-external-links';
27

28
// https://astro.build/config
29
export default defineConfig({
30
  site: "https://adclosenn.top",
31
  base: "/",
32
  trailingSlash: "always",
33
  integrations: [
34
    tailwind({
35
      nesting: true,
36
    }),
37
    swup({
38
      theme: false,
39
      animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
40
      // the default value `transition-` cause transition delay
41
      // when the Tailwind class `transition-all` is used
42
      containers: ["main", "#toc"],
43
      smoothScrolling: true,
44
      cache: true,
45
      preload: true,
46
      accessibility: true,
47
      updateHead: true,
48
      updateBodyClass: false,
49
      globalInstance: true,
50
    }),
51
    icon({
52
      include: {
53
        "preprocess: vitePreprocess(),": ["*"],
54
        "fa6-brands": ["*"],
55
        "fa6-regular": ["*"],
56
        "fa6-solid": ["*"],
57
      },
58
    }),
59
    expressiveCode({
60
      themes: [expressiveCodeConfig.theme, expressiveCodeConfig.theme],
61
      plugins: [
62
        pluginCollapsibleSections(),
63
        pluginLineNumbers(),
64
        pluginLanguageBadge(),
65
        pluginCustomCopyButton()
66
      ],
67
      defaultProps: {
68
        wrap: true,
69
        overridesByLang: {
70
          'shellsession': {
71
            showLineNumbers: false,
72
          },
73
        },
74
      },
75
      styleOverrides: {
76
        codeBackground: "var(--codeblock-bg)",
77
        borderRadius: "0.75rem",
78
        borderColor: "none",
79
        codeFontSize: "0.875rem",
80
        codeFontFamily: "'Cascadia Mono', 'JetBrains Mono'",
81
        codeLineHeight: "1.5rem",
82
        frames: {
83
          editorBackground: "var(--codeblock-bg)",
84
          terminalBackground: "var(--codeblock-bg)",
85
          terminalTitlebarBackground: "var(--codeblock-topbar-bg)",
86
          editorTabBarBackground: "var(--codeblock-topbar-bg)",
87
          editorActiveTabBackground: "none",
88
          editorActiveTabIndicatorBottomColor: "var(--primary)",
89
          editorActiveTabIndicatorTopColor: "none",
90
          editorTabBarBorderBottomColor: "var(--codeblock-topbar-bg)",
91
          terminalTitlebarBorderBottomColor: "none"
92
        },
93
        textMarkers: {
94
          delHue: 0,
95
          insHue: 180,
96
          markHue: 250
97
        }
98
      },
99
      frames: {
100
        showCopyToClipboardButton: false,
101
      }
102
    }),
103
        svelte(),
104
    sitemap(),
105
  ],
106
  markdown: {
107
    remarkPlugins: [
108
      remarkMath,
109
      remarkReadingTime,
110
      remarkExcerpt,
111
      remarkGithubAdmonitionsToDirectives,
112
      remarkDirective,
113
      remarkSectionize,
114
      parseDirectiveNode,
115
    ],
116
    rehypePlugins: [
117
      rehypeKatex,
118
      rehypeSlug,
119
      [
120
        rehypeComponents,
121
        {
122
          components: {
123
            github: GithubCardComponent,
124
            note: (x, y) => AdmonitionComponent(x, y, "note"),
125
            tip: (x, y) => AdmonitionComponent(x, y, "tip"),
126
            important: (x, y) => AdmonitionComponent(x, y, "important"),
127
            caution: (x, y) => AdmonitionComponent(x, y, "caution"),
128
            warning: (x, y) => AdmonitionComponent(x, y, "warning"),
129
          },
130
        },
131
      ],
132
      [
133
        rehypeExternalLinks,
134
        {
135
        target: '_blank',
136
        },
137
      ],
138
      [
139
        rehypeAutolinkHeadings,
140
        {
141
          behavior: "append",
142
          properties: {
143
            className: ["anchor"],
144
          },
33 collapsed lines
145
          content: {
146
            type: "element",
147
            tagName: "span",
148
            properties: {
149
              className: ["anchor-icon"],
150
              "data-pagefind-ignore": true,
151
            },
152
            children: [
153
              {
154
                type: "text",
155
                value: "#",
156
              },
157
            ],
158
          },
159
        },
160
      ],
161
    ],
162
  },
163
  vite: {
164
    build: {
165
      rollupOptions: {
166
        onwarn(warning, warn) {
167
          // temporarily suppress this warning
168
          if (
169
            warning.message.includes("is dynamically imported by") &&
170
            warning.message.includes("but also statically imported by")
171
          ) {
172
            return;
173
          }
174
          warn(warning);
175
        },
176
      },
177
    },
178
  },
179
});