开头：一次「都做一遍」的维护巡检博客上线大半年，CI 和评论系统一直是「能跑就行」的状态。直到某天收到一份维护建议清单，逐条核对才发现问题比想象的多： 两个 workflow 技术栈分裂：friend-check.yml 用 Node 20 + npm install --no-save js-yaml，deploy.yml 用 Node 22 + npm ci，部署还分 PAT 和 SSH key 两套凭证 Lighthouse 门禁四个断言全是 warn（黄灯），压不住任何问题 图片上传 Worker 挂着 6 个渠道，其中 webdav 早已无人使用 评论系统两个镜像 Bug：Waline 评论区图片点不动（没接 fancybox），Twikoo 评论图片点一次放大两次（服务端 lightbox 和主题 fancybox 叠加） 本文完整记录这轮收敛与修复：CI 怎么从「三套班子」收敛成一条链，以及两个评论图片 Bug 为什么是镜像的、怎么修。 目标声明 + 前置条件本文带你完成：CI 统一为单一构建链（Node 22 + npm ci + SSH key）、Lighthou ...

开头：为什么你的教程「看的人多，照着做的人少」？写技术教程最挫败的瞬间：文章收藏过千，评论区却全是「第 3 步就失败了」。不是读者笨，是文章结构没有服务「照着做」——大段原理铺垫、步骤之间没有预期输出、报错没有排查指引，读者走到一半就迷路了。 我研究了三家公认「教程质量天花板」的站点——web.dev（Google 官方）、DigitalOcean（云厂商社区）、freeCodeCamp（全球最大免费编程社区），拆解它们的代表性教程（CSS Box Model / PostgreSQL 安装 / ToC 写作规范），提炼出可复制的结构件与流程，并落地成本站 scaffolds/tutorial.md 脚手架。 目标声明 + 前置条件本文带你完成：理解六种结构件的作用与写法、学会按「钩子 → 目标 → Step → 检查点 → FAQ → 延伸」编排一篇教程，并直接使用本站的教程脚手架开写。 前置条件： 有想写的技术主题（哪怕只有一个函数/一次踩坑） 本站 scaffolds/tutorial.md 脚手架已入库（hexo new tutorial & ...

开头：F12 就能抄走你的图床 Token上一版评论上传（见系列第一篇），Token 直接写在前端配置里。一次安全检查发现：hexo generate 的产物里，Authorization: Bearer imgbed_xxx 明晃晃地躺在 JS 中——任何访客打开 DevTools 就能抄走，然后拿你的图床当免费存储。 整改方案：加一层 Cloudflare Worker 代理。浏览器只碰代理域名，图床 Token 存 Worker Secret，前端零凭据；顺带把 Origin 白名单、IP 限流、渠道白名单、类型/大小限制全部做进代理层，图床从「裸奔」变「全副武装」。 目标声明 + 前置条件本文带你完成：评论图片上传改为「浏览器 → Worker → 图床」三跳架构，Token 不再出现在任何静态产物中，且 Worker 具备来源校验、限流、白名单、类型大小检查；访客还能弹窗自选上传渠道。 前置条件： 已有 Cloudflare 账号与图床（ImgBed/Telegraph/Discord 等渠道） 已掌握 npx wrangler 部署（lo ...

开头：评论框的「上传图片」按钮，点了没反应Waline 评论框默认没有图片上传能力（imageUploader 为空），访客想发截图只能贴外链。本文把「对接 CloudFlare ImgBed 图床」的完整配置讲清楚——同时把初版方案的安全缺陷也讲清楚：因为初版是把图床 Token 直接写进前端配置的，任何人 F12 就能抄走。看完这篇你会明白为什么后来要上 Worker 代理（见系列第二篇）。 目标声明 + 前置条件本文带你完成：评论框图片上传可用（选图 → 上传图床 → 插入 Markdown 图片语法），并理解初版方案的局限。 前置条件： 已搭建 Waline（评论区正常显示） 已部署 CloudFlare ImgBed 图床，拿到 API Token 图床服务端配好 CORS（浏览器直连必须） 你将学会： 图床 /upload API 协议 waline.imageUploader 函数式配置 waline.pug 如何把配置传进 Waline init 初版方案的 Token 泄漏风险 Step 1：了解图床 API 协议 目的：知道上传接口长什么样。做完这步 ...

系列简介本系列记录本站 Waline 评论图片上传功能的完整演进：初版（浏览器直连 CloudFlare ImgBed 图床，Token 硬编码）→ v2（Cloudflare Worker 代理，Token 转存 Secret）→ v3（访客自选上传渠道 + 前端弹窗交互）。 适用版本：Waline + anzhiyu 主题 + Cloudflare Worker（workers/waline-image-upload/）线上架构：upload.weiguang.eu.org（Worker）→ img.weiguang.eu.org（图床） 全系列目录 篇 标题 核心内容 ① Waline 评论图片上传 + CloudFlare ImgBed 图床（整理版） waline.imageUploader 配置、图床 API 对接、waline.pug 传入 init、跨域排查——含初版方案的致命安全缺陷 ② Cloudflare Worker 代理上传：Token 移出前端与安全防护 Origin 白名单、KV 限流、渠道白名单、类型/大小限制、GET /ch ...

开头：移动端布局突然「崩了」折叠态播放器在手机上打开控制台，封面缩成 25px 小圆点、按钮飞到 120px 外、歌词整个错位——控制台态的音乐布局规则一条都没生效。 排查结论令人震惊：console.css 里大量 .aplayer-withlrc 规则从未匹配过。因为定制版 APlayer 配置是 lrcType: 0，实例 class 只有 aplayer aplayer-withlist，APlayer 只在 lrcType 有效时自动加 withlrc 类——而我们把歌词改成了自绘（见系列第二篇），lrcType 从来没设过。本文从「补类」这个根因讲起，完整梳理控制条与布局的双态体系。 目标声明 + 前置条件本文带你完成：折叠/展开双态卡片、空闲自动收起、可拖常驻音量条、控制台大圆盘布局，并修好 withlrc 类缺失导致的选择器失效问题。 前置条件： 已完成系列第一、二篇（保活架构 + 自绘歌词） 了解主题 _extra/console/console.css 控制台样式组织 你将学会： aplayer-withlrc 类缺失的根因与补救 折叠/ ...

开头：歌词不是「没有」，是「没对上」左下角播放器从 APlayer 官方示例抄的歌词配置，跑起来永远是「暂无歌词」——明明歌单里每首歌都有 lrc 字段。后来换成 lrcType: 3（异步 fetch 歌词），歌词出来了，但永远慢半拍：歌已经唱到副歌，高亮还停在第一句。 根因：APlayer 的异步歌词加载与 timeupdate 播放进度不同步，且它只比对「播放列表索引」不比对「歌词内容」——切歌后旧歌单晚到的歌词 XHR 还能覆盖新歌词。本文给出三件套解法：统一解析器 + 自绘滚动 + 竞态对比根治。 目标声明 + 前置条件本文带你完成：左下角播放器与音乐馆页歌词逐行精准同步、切歌不串歌词、深浅色模式可读，并把「暂无歌词」彻底消灭。 前置条件： 已完成本系列第一篇（音频保活架构） 歌单数据含 lrc / lyric 字段（URL 或内嵌） 可本地起 hexo s 验证 你将学会： 统一歌词解析器 window.__parseLrc（多时间戳、毫秒、排序） 为什么自绘比 APlayer lrcType 可靠 音乐馆歌词竞态的「期望 vs 实际」对比根治法 深浅 ...

开头：翻页断歌，是博客播放器的原罪博客是 pjax 单页应用：点文章链接，只换 body-wrap 内容。音乐播放器装在 body-wrap 之外，本不该受影响——但主题的 pjax 逻辑会 destroy() 所有非 fixed 的 APlayer，而 APlayer 的 destroy() 会执行 pause() + audio.src=""。结果：每点一次链接，歌就断了。 更隐蔽的坑在后面：等你想修复时，会发现定制版 APlayer（lrcType: 0）的模板顶层类不是 .aplayer 而是 .aplayer-body，主题自带的实例判断全部失效——修一个 bug 撞出三个坑。本文给出最终方案：audio 常驻 body 隐藏容器 + 原型三连 patch + 状态落盘恢复。 目标声明 + 前置条件本文带你完成：pjax 切页（含整页刷新）时，左下角播放器歌曲不断、进度不丢、播放状态保持，声音零中断。 前置条件： anzhiyu v1.7.1+（定制版 APlayer，代码在 themes/anzhiyu/source/js/utils.js） 懂 ...

系列简介本系列把 anzhiyu 主题左下角音乐播放器（APlayer 定制版）的深度魔改过程全拆解。每篇一个主题：切页零中断、歌词、控制条与布局，附源码位置（themes/anzhiyu/source/js/utils.js 等）与实测数据。 适用版本：Hexo 7.x + anzhiyu v1.7.1+（定制版 APlayer，lrcType: 0）配套工具：tools/edge-verify/（puppeteer-core 驱动本机 Edge 自动化验证） 全系列目录 篇 标题 核心内容 ① 切页零中断：pjax 下播放不暂停的架构与补丁 audio 常驻 body 隐藏容器、needInit 判断、destroy/initAudio/setAudio 三连 patch、sessionStorage 恢复、无缝接力降级 ② 歌词功能：URL 歌词、自绘滚动与竞态根治 window.__parseLrc 统一解析、timeupdate 自绘同步、音乐馆歌词竞态修复、深浅色可读性 ③ 控制条与布局：展开折叠、音量条与控制台态 折叠/ ...