Ad_closeNN 的小站

为 Astro 加上在新标签页打开链接的功能

Sun, 31 Aug 2025 00:00:00 GMT

前言

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

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

GitHub: rehypejs/rehype-external-links

安装插件

假如你的项目使用的包管理器是 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
});

至此，插件的配置就完成了。随便找个文章内链接点击，应该会在新标签页打开，而非原来的在当页打开。

将 Giscus 评论插件添加到博客

Sun, 17 Aug 2025 00:00:00 GMT

前言

如果你的静态博客没有评论区，又不想自己搭建一个评论系统，那么 Giscus 就是一个不错的选择。
接下来就手把手教你添加这个插件并配置它。

需求

一个 GitHub 账号。

配置 Giscus

在博客仓库存放评论

打开 GitHub 上你博客的仓库地址，点击顶部 Settings（设置），拉到 Features（功能），选择 Discussions 前面的小方格，点击一下，打开 Discussions 功能。等到出现一个小勾即代表开启了 Discussions 讨论功能。
点击打开 https://github.com/apps/giscus ，选择带色按钮 Install ，将其安装在你的 GitHub 个人账户中（如果你博客仓库在别的组织，请选择安装到组织）。
安装完毕，可以跳到 #获取专用代码查看需要插入的 JS 代码了。

在专用仓库存放评论

打开 https://github.com/new ，创建一个新的仓库。
在新仓库内，点击顶部 Settings（设置），拉到 Features（功能），选择 Discussions 前面的小方格，点击一下，打开 Discussions 功能。等到出现一个小勾即代表开启了 Discussions 讨论功能。
点击打开 https://github.com/apps/giscus ，选择带色按钮 Install ，将其安装在你的 GitHub 个人账户中（如果你博客仓库在别的组织，请选择安装到组织）。
安装完毕。

获取专用代码

打开 https://giscus.app/zh-CN ，在其页面进行必要的配置：

语言：如果你的博客不搞 i18n 国际化，那我推荐选择 简体中文（博客使用的语言）。反之推荐选择 English。
仓库：如果你选择上面第一种方案（在博客仓库内），那么就填写你博客仓库地址（以 用户名/仓库名 形式填写，填你自己的。比如 Ad-closeNN/blog-fuwari）。如果是新的专用仓库，那么就填写新的专用仓库地址，格式同理。成功了为如图所示：
页面 ↔️ discussion 映射关系：这个有说法。如果你博客没有很多重复标题的页面，且不更换文章标题，推荐选择 Discussion 的标题包含页面的 <title>，这将会以 页面标题 -或/或其他分隔符网站名 为 title 开一个新讨论。如：其他如 pathname，将会把 /post/xxx 显示出来。但是显示效果（特别是中文路径）可能没那么好？
参考&图片原出处： https://www.2x.nz/posts/you-is-me-huh/
Discussion 分类：推荐选择 General。如果你只想让访客在博客发布评论，就选择 Announcements。这样即使能在 GitHub 看到评论，也无法直接在 GitHub 回复，必须在博客的评论区内回复。没啥用，不如 *General。
特性：推荐启用 启用主帖子上的反应（reaction） 将评论框放在评论上方 懒加载评论。
其他无关紧要的请自行配置。

配置完成后，将会获得一串独特的 JavaScript 代码（例如下面的）。将其复制下来：

1
<script src="https://giscus.app/client.js"
2
        data-repo="Ad-closeNN/blog-friends"
3
        data-repo-id="R_kgDOPb5ZJw"
4
        data-category="Announcements"
5
        data-category-id="DIC_kwDOPb5ZJ84CuPmR"
6
        data-mapping="title"
7
        data-strict="0"
8
        data-reactions-enabled="1"
9
        data-emit-metadata="0"
10
        data-input-position="top"
11
        data-theme="preferred_color_scheme"
12
        data-lang="zh-CN"
13
        data-loading="lazy"
14
        crossorigin="anonymous"
15
        async>
16
</script>

插入代码

打开 src/pages/posts/[..slug].astro，在最下方的 </MainGridLayout> 的上面插入你在 Giscus 复制的 JavaScript 代码：

143
        <a href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
144
           class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.prevSlug}]}>
145
            {entry.data.prevSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-end gap-4">
146
                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
147
                    {entry.data.prevTitle}
148
                </div>
149
                <Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
150
            </div>}
151
        </a>
152
    </div>
153
154
    <!-- 上面是你的其他原本的代码 -->
155
    <!-- 评论区在这 -->
156
    <script src="https://giscus.app/client.js"
157
            data-repo="Ad-closeNN/blog-friends"
158
            data-repo-id="R_kgDOPb5ZJw"
159
            data-category="General"
160
            data-category-id="DIC_kwDOPb5ZJ84CuPmR"
161
            data-mapping="title"
162
            data-strict="0"
163
            data-reactions-enabled="1"
164
            data-emit-metadata="0"
165
            data-input-position="top"
166
            data-theme="preferred_color_scheme"
167
            data-lang="zh-CN"
168
            data-loading="lazy"
169
            crossorigin="anonymous"
170
            async>
171
    </script>
172
</MainGridLayout>

放在这个文件 src/posts/[..slug].astro 内，仅仅只有 /posts/ 下的文章拥有评论区。
如果你需要在特定的页面（比如 /about/ ）中使用 Giscus，仅需打开和 Markdown 同名的文件（如 /about/ 的 Markdown 文件是 about.md）如 src/pages/about.astro，用刚才的方法插入 Giscus 代码即可实现特定页面拥有 Giscus 评论区。

1
---
13 collapsed lines
2
import { getEntry, render } from "astro:content";
3
import Markdown from "@components/misc/Markdown.astro";
4
import I18nKey from "../i18n/i18nKey";
5
import { i18n } from "../i18n/translation";
6
import MainGridLayout from "../layouts/MainGridLayout.astro";
7
8
const aboutPost = await getEntry("spec", "about");
9
10
if (!aboutPost) {
11
  throw new Error("About page content not found");
12
}
13
14
const { Content } = await render(aboutPost);
15
---
16
<MainGridLayout title={i18n(I18nKey.about)} description="关于">
17
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
18
        <div class="card-base z-10 px-9 py-6 relative w-full ">
19
            <Markdown class="mt-2">
20
                <Content />
21
            </Markdown>
22
        </div>
23
    </div>
24
25
    <br>
26
    <!-- 评论区 -->
27
    <script src="https://giscus.app/client.js"
28
        data-repo="Ad-closeNN/blog-friends"
29
        data-repo-id="R_kgDOPb5ZJw"
30
        data-category="General"
31
        data-category-id="DIC_kwDOPb5ZJ84CuPmR"
32
        data-mapping="title"
33
        data-strict="0"
34
        data-reactions-enabled="1"
35
        data-emit-metadata="0"
36
        data-input-position="top"
37
        data-theme="preferred_color_scheme"
38
        data-lang="zh-CN"
39
        data-loading="lazy"
40
        crossorigin="anonymous"
41
        async>
42
</script>
43
</MainGridLayout>

配置网站源 Origin

参考：https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#origins

如果你的博客是开源的，那么有些人可能会直接 Fork 你的博客仓库，转为自己用。
这时候如果那人不会配置评论区，那么有意思的来了，他发的评论会直接到达你 Giscus 配置的仓库，而不是在他仓库。

所以我们可以配置一个 giscus.json 在你 Giscus 设置的仓库 的根目录（如我在上面 #在专用仓库存放评论中设定了仓库为 Ad-closeNN/blog-friends，那就去到这个仓库），新建一个文件 giscus.json，例如：

1
{
2
  "origins": ["https://adclosenn.top"] // 这个域名填你自己的
3
}

注意

origins 里面不推荐填写 localhost 等本地地址，这样会导致别人把博客 Fork 在本地依然能发表评论到你仓库。如果你确认这个风险，那么可以直接填 本地地址 + 端口，比如 Astro 的本地地址为 localhost，端口为 4321，那么填写 http://localhost:4321：

1
{
2
  "origins": ["https://adclosenn.top", "http://localhost:4321"]
3
}

配置好后，本地开发环境(localhost) 和除你设定之外的域名将会直接被 Giscus 切断评论区的连接：

反垃圾评论

一般来说不会有人无缘无故就对你的文章评论区发布脑残、降智、虚假的评论，因为 Giscus 的评论需要通过 GitHub 授权登录才能发布，所以这算是一个初级发布门槛。

如果真的有，那么确实很不幸了。你可以通过删评论的方法解决。
也可以通过配置 Akismet 等来实现自动化反垃圾评论。但是 Akismet 的效果据说十分鸡肋。

恢复 Chrome 对 Manifest V2 的支持

Thu, 14 Aug 2025 00:00:00 GMT

前言

今天打开电脑，发现 Chrome 它阻止了一个扩展（如上图）。查了一下，发现是 Google Chrome 已经永久停止了对 Manifest V2 扩展的支持，而且是已经计划了近4年的项目。在 2025年7月终于要落下帷幕了：

吗？

解决方案

通过 chrome://flags 关闭

地址栏输入 chrome://flags/。
搜索 temporary-unexpire-flags-m137。
将这个条目设置为 Enabled。
重启浏览器。
搜索 extension-manifest-v2-deprecation-disabled，将其设置为 Disabled。
搜索 extension-manifest-v2-deprecation-unsupported，将其设置为 Disabled。
重启浏览器，即可启用旧版扩展。

添加启动参数

关闭 Chrome。
打开 Chrome 的快捷方式属性。
在目标后加上一个空格和 --disable-features=ExtensionManifestV2Unsupported,ExtensionManifestV2Disabled。
点击确定。
再次双击 Chrome 快捷方式，打开 Chrome，即可启用旧版扩展（暂时保留 按钮将会出现）。

换浏览器

FireFox

FireFox - 火狐。它并不基于 Chromium ：FireFox 常见问题。并且它将会继续支持 Manifest V2 扩展。~~FireFox 这招太狠了~~

其他

Microsoft Edge

好吧，微软也放弃了其新 Edge 对 Manifest V2 的支持，强制关闭时间待定：迁移到清单 V3 的概述和时间线 - Microsoft Edge Developer documentation | Microsoft Learn 。

自定义 Astro 的 Frontmatter

Wed, 13 Aug 2025 00:00:00 GMT

前言

如果你用的博客是 Astro 或以它为架构的 Fuwari，那么这篇文章或许适合。

这篇文章的目的是 在 Markdown 文件的顶端加入一个自定义的类似 draft: true 这类变量控制器，可以运用它对某些组件进行更改，包括关闭、更改。例如，当你在 fuwari 中的 Markdown 顶端定义一个内置参数 image，你可以通过写 image: "/pic/custom-frontmatter-cover.svg" 来让这篇文章在博客主页获得一个图片（而不定义就只有一个 > 的按钮）：

就是说：

1
--- # 这里是 Frontmatter 的开头
2
image: /a/example.png # 官方自带的：这是原来有的这个 image:
3
customcover: /a/eexxaammppllee.png  # 自己添加的：这是在如 /posts/custom-frontmatter/ 显示的文章头图
4
showcover: false # 自己添加的：这是控制 是否使用 image: 定义的图片作为文章头图，默认就是会用 image: 定义的图片作为头图
5
--- # 这里是 Frontmatter 的结尾

如果你足够细心，你会发现文章你是人类吗？的图片在博客主页和文章内部是不同的。这也用到了自定义 Frontmatter，自己定义了不同的地方该显示什么图片。

定义 Frontmatter

打开 src/content/config.ts 文件，在 const postsCollection = defineCollection({ 部分，参考已有的示例定义一个不重名的参数，以下是本站的：

boolen：布尔值。可以通过 true 和 false 控制。
string：字符串。填写的是一串文本。

最后面括号中的 true 指的是如果 Markdown 文件顶端的 Frontmatter 里没有这个参数，就默认为 true。string 也同理。

1
const postsCollection = defineCollection({
2
  schema: z.object({
3
    title: z.string(),
4
    published: z.date(),
5
    updated: z.date().optional(),
6
    draft: z.boolean().optional().default(false),
7
    description: z.string().optional().default(""),
8
    image: z.string().optional().default(""),
9
    tags: z.array(z.string()).optional().default([]),
10
    category: z.string().optional().nullable().default(""),
11
    showcover: z.boolean().optional().default(true),
12
    customcover: z.string().optional().default(""),
13
14
    lang: z.string().optional().default(""),
15
16
    /* For internal use */
17
    prevTitle: z.string().default(""),
18
    prevSlug: z.string().default(""),
19
    nextTitle: z.string().default(""),
20
    nextSlug: z.string().default(""),
21
  }),
22
});

配置 Frontmatter（样例）

关闭文章头图

默认你使用 image 定义了一张图片，那么这张图片将会同时显示在博客主页和 文章内部（那个大大的图片，位于文章之首）。
如不需要使用博客主页那张图片作为文章内部的照片，我们可以关闭文章内部的头图显示，只剩下文章正文和文章的图片，而博客主页那个卡片右边的图片依然显示。

打开 src/pages/posts/[...slug].astro，（这个可选：在第二处 --- 上面加入 const 随便一个不重复名字 = entry.data.你在#定义 Frontmatter定义的参数。 ，本站是 showcover = enrty.data.showcover;）
找到 {entry.data.image &&，将其改为 {entry.data.showcover && entry.data.image &&。如图所示：

1
            {entry.data.showcover && entry.data.image &&
2
                <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
3
            }

自定义文章内部头图

你也看到了，本文在博客主页和本页的头图不一样。这是自定义了头图 customcover: /pic/custom-frontmatter-customcover.svg。

打开 src/pages/posts/[...slug].astro，（这个可选：在第二处 --- 上面加入 const 随便一个不重复名字 = entry.data.你在#定义 Frontmatter定义的参数。，本站是 const customcover = entry.data.customcover;）
找到 {entry.data.image && 开头的元素，在其下面添加一个和其一模一样的元素。如图所示：

1
            {entry.data.showcover && entry.data.image &&
2
                <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
3
            }
4
5
            <!-- 自制内部头图 customcover-->
6
            {entry.data.customcover &&
7
                <ImageWrapper id="post-cover" src={entry.data.customcover} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
8
            }

附加：本站 […slug].astro 文件

1
---
2
import path from "node:path";
3
import License from "@components/misc/License.astro";
4
import Markdown from "@components/misc/Markdown.astro";
5
import I18nKey from "@i18n/i18nKey";
6
import { i18n } from "@i18n/translation";
7
import MainGridLayout from "@layouts/MainGridLayout.astro";
8
import { getSortedPosts } from "@utils/content-utils";
9
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
10
import { Icon } from "astro-icon/components";
11
import { licenseConfig } from "src/config";
12
import ImageWrapper from "../../components/misc/ImageWrapper.astro";
13
import PostMetadata from "../../components/PostMeta.astro";
14
import { profileConfig, siteConfig } from "../../config";
15
import { formatDateToYYYYMMDD } from "../../utils/date-utils";
16
17
export async function getStaticPaths() {
18
  const blogEntries = await getSortedPosts();
19
  return blogEntries.map((entry) => ({
20
    params: { slug: entry.slug },
21
    props: { entry },
22
  }));
23
}
24
25
const { entry } = Astro.props;
26
const { Content, headings } = await entry.render();
27
28
const { remarkPluginFrontmatter } = await entry.render();
29
30
const jsonLd = {
31
  "@context": "https://schema.org",
32
  "@type": "BlogPosting",
33
  headline: entry.data.title,
34
  description: entry.data.description || entry.data.title,
35
  keywords: entry.data.tags,
36
  author: {
37
    "@type": "Person",
38
    name: profileConfig.name,
39
    url: Astro.site,
40
  },
41
  datePublished: formatDateToYYYYMMDD(entry.data.published),
42
  inLanguage: entry.data.lang
43
    ? entry.data.lang.replace("_", "-")
44
    : siteConfig.lang.replace("_", "-"),
45
  // TODO include cover image here
46
};
47
48
// 获取头图 boolean，无需设置 true
49
const showcover = entry.data.showcover;
50
51
// 获取自定义的头图（Markdown 内部）
52
const customcover = entry.data.customcover;
53
54
---
55
<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings}>
56
    <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
57
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
58
        <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
59
            {}
60
        ]}>
61
            <!-- word count and reading time -->
62
            <div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation">
63
                <div class="flex flex-row items-center">
64
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
65
                        <Icon name="material-symbols:notes-rounded"></Icon>
66
                    </div>
67
                    <div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
68
                </div>
69
                <div class="flex flex-row items-center">
70
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
71
                        <Icon name="material-symbols:schedule-outline-rounded"></Icon>
72
                    </div>
73
                    <div class="text-sm">
74
                        {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
75
                    </div>
76
                </div>
77
            </div>
78
79
            <!-- title -->
80
            <div class="relative onload-animation">
81
                <div
82
                    data-pagefind-body data-pagefind-weight="10" data-pagefind-meta="title"
83
                    class="transition w-full block font-bold mb-3
84
                    text-3xl md:text-[2.25rem]/[2.75rem]
85
                    text-black/90 dark:text-white/90
86
                    md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
87
                    before:absolute before:top-[0.75rem] before:left-[-1.125rem]
88
                ">
89
                    {entry.data.title}
90
                </div>
91
            </div>
92
93
            <!-- metadata -->
94
            <div class="onload-animation">
95
                <PostMetadata
96
                        class="mb-5"
97
                        published={entry.data.published}
98
                        updated={entry.data.updated}
99
                        tags={entry.data.tags}
100
                        category={entry.data.category}
101
                ></PostMetadata>
102
                {!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
103
            </div>
104
105
            <!-- always show cover as long as it has one -->
106
            <!-- 使用自制 showcover 控制器控制头图的出现 -->
107
            {showcover && entry.data.image &&
108
                <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
109
            }
110
111
            <!-- 自制内部头图 customcover-->
112
            {customcover &&
113
                <ImageWrapper id="post-cover" src={entry.data.customcover} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
114
            }
115
116
            <!-- 头图调试代码
117
            <pre>
118
            showcover（变量）: {showcover} (type: {typeof showcover})
119
            entry.data.showcover: {entry.data.showcover} (type: {typeof entry.data.showcover})
120
            </pre>
121
            -->
122
123
            <Markdown class="mb-6 markdown-content onload-animation">
124
                <Content />
125
            </Markdown>
126
127
            {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
128
129
        </div>
130
    </div>
131
132
    <div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
133
        <a href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
134
           class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.nextSlug}]}>
135
            {entry.data.nextSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-start gap-4" >
136
                <Icon name="material-symbols:chevron-left-rounded" class="text-[2rem] text-[var(--primary)]" />
137
                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
138
                    {entry.data.nextTitle}
139
                </div>
140
            </div>}
141
        </a>
142
143
        <a href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
144
           class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.prevSlug}]}>
145
            {entry.data.prevSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-end gap-4">
146
                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
147
                    {entry.data.prevTitle}
148
                </div>
149
                <Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
150
            </div>}
151
        </a>
152
    </div>
153
154
</MainGridLayout>

hCaptcha “强兼” reCaptcha？

Wed, 13 Aug 2025 00:00:00 GMT

强兼 Google reCaptcha 失败？

如你所见，这是 hCaptcha 无法验证的样子。当然，如果你在一个页面同时放上 Google reCaptcha（我的是 v2）和 hCaptcha，那么聪明的 hCaptcha 会开始兼容它。

译文：

posts/captcha/
而开启后却是这样的：

没错，出现了 3 个 hCaptcha 框。而且出现的位置就在 reCaptcha 的位置。哇，强兼失败？

byd 太气人了这。

解决方法

将 hCaptcha 的脚本请求 URL 加上 ?recaptchacompat=off 即可：

1
<script
2
    src="https://hcaptcha.com/1/api.js?recaptchacompat=off" async defer>
3
</script>

教你免费获得一个企业域名邮箱

Mon, 11 Aug 2025 00:00:00 GMT

前言

自从你上网冲浪接触邮箱以来，你或多或少都会见过这种邮箱：

这些邮箱都是企业或组织自己域名的邮箱，可以很清楚地体现出这封邮件来自哪个企业/组织。
那么，当我们普通人获得了一个域名，也能用这种自己域名的邮箱吗？答案是能的，可以用阿里云或网易的免费企业邮箱，全免费，能用 IMAP/POP 和 SMTP 服务器给第三方邮箱客户端使用。

限制

推荐查看普通账号常见参数 - 阿里云。

单账号可存储总邮件数：200 万封。
单账号个人网盘空间：5 GB。
每日最大发件数：未考察，可能是一个域名用户(a@b.com) 200 封/天；可能是一个域名(*@b.com) 200 封/天。

需求

一个已实名的阿里云账号（不实名无法购买：您还未实名认证，请务必先前往本页面右上角个人中心进行实名认证。）。
- 阿里云仅支持 14 岁以上通过扫描支付宝二维码、支付宝扫描脸部、上传身份证正反面照片进行实名认证。
- 以下信息来自阿里云：
- 通过支付宝账号进行实名认证并不会自动将该支付宝账号与阿里云账号绑定用于支付。如果您希望在阿里云上使用支付宝进行支付，您仍需要手动将阿里云账号与您的支付宝账号进行绑定。
- 绑定用于支付的支付宝账号可以是实名认证时使用的支付宝账号，也可以是其他支付宝账号。
- 阿里云App仅支持个人支付宝授权认证。
一个域名，可以为不是从阿里云购买的域名（如 Spaceship、Namesilo），实测 dpdns.org 域名也可以使用。
一个能接收验证码的手机号。

开通企业邮服务

订购服务

访问阿里邮箱，滑到下面点击 立即抢购，将会跳转到阿里云，如果阿里云未登录请登录。
在订购页面选择必要配置，完成后点击 立即购买：
- 选择 已有域名，填入自己的域名，填完后往空白处点一下。dpdns.org 也可以用。
- 购买时长选择 5年。
如果你要纯免费，请不要勾选 邮件推送（默认未勾选）。阅读完 企业邮箱免费版服务协议 后，勾选它，并点击 去支付。
无需添加支付方式，点击右下角支付即可。
如果看到这个页面，代表你成功地开通了企业邮服务。

设置前置配置

在下方 使用须知 中找到 进入管理控制台，点击进入。
点击刚刚填写的域名
点击 设置解析，将阿里云给出的 MX 等记录填入你的域名 DNS 提供商（我的是 Cloudflare）。完成后等待 DNS 记录的传播，然后点击 检查域名解析，如果出来的是绿色的解析已生效，证明你的 DNS 记录添加成功。
接着在 重置密码 处设置一个管理员登录密码。密码长度8-64位，须同时包含大写、小写字母、数字、特殊字符中的任意三种，不能含有账号。
复制 基本信息/管理员账号 的地址，为 postmaster@你的域名。

设置邮箱配置

点击进入阿里邮箱登录入口，用户名为刚才复制的管理员账号，密码为 #设置前置配置中第 4 步创建的密码。
如果遇到需要绑定手机号，请绑定。
成功后会来到这个界面。
来到左侧菜单，展开 组织与用户，点击 员工账号管理，填写用户信息。设置好后点击保存：
- 姓名：随便填。
- 默认邮件地址：填写你想用的名字。例如，我想用 i@adclosenn.top 收发邮件，那么 默认邮件地址 就应填写 i。
- 安全手机：可以不填。
- 开启POP3/SMTP服务：如果你需要使用第三方邮箱客户端（如 QQ邮箱、163邮箱、Gmail、Outlook），请勾选。
- 开启IMAP/SMTP服务：如果你需要使用第三方邮箱客户端（如 QQ邮箱、163邮箱、Gmail、Outlook），请勾选。
- 初次登录修改密码：不建议开启。
来到左侧菜单，展开 企业定制，点击 域名管理，点击上方 检查MX解析，查看最下面的 TXT记录(DKIM)，如果验证是失败，则去 DNS 提供商内填写 TXT 记录信息。成功后会如图所示。如果之前曾经设置过其他邮箱提供商的 DNS 记录，需要删除原有的 DNS 记录，以避免产生冲突。

使用企业邮箱

直接使用邮箱

如果你希望直接使用阿里邮箱首发短信，而不是通过QQ邮箱、163邮箱、Gmail等第三方客户端代收发邮件，那么可以直接点击右上角的 退出登录 退出 postmaster 账户。
打开 qiye.aliyun.com/alimail/auth/login ，登录你刚刚创建好的用户，然后收发邮件。

进行 Folo 订阅源认证

Sun, 10 Aug 2025 00:00:00 GMT

前言

如你所见，这是 Folo 的订阅源认证卡片，代表着这个 RSS 订阅源未经认证（没有与订阅源提供者的 Folo 账户进行绑定）。
所以我们现在的目标是 将订阅源与自己的 Folo 账户绑定，认证这个订阅源 。

以下会有 3 种认证方式可选：纯文本、描述、RSS 标签，请根据自己的博客框架或 RSS 生成器选择。

RSS 标签 这种方法适用于悄无声息地认证。
纯文本 这种方法适合大部分博客。

本站使用 RSS 标签方法进行订阅源认证：rss.xml 。

纯文本认证

这种方法极其简单，你只需要发一篇文章到你的博客或者其他平台即可。本质上就是通过读取你的 RSS 订阅文件，查看里面是否有 Folo 给出的文本。所以认证文本必须要可在 RSS 订阅文件找到。
https://blog.adclosenn.top/rss.xml 这个是本站的 RSS 订阅源地址，你可以在最下面的 Footer 处找到。

你需要将类似如这串文本（可在 Folo 中复制）粘贴到你的文章中（不要使用我的，每个人的都不一样）：

1
This message is used to verify that this feed (feedId:177350379949135872) belongs to me (userId:83370505718413312). Join me in enjoying the next generation information browser https://folo.is.

描述认证

也就是 Folo 认证卡片中的中间那个。
这个方法需要把认证语句添加到 RSS 生成器的 <description></description> 处。
如果你使用的和本站相同框架 Astro ，那么可以到 src/config.ts，在 subtitle 添加认证语句。

1
export const siteConfig: SiteConfig = {
2
  title: "Ad_closeNN 的小站",
3
  subtitle: "Ad_closeNN の 小站，时不时会刷新一些野生东西 | ✨ 欢迎友链，天天开心！ ✨ | feedId:177350379949135872+userId:83370505718413312",
4
  lang: "zh_CN", // Language code, e.g. 'en', 'zh-CN', 'ja', etc.
5
}

RSS 标签

如果你使用的和本站相同框架 Astro ，那么可以到 src/config.ts 中的第 6 行，在 </language> 后添加 <follow_challenge></follow_challenge> 进行认证：

1
  return rss({
2
    title: siteConfig.title,
3
    description: siteConfig.subtitle || 'No description',
4
    site: context.site,
5
    items: feed,
6
    customData: `<language>${siteConfig.lang}</language><follow_challenge><feedId>177350379949135872</feedId><userId>83370505718413312</userId></follow_challenge>`,
7
  });

结束

写完并 push，等网站部署完毕后，点击 Folo 右下加的验证按钮，如果通过即为验证成功，恭喜你。

手把手自托管 Umami

Thu, 07 Aug 2025 00:00:00 GMT

自行托管 Umami

什么是 Umami

Umami 是一个开源的的网站统计工具。与 Google Analytics 类似，但比 Google Analytics 的网页 UI 更简洁、精美。

为什么要自托管

Umami 可搭配 Umami Cloud 托管 Umami App。但是这种方式相比自托管有诸多限制：

事件：100,000 次/月
被分析的网站：3 个/账号
数据保留：6 个月
有限的 API 访问
…更多可在 umami/pricing 中查看

条件

一个托管平台账号（任选其一）。本教程以 Netlify 为托管平台演示。
- Netlify
- Vercel
- Cloudflare
- Render
- Railway
- …等
一个 GitHub 账号。
一个数据库。本教程以 Neon 为数据库演示。

自托管

来到 Neon/signup 注册一个账号（注册过的直接去到 console.neon.tech ）。
注册后来到 console.neon.tech。
点击 Create Project 按钮。
取一个项目名字，填到 Project name。Cloud service provider 和 Region 随便选一个即可。然后点击 Create 按钮创建项目。
在项目的 Dashboard 内点击右上角的 Connect 按钮，在 Connect 页面下方点击 Show password，将 psql ' 后，末尾 ' 前的内容复制下来。
访问 @umami-software/umami ，将 umami 仓库 fork 到你的账户下。
访问 Netlify/start，在 Let’s deploy your project with… 里选择 GitHub 并授权到你的 GitHub 账户。
选择刚刚 fork 的 umami 仓库
Project name 随便填，Build Command 请填写 yarn run build（而不是系统给的 pnpm run build-app）。
往下找到 Environment variables，点击 Add environment variables，选择 Add ket/value pairs。Key 中填写 DATABASE_URL，Value 填写在 Neon Console （步骤5）中复制的链接。填写完毕后点击 Deploy umami 按钮来部署。
如果有自定义域名可以绑定自定义域名，优选等一些列步骤。这里就不多赘述了。
访问部署好的 Umami 网页，第一次进入需要输入默认账号和密码。登录 Umami 后台成功后请尽快修改密码。
- Username：admin
- Password：umami
登录成功后，可以在右上角切换显示语言。
至此，你已成功自托管一个 Umami 网站统计工具。恭喜你。

注意事项

新域名！

Wed, 06 Aug 2025 00:00:00 GMT

.dev 域名

GitHub: MCKero6423/fuwari

目前访问 adclosenn.dev 会直接 302 跳转回 adclosenn.top。

.xyz 域名

之前在阿里云买了个8位纯数字的 .xyz 域名，现在买了 .top 后觉得特亏。一是在阿里云里面买任何域名都需要实名认证（14+），还得填一些实际身份的信息，我了个去，填完这些信息都够我在 Spaceship 买两次域名了，真是够麻烦的。。。

.top 域名

买域名后直接开始搭博客，真香~如果不出意外的话，这个域名将会一直用下去。~~毕竟.top确实便宜~~

付款的时候甚至不用绑国外卡，能直接用支付宝付款，更不用实名认证。另外，Spaceship 的 Web UI 做的是真漂亮、简洁。不过毕竟 Spaceship 是一家 “ICANN认证的注册商，自2022年以来为客户服务” 的初创公司，没有隔壁像 Namesilo（2009）、Namecheap（2001）等那么老牌，这么现代的 UI 也挺对。

信息

来源：Spaceship （这是真能省钱）
域名：adclosenn.top
首年花费：7.33 人民币（汇率：1.00 USD = 7.23002 CNY）
次年花费：29.07 人民币（¥27.63 域名费+¥1.44 ICANN 费）
Whois（阿里云国际站）:

1
Domain Name: adclosenn.top
2
Registry Domain ID: D20250806G10001G_53477846-top
3
Registrar WHOIS Server: whois.spaceship.com
4
Registrar URL: http://www.spaceship.com
5
Updated Date: 2025-08-06T05:28:21Z
6
Creation Date: 2025-08-06T04:49:06Z
7
Registrar Registration Expiration Date: 2026-08-06T04:49:06Z
8
Registrar: Spaceship, Inc.
9
Registrar IANA ID: 3862
10
Reseller:
11
Domain Status: clientTransferProhibited https://icann.org/epp#clientTransferProhibited
12
Domain Status: addPeriod https://icann.org/epp#addPeriod
13
Registrant State/Province: Capital Region
14
Registrant Country: IS
15
Name Server: malavika.ns.cloudflare.com
16
Name Server: rustam.ns.cloudflare.com
17
DNSSEC: unsigned
18
Registrar Abuse Contact Email: abuse@spaceship.com
19
Registrar Abuse Contact Phone: +1.16027723958
20
URL of the ICANN WHOIS Data Problem Reporting System: http://wdprs.internic.net/

优惠码

这次购买使用的是 SPSR86，省了1.66 人民币（原价￥8.99）。代码来自 tld-list.com。

新域名的由来

~~便宜！~~

2025/8/2 - 引导

2号晚上，跟着二叉树树博客搞起了TG反代。脑餐的是，我并没有把登录页面放在子路径下，而是直接暴露在公网上了。之前并不知道子域名可以被扫出来，所以也没做好防护。因为搭建好后并没什么问题，所以直接去睡觉了。

2025/8/3 - 预告

早上起来一看发现仍然没问题，TG反代也能正常访问。

起床打开电脑，输入 TGWeb 反代地址，Chrome 直接开出了个大红。嗯，确实是大红。

不过仍然没收到来自任何关于钓鱼、滥用的邮件。

飞到 Google Safe Browsing 透明度报告，一看检查，发现已经被列入了危险列表。

不过因为是自用的，也就无视风险接着用了。

2025/8/4 - 开始

2025年8月4日早上醒来，发现 UptimeRobot 给我发了很多封邮件，全都是 DOWN 的（突然 UP 的是因为 DNS 等缓存问题，后续全都是 DOWN）

我立马就意识到不对劲了。用 itdog 查 NS 记录，发现全都无解析记录。后来 Whois 发现域名居然被 XYZ 注册局 serverHold 了（注册局暂停解析）。

马上找到了阿里云开了个工单。阿里云工程师告诉我要自己去 XYZ 注册局的 gen.xyz/unsuspend 解决。

由于解决 suspend 需要提供证据：

“ Please note that domains will only be reviewed and reactivated when requests are filled out completely and domains have been delisted from all blocklists. ”
“ 请注意，仅当请求完整填写并且域名已从所有阻止列表中删除后，才会审核并重新激活域名。 ”

所以我在 2025/8/7 16:29 的时候提交部分证据和申请信息到了 xyzabuse@gen.xyz 。

2025/8/5 - 申诉

早上一起来，UptimeRobot 仍未发送 UP 通知。再看昨天发给 gen.xyz 的邮件，也没有回复我。索性去 gen.xyz/unsuspend 解决。

解决前，我把几个安全机构的 Support 都发了一遍邮件，让他们重新检查。回头再看 Google Safe Browsing 透明度报告，19991230.xyz及其他除web.外的域，都已经变为绿色正常。

16:00 点后，来到 gen.xyz，填了填报告，submit了。而这居然还有坑？

网站看起来是不用登录就能 Submit 的，因为下面让你填名字和邮箱，实际上没登录时，等你 Submit 后会说你未填写用户名和邮箱地址。注册好 XYZ 账号后，再次 Submit 即可成功提交。（吗？
登录 XYZ 账号后 Submit，会返回 500 Internal Server Error，但实际上貌似已成功发送了你的请求，真是奇怪。

2025/8/6 - 复活

早上再次查看，发现 UptimeRobot 已经发了很多封 UP 邮件。好耶，域名复活了！

1
Tuesday, August 5, 2025 - 20:08 PM
2
3
XYZ Anti-Abuse Agent 656322, Staff
4
5
Subject: Request for Removal of serverHold Status for Domain 19991230.xyz
6
Subject / Abuse Type:
7
8
Hello Ad_closeNN,
9
10
Thank you for your message. This domain has been unsuspended and is now active. This domain was flagged by Spamhaus and has since dropped off due to the site being inactive. Please check Spamhaus DBL after 24 hrs to ensure delisting.
11
12
Please note that it will be added to a watch list for any potential violations of our anti-abuse policies, and we will continue to monitor this domain.
13
14
Also note, it can take up to 24 hours for the WHOIS information to update.
15
16
Please submit a new support ticket at https://gen.xyz/abuse if you have any further evidence or information.
17
18
Kind Regards,
19
XYZ Anti-Abuse Team
20
xyz_abuse@gen.xyz
21
M-F 9am-5pm PT

译文（Google 翻译 ~~生草机~~）

1
2025年8月5日，星期二，晚上8:08
2
3
XYZ 反滥用代理 656322，工作人员
4
5
主题：请求移除域名 19991230.xyz 的服务器暂停状态
6
主题/滥用类型：
7
8
您好，Ad_closeNN，
9
10
感谢您的留言。此域名已解除暂停状态，现已恢复正常。此域名曾被 Spamhaus 标记，由于网站处于非活跃状态，现已下架。请在 24 小时后查看 Spamhaus 的 DBL，以确保将其下架。
11
12
请注意，我们将把该域名添加到监视列表中，以查找任何可能违反我们反滥用政策的行为，并持续监控该域名。
13
14
另请注意，WHOIS 信息更新可能需要最多 24 小时。
15
16
如果您有任何进一步的证据或信息，请访问 https://gen.xyz/abuse 提交新的支持工单。
17
18
此致，
19
20
XYZ 反滥用团队
21
xyz_abuse@gen.xyz
22
周一至周五 上午 9 点至下午 5 点（太平洋时间）

然后到了中午，看着旧 .xyz 域名，因为这个域名被标记过，之后可能也会被持续严格视奸，所以想到了买一个新的域名。于是到 Namesilo、NameCheap、Spaceship 看，发现英文域名+ .top 比较便宜。Google 一搜优惠代码，真找到了个能用的。于是就以￥7.33 拿下了 adclosenn.top 的首年~~~

结语

这件事经历了4天（8/2~8/6），让我体会到了从域名被 serverHold 到 active 的过程。

所以… 搞反代千万不能把登录等敏感页面直接暴露在公网（推荐自用密码+/xxx） 😡😡😡

血一般的教训 😡😡😡 我都没想过会 serverHold 😡😡😡 我真的没想过钓鱼 😡😡😡