惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

T
Threatpost
aimingoo的专栏
aimingoo的专栏
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
Tailwind CSS Blog
J
Java Code Geeks
博客园_首页
Google Online Security Blog
Google Online Security Blog
Hugging Face - Blog
Hugging Face - Blog
C
CXSECURITY Database RSS Feed - CXSecurity.com
I
Intezer
P
Palo Alto Networks Blog
V
Vulnerabilities – Threatpost
雷峰网
雷峰网
O
OpenAI News
SecWiki News
SecWiki News
小众软件
小众软件
酷 壳 – CoolShell
酷 壳 – CoolShell
美团技术团队
N
News | PayPal Newsroom
Project Zero
Project Zero
Forbes - Security
Forbes - Security
IT之家
IT之家
A
Arctic Wolf
WordPress大学
WordPress大学
Jina AI
Jina AI
T
Tor Project blog
博客园 - 三生石上(FineUI控件)
S
Secure Thoughts
Google DeepMind News
Google DeepMind News
Attack and Defense Labs
Attack and Defense Labs
博客园 - 聂微东
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
P
Privacy International News Feed
Cloudbric
Cloudbric
G
GRAHAM CLULEY
博客园 - 叶小钗
H
Hacker News: Front Page
腾讯CDC
量子位
Help Net Security
Help Net Security
人人都是产品经理
人人都是产品经理
C
Cyber Attacks, Cyber Crime and Cyber Security
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
宝玉的分享
宝玉的分享
爱范儿
爱范儿
L
Lohrmann on Cybersecurity
Hacker News - Newest:
Hacker News - Newest: "LLM"
Recorded Future
Recorded Future
C
CERT Recently Published Vulnerability Notes

辰渊尘站

713解锁节来辣!小米17全系,k90pm又能解bl了 - 辰渊尘站 服务器面板迁移:从宝塔到 1Panel - 辰渊尘站 Subconverter 太臃肿?PHP 版轻量化替代来了! - 辰渊尘站 Astro框架Fuwari主题侧边栏添加Umami访问统计 为Fuwari框架适配友链状态显示 免费领取网易云音乐7天会员 小米MiMo Token Plan免费送辣! Astro框架Fuwari主题实现仿hexo-abbrlink功能 观《鬼灭之刃:无限城篇 第一章 猗窝座再袭》首映有感 为你anzhiyu主题的Twikoo评论系统恢复预览按钮 山东泰安泰山游记:煌煌泰山景,谦谦君子风 安知鱼主题:修复背景图修改引发的深色模式可读性问题 我敲!优选DNS牛大了 安知鱼主题侧边栏添加无聊湾 从零开始使用Hexo框架搭建属于你的博客(一)环境准备篇 记录下Hexo博客从本地构建迁移到Netlify,AI API Key 泄露问题与解决方案记录 云服务器宝塔部署Twikoo博客评论系统 手把手教你在Linux系统下部署MCSManager并搭建一个MC服务器 为你的Twikoo添加酷安表情包 记录一次博客评论迁移过程 记一次花嫁联名借记卡申领过程 为使用anzhiyu主题的博客加上十年之约进度条 有关建站一个月以来的一点点感想和后续计划 这可能是iOS自签的版本答案,二合一LiveContainer教程来辣! iOS侧载新选择!SideStore+LiveContainer,纯净无广,无限安装软件!!! 从零开始使用Hexo框架搭建属于你的博客(零)准备篇 Arch Linux+Hyprland从安装到使用只需这一篇(保姆级喂饭超全教程) - 辰渊尘站 恭喜你找到了本站的第一篇文档 - 辰渊尘站
安知鱼主题实现友链状态前端显示
辰渊尘 · 2025-09-16 · via 辰渊尘站

前言#

早些时候就看到了Mo佬友链页的访问速度统计,非常眼馋。

如图

感觉很方便,了解了一下发现有点麻烦,随后放弃。(那自然是不可能的

今天有空了把这事儿想起来了,翻了几个也用anzhiyu主题的博客,发现GB大佬用的也是相同方案,于是开始(借鉴)代码。

实装#

配置后端#

参考清羽大佬这篇文章:

友链页显示实现#

创建 source/js/flink.js 文件

(function() {

const STATUS_CACHE_KEY = "statusTagsData";

const STATUS_JSON_URL = "https://check-flink.mcxiaochen.top/result.json"; // 这里设为你自己的url

let latestData = [];

// 渲染状态标签

function addStatusTags(data) {

if (!Array.isArray(data)) return;

document.querySelectorAll(".flink-list-item").forEach(item => {

// 防止重复添加

if (item.querySelector(".status-tag")) return;

// 获取显示名字

const nameEl = item.querySelector(".flink-item-name, .cf-friends-name");

if (!nameEl) return;

const nameText = nameEl.textContent.trim();

// 根据名字匹配 JSON 数据

const status = data.find(s => s.name === nameText);

if (!status) return;

// 创建状态标签

const tag = document.createElement("div");

tag.classList.add("status-tag");

let text = "未知";

let colorClass = "status-tag-red";

if (status.latency >= 0) {

text = status.latency.toFixed(2) + " s";

colorClass = status.latency <= 2 ? "status-tag-green"

: status.latency <= 5 ? "status-tag-light-yellow"

: status.latency <= 10 ? "status-tag-dark-yellow"

: "status-tag-red";

}

tag.textContent = text;

tag.classList.add(colorClass);

// 保证父容器相对定位

item.style.position = "relative";

item.appendChild(tag);

});

}

// 获取 JSON 数据(带缓存)

function fetchStatusData() {

const cache = localStorage.getItem(STATUS_CACHE_KEY);

if (cache) {

try {

const parsed = JSON.parse(cache);

const cachedData = Array.isArray(parsed.data) ? parsed.data : (parsed.data?.link_status || []);

if (Date.now() - new Date(parsed.timestamp).getTime() < 18e5) { // 30分钟有效

latestData = cachedData;

addStatusTags(latestData);

}

} catch (e) {

console.warn("❌ 解析缓存失败,忽略缓存", e);

}

}

fetch(`${STATUS_JSON_URL}?t=${Date.now()}`)

.then(r => r.json())

.then(json => {

latestData = Array.isArray(json) ? json : (json.link_status || []);

addStatusTags(latestData);

localStorage.setItem(STATUS_CACHE_KEY, JSON.stringify({ data: latestData, timestamp: new Date().toISOString() }));

})

.catch(err => console.error("❌ 获取 result.json 出错:", err));

}

// 监听 DOM 变化,自动渲染新增卡片

function observeNewItems() {

const observer = new MutationObserver(() => addStatusTags(latestData));

observer.observe(document.body, { childList: true, subtree: true });

}

// 初始化

document.addEventListener("DOMContentLoaded", () => {

fetchStatusData();

observeNewItems();

});

document.addEventListener("pjax:complete", () => {

fetchStatusData();

});

})();

创建 source/css/custom.css 文件

.status-tag {

position: absolute;

bottom: 0;

right: 0;

padding: 0 3px;

border-radius: 6px 0 12px 0;

font-size: 10px;

color: #fff;

font-weight: 700;

transition: font-size .3s ease-out, opacity .3s ease-out;

}

.flink-list-item:hover .status-tag {

font-size: 0;

opacity: 0;

}

.status-tag-green { background-color: #599e0b; }

.status-tag-light-yellow { background-color: #fed101; }

.status-tag-dark-yellow { background-color: #f0b606; }

.status-tag-red { background-color: #b90000; }

接着去 _config.anzhiyu.yml 引用下文件

inject:

head:

- <link rel="stylesheet" href="/css/custom.css">

bottom:

- <script src="/js/flink.js"></script>

大功告成#

效果如图:

最终效果

尾声#

flink.js 我原本直接复制(借用)GB大佬的文件后发现只能看到第一条友链的延迟信息,就丢给GPT改成 name 值匹配了,要是你的友链存在同名不同url的情况,可能会boom,请知悉。

参考资料(排名不分先后)#