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

推荐订阅源

让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
人人都是产品经理
人人都是产品经理
Cisco Talos Blog
Cisco Talos Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
V
V2EX
博客园 - 三生石上(FineUI控件)
Martin Fowler
Martin Fowler
WordPress大学
WordPress大学
D
Docker
S
SegmentFault 最新的问题
博客园 - 聂微东
美团技术团队
Apple Machine Learning Research
Apple Machine Learning Research
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Last Week in AI
Last Week in AI
M
MIT News - Artificial intelligence
F
Fortinet All Blogs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
The GitHub Blog
The GitHub Blog
GbyAI
GbyAI
L
LangChain Blog
Vercel News
Vercel News
博客园 - 叶小钗
MongoDB | Blog
MongoDB | Blog
Stack Overflow Blog
Stack Overflow Blog
H
Help Net Security
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
The Cloudflare Blog
Engineering at Meta
Engineering at Meta
T
Threat Research - Cisco Blogs
T
Threatpost
Scott Helme
Scott Helme
T
Tailwind CSS Blog
Latest news
Latest news
Stack Overflow Blog
Stack Overflow Blog
Blog — PlanetScale
Blog — PlanetScale
The Register - Security
The Register - Security
罗磊的独立博客
P
Proofpoint News Feed
腾讯CDC
S
Schneier on Security
雷峰网
雷峰网
A
About on SuperTechFans
T
Tenable Blog
F
Full Disclosure
Cyberwarzone
Cyberwarzone
博客园_首页
有赞技术团队
有赞技术团队
K
Kaspersky official blog

文章列表

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 大佬 的这篇文章:

GB

如何移植 Solitude 主题中的十年之约进度条至 anzhiyu 主题

开始缝合#

如今万事具备只欠动手了,我啪的一下很快就照着教程改完了,然后不出意外自然就要出意外了,三连运行 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 %}

成品图

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