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

推荐订阅源

TaoSecurity Blog
TaoSecurity Blog
T
Troy Hunt's Blog
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Vercel News
Vercel News
T
Threatpost
G
Google Developers Blog
T
Threat Research - Cisco Blogs
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
T
The Exploit Database - CXSecurity.com
H
Heimdal Security Blog
Google DeepMind News
Google DeepMind News
Cyberwarzone
Cyberwarzone
T
The Blog of Author Tim Ferriss
Know Your Adversary
Know Your Adversary
Hacker News: Ask HN
Hacker News: Ask HN
www.infosecurity-magazine.com
www.infosecurity-magazine.com
S
Schneier on Security
B
Blog
V2EX - 技术
V2EX - 技术
NISL@THU
NISL@THU
C
CERT Recently Published Vulnerability Notes
W
WeLiveSecurity
C
Cybersecurity and Infrastructure Security Agency CISA
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
Y
Y Combinator Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Spread Privacy
Spread Privacy
The Last Watchdog
The Last Watchdog
V
Vulnerabilities – Threatpost
N
Netflix TechBlog - Medium
Schneier on Security
Schneier on Security
F
Fortinet All Blogs
N
News | PayPal Newsroom
Attack and Defense Labs
Attack and Defense Labs
Blog — PlanetScale
Blog — PlanetScale
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Microsoft Security Blog
Microsoft Security Blog
S
Security @ Cisco Blogs
人人都是产品经理
人人都是产品经理
爱范儿
爱范儿
P
Privacy & Cybersecurity Law Blog
P
Proofpoint News Feed
Project Zero
Project Zero
I
Intezer
罗磊的独立博客
H
Hackread – Cybersecurity News, Data Breaches, AI and More
酷 壳 – CoolShell
酷 壳 – CoolShell
博客园 - Franky
SecWiki News
SecWiki News
Martin Fowler
Martin Fowler

辰渊尘站

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添加酷安表情包 记录一次博客评论迁移过程 记一次花嫁联名借记卡申领过程 有关建站一个月以来的一点点感想和后续计划 这可能是iOS自签的版本答案,二合一LiveContainer教程来辣! iOS侧载新选择!SideStore+LiveContainer,纯净无广,无限安装软件!!! 从零开始使用Hexo框架搭建属于你的博客(零)准备篇 Arch Linux+Hyprland从安装到使用只需这一篇(保姆级喂饭超全教程) - 辰渊尘站 恭喜你找到了本站的第一篇文档 - 辰渊尘站
为使用anzhiyu主题的博客加上十年之约进度条
辰渊尘 · 2025-08-18 · via 辰渊尘站

前言#

我从选择anzhiyu主题后大多搭建教程都是看的 Mo佬这篇文章,查找资料的同时自然少不了 偷窥(观摩)大佬的站点。其中他个人页的十年之约进度条可让我眼馋很久,如今博客稳定下来了,我自然要把它 (借鉴)过来。

查找资料#

秉持着能 {% kbd Ctrl %} + {% kbd C %} {% kbd V %} 就决不手搓的原则,我开始网上冲浪。经过一翻寻找,找到了 GB大佬 的这篇文章:

开始缝合#

如今万事具备只欠动手了,我啪的一下很快就照着教程改完了,然后不出意外自然就要出意外了,三连运行hexo服务后???擦,这咋全是报错,我人傻了,丢给ai也没找到有用的线索,于是开始学pug语法,经过1小时的学习后我找到了问题所在——

anzhiyu>layout>includes>page>about.pug进度函数 这一步,少了一行script.,导致函数被误认为模板语法,加上之后三连运行,果然一切顺利!

修bug#

主要就是缺少了script.,加上就没问题了,以下是修改后的代码,可以正常运行

代码已经缩进好了,搜索第一行直接粘贴即可

!= page.content

// ✅ 添加 Tenyear 模块

if tenyear

.author-content#tenyear

.create-site-post.author-content-item.single

.author-content-item-tips= tenyear.tips

.author-content-item-title= tenyear.title

p= tenyear.text

.tenyear-timeline

.progress

.past-time

.percentage-label

.time-labels

.start-time#tenyear-start-time= new Date(tenyear.start).toLocaleDateString()

.end-time#tenyear-end-time= new Date(tenyear.end).toLocaleDateString()

script.

// ✅ 十年之约进度函数

function updateTenYearProgress() {

let progressElement = document.querySelector(".progress");

let pastTimeElement = document.querySelector(".past-time");

let percentageLabelElement = document.querySelector(".percentage-label");

let startTimeElement = document.getElementById("tenyear-start-time");

let endTimeElement = document.getElementById("tenyear-end-time");

if (!startTimeElement || !endTimeElement) return;

let startTime = new Date(startTimeElement.textContent).getTime();

let endTime = new Date(endTimeElement.textContent).getTime();

const currentTime = new Date().getTime();

const progress = ((currentTime - startTime) / (endTime - startTime) * 100);

const progressPercentage = Math.min(progress, 100) + "%";

pastTimeElement.style.setProperty("--past-time-percentage", progress + "%");

progressElement.style.setProperty("--progress-percentage", progressPercentage);

if (progress > 5) {

percentageLabelElement.textContent = `${progress.toFixed(0)}%`;

percentageLabelElement.style.left = `calc(${progress}% - 35px)`;

}

percentageLabelElement.style.visibility = "visible";

}

if (document.getElementById("tenyear")) {

updateTenYearProgress();

}

最后效果#

{% note info flat %}我建站时间过短,导致进度文本还显示不出来,实际上是有进度文字的 {% endnote %}

成品图

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