为Fuwari框架适配友链状态显示

TIP
修改前必读：

本帖基于 Astro框架 的 Fuwari主题 进行修改方案编写，因此请读者优先掌握 Astro Docs 的内容后再来进行魔改。

由于修改内容较多，以及可能会导致意料之外的事情，推荐使用 Github 配合 VSCode 进行修改，方便随时备份恢复

前言#

之前在用 Hexo 的 anzhiyu 主题时，就搞过一次友链状态显示的功能（详见安知鱼主题实现友链状态前端显示），当时用的是 LiuShen 大佬的 check-flink 方案，效果还不错。

后来博客迁移到了 Astro 框架的 Fuwari 主题，之前那些 Hexo 的东西自然是用不了了。一直惦记着这个功能，趁着有空就把它给搞上了。

实现来自：LiuShen 大佬的友链状态检测方案

解析#

先简单说一下这个功能的原理，其实和之前 anzhiyu 主题那篇是一样的套路：

后端检测：通过 GitHub Action 定时运行 Python 脚本，访问所有友链站点，记录延迟和可达性
生成结果：检测结果输出到一个 result.json 文件，部署在 Vercel / Zeabur 等平台
前端渲染：页面加载时 fetch 这个 JSON，根据延迟数据在友链卡片上显示彩色状态标签

状态颜色分级如下：

绿色（延迟 < 1s）：站点响应很快
黄色（延迟 1s ~ 2s）：正常速度
橙色（延迟 >= 2s）：有点慢
红色（超时 / 不可达）：站点可能挂了

修改#

后端配置#

后端检测部分直接使用 LiuShen 大佬的 check-flink 项目，具体部署教程可以参考他的文章，这里就不重复了。你需要做的就是：

Fork 他的仓库
配置 GitHub Action
部署到 Vercel / Zeabur，拿到一个可以访问 result.json 的 URL

拿到 URL 后，记下来，后面要用。

友链页改造#

首先需要修改 src/pages/link.astro，给每个友链卡片加上 data-url 属性和状态标签的容器。

1
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
2
            {friends.map((friend) => (
3
                <a href={friend.url} target="_blank" class="friend-card">
4
                <a href={friend.url} target="_blank" class="friend-card" data-url={friend.url}>
5
                    <span class="friend-status"></span>
6
                    <div class="flex items-center gap-2">

然后在 <style> 部分添加状态标签的样式。注意 .friend-card 需要加上 relative 定位，这样状态标签才能相对卡片定位。

1
// src/pages/link.astro <style>
2
    .friend-card {
3
        @apply flex flex-col gap-1 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10 hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5;
4
        @apply relative flex flex-col gap-1 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10 hover:border-black/20 dark:hover:border-white/20 hover:bg-black/5 dark:hover:bg-white/5;
5
        transition-property: background-color, border-color, scale;
6
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
7
        transition-duration: 0.15s;
8
        transform: translateZ(0);
9
    }
10

11
    .friend-status {
12
        position: absolute;
13
        top: 8px;
14
        right: 8px;
15
        font-size: 0.7rem;
16
        padding: 2px 6px;
17
        border-radius: 4px;
18
        color: #fff;
19
        line-height: 1.2;
20
        white-space: nowrap;
21
        display: none;
22
    }
23

24
    .friend-card:active {

渲染逻辑#

最关键的一步，在 src/layouts/Layout.astro 的 </style> 标签后面添加内联脚本。这里用 is:inline 让脚本直接在客户端执行，不经过 Astro 的打包处理。

1
</style>
2

3
<script is:inline>
4
function renderLinkStatus() {
5
    if (!document.querySelector(".friend-status")) return;
6
    fetch("https://check-flink.mcxiaochen.top/result.json")  // 改成你自己的 URL
7
        .then(res => res.json())
8
        .then(data => {
9
            if (!data.link_status) return;
10
            const statusMap = {};
11
            data.link_status.forEach(item => {
12
                statusMap[item.link] = item;
13
            });
14
            document.querySelectorAll(".friend-status").forEach(el => {
15
                const card = el.closest("[data-url]");
16
                if (!card) return;
17
                const url = card.getAttribute("data-url");
18
                const info = statusMap[url];
19
                if (!info) return;
20
                el.style.display = "inline-block";
21
                if (info.latency === -1) {
22
                    el.style.backgroundColor = "#ef4444";
23
                    el.textContent = "超时";
24
                } else if (info.latency < 1) {
25
                    el.style.backgroundColor = "#22c55e";
26
                    el.textContent = info.latency + "s";
27
                } else if (info.latency < 2) {
28
                    el.style.backgroundColor = "#f59e0b";
29
                    el.textContent = info.latency + "s";
30
                } else {
31
                    el.style.backgroundColor = "#f97316";
32
                    el.textContent = info.latency + "s";
33
                }
34
            });
35
        })
36
        .catch(err => console.error("friend link status error:", err));
37
}
38

39
function setupLinkStatus() {
40
    renderLinkStatus();
41
    if (window.swup) {
42
        window.swup.hooks.on("page:view", renderLinkStatus);
43
    }
44
}
45

46
if (window?.swup?.hooks) {
47
    setupLinkStatus();
48
} else {
49
    document.addEventListener("swup:enable", setupLinkStatus);
50
}
51
</script>
52

53
<script>

这里有一个小细节：Fuwari 主题使用了 swup 做页面过渡动画，所以需要监听 swup 的 page:view 事件，在页面切换后重新渲染状态标签。如果不做这个处理，在友链页和其他页面之间切换时，状态标签就不会刷新。

顺便修的一个小 Bug#

在改的过程中发现 src/layouts/Layout.astro 里的 keywords meta 标签有个小问题 —— 当 siteConfig.keywords 是数组时，直接塞进 content 属性会变成逗号分隔的奇怪字符串。顺手修了一下：

1
    <meta name="keywords" content={siteConfig.keywords}>
2
    <meta name="keywords" content={Array.isArray(siteConfig.keywords) ? siteConfig.keywords.join(', ') : siteConfig.keywords}>

写在最后#

到这里就大功告成了，效果就是在友链卡片的右上角会显示一个小标签，颜色根据延迟自动变化。

好处：

一目了然：打开友链页就能看到哪些站点正常、哪些挂了
自动更新：后端 GitHub Action 定时检测，前端实时拉取，不用手动维护
视觉友好：颜色分级直观，绿色放心、红色警惕

代码是 AI 辅助修改的，如果有问题欢迎评论区指出~

前言#

解析#

修改#

后端配置#

友链页改造#

渲染逻辑#

顺便修的一个小 Bug#

写在最后#

参考资料（排名不分先后）#