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

推荐订阅源

cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
B
Blog RSS Feed
宝玉的分享
宝玉的分享
腾讯CDC
博客园_首页
T
Tailwind CSS Blog
月光博客
月光博客
博客园 - 司徒正美
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
M
MIT News - Artificial intelligence
A
About on SuperTechFans
云风的 BLOG
云风的 BLOG
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
有赞技术团队
有赞技术团队
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
大猫的无限游戏
大猫的无限游戏
MongoDB | Blog
MongoDB | Blog
博客园 - 聂微东
V
Visual Studio Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
SecWiki News
SecWiki News
美团技术团队
P
Privacy International News Feed
H
Help Net Security
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Microsoft Security Blog
Microsoft Security Blog
Know Your Adversary
Know Your Adversary
Y
Y Combinator Blog
D
DataBreaches.Net
Project Zero
Project Zero
T
The Blog of Author Tim Ferriss
Cyberwarzone
Cyberwarzone
C
Cybersecurity and Infrastructure Security Agency CISA
C
Cisco Blogs
S
Schneier on Security
G
GRAHAM CLULEY
博客园 - 三生石上(FineUI控件)
Cisco Talos Blog
Cisco Talos Blog
小众软件
小众软件
Forbes - Security
Forbes - Security
D
Docker
T
Tenable Blog
S
Secure Thoughts
雷峰网
雷峰网
S
Security @ Cisco Blogs
T
The Exploit Database - CXSecurity.com
The Cloudflare Blog
博客园 - 【当耐特】
Spread Privacy
Spread Privacy
阮一峰的网络日志
阮一峰的网络日志

辰渊尘站

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

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