随手记一笔.

给每节的环境光加了漂移动画之后，无头浏览器里整站开始掉帧，连不相干的跑马灯都卡。

blur 是一次性的：栅格化完就是一张纹理。transform 平移它，是整帧搬纹理，很便宜。但动画里还写了 scale(1.16)——缩放会改变模糊的视觉半径，浏览器只好每一帧都重算那 64px 的高斯模糊。软件渲染下，每帧都是一次全尺寸卷积。

改法是缩放从动画里删掉，光斑要多大就把元素本身做多大，动画只留 translate。

抓到它的是现成的无头测试：解码动画要在 4 秒内播完，一直正常，某天开始超时。帧率掉没掉，测试先于肉眼知道。

给 RSS 里的外链统一加 target="_blank"，用的是 re.sub 加组引用。生成完一跑，XML 解析直接报错，指向一行 <a href="">。

链接的地址没了。替换串里的 \1 在脚本字符串里过了两道转义，一道没写对，它就静默地变成了空串——没有报错，没有警告，只是引用丢了，剩下个合法的空字符串。

改法是用回调函数：lambda m: '...' + m.group(1) + '...'。组引用不经过字符串转义，就没有可丢的地方。

肉眼永远看不出来这种错——href="" 是完全合法的。能抓住它的还是那套笨办法：把 feed 当 XML 完整解析一遍。

有类装饰靠 html[data-js] 这个属性决定出不出场。给五个手写页面补这个开关时，用 grep -c data-js 确认过——每一页都有。上了线，那些开关在浏览器里就是不出现。

原因：页面里讲退路的注释也写着「data-js」。grep 数的是包含这个词的行数，注释和代码它不分。

后来改搜 dataset.js——只有真正可执行的那一行才这么写。再往后干脆让测试开一个禁用 JavaScript 的浏览器去看：按钮在不在，浏览器说了算。

文本搜索找到的是字，不是会跑的字。

深色主题调了十几版，浅色一直是"能看就行"。

今天量了一下对比度：邮箱那一行的粉色标签 #ff6fb5 在白底上只有 2.6:1，规格表的紫色小字 3.0:1。WCAG 对 12px 文字的要求是 4.5:1。深色下这两处都在 8:1 左右，所以一直没觉得有问题。

改法不复杂：浅色主题单独配一套加深的色相，深色那套不动。以前以为主题切换就是换背景和文字色，现在知道强调色也得各配一套。

顺带一句：这个对比度是脚本读计算样式算出来的，肉眼真的看不出来。

主题切换按钮在 320px 上是靠右的，到了 375 和 390 就跑到 logo 和导航中间去了。

原因是页头用 space-between 排三个元素：宽度够的时候，空白被平均分成两份，按钮就悬在中间。它没有坏，只是没人管过它在中等宽度下的位置。

改法是把导航推到右端、按钮跟在导航后面，而不是让三个元素平分空白。

记下来是因为这类问题在桌面浏览器里永远发现不了——得把窗口拖到 390px 才看得见。

这一版想做"暗黑电影感"：左边一条竖导轨，章节背后放一个巨大的幽灵编号，鼠标移到作品上时旁边浮出预览。

技术上没什么新鲜的，难的是克制。加导轨的时候顺手加了滚动百分比，后来又加了章节圆点；每一样单独看都成立，堆在一起就开始抢戏。

现在的做法是让它们各自只出现一次：导轨只在桌面，幽灵编号只在章节开头，预览只给精细指针。屏幕窄一点、或者用触屏，这些东西就自动不出现。

有一版我把渐变收得太狠，整页只剩黑白灰，看起来像没做完。

这一版给每节配一个色相：关于是靛蓝，过程是紫，本站是兰紫，折腾是品红，联系是珊瑚。往下滚，颜色从冷走到暖。

关键是色只落在小面积上——章节编号、时间轴圆点、悬停竖条。正文和块面不动，否则又会变回"渐变满天飞"。

改完提亮那版，部署输出 ✨ Deployment complete!，立刻 curl 生产域，拿到的还是 ?v=17。

第一反应是部署没生效。其实是 Cloudflare 的边缘缓存：同一个 URL 会先给你一份旧的。

验证方法很简单——URL 后面加个随机参数，或者直接打开这次部署自己的 <hash>.king0flight.pages.dev。

现在每次验证线上内容都带 cache-buster，不再用裸地址判断。

小屏加上 200% 文字缩放时，主题按钮会被挤出屏幕右边。

原因是页头用了 position: fixed、高度写死 68px，装不下就把东西往外挤。

改成 sticky、回到文档流，装不下就换行长高。桌面观感没变，因为原来预留的高度和页头自身的高度正好相等。

这个问题是测试跑出来的：320px、375px、200% 缩放各来一遍，它自己就露出来了。

署名是 King0fLight，0 是数字零。

有很长一段时间，站上用的是 Georgia 斜体——那个字体里的 0 和小写 o 几乎一样，看起来就是 KingofLight。源码没错，是字体让它看起来错了。

后来把所有署名换成等宽字体（Cascadia Code / Consolas），数字 0 中间带一撇，一眼能分清。

还加了个测试，扫 public/ 下所有文件，只允许 King0fLight、king0flight、KING0FLIGHT 三种写法，别的都报错。

首屏底下那条字，左边永远露着半个单词，看着像排版断了。

它其实一直在动。做法是把整串内容复制一份接在后面，轨道宽度变成两份，动画从 0 平移到 -50%——正好走完第一份，画面和第二份的开头对齐，然后瞬间跳回原点。因为两段内容一样，眼睛看不出接缝。

两侧再叠一层渐变蒙版，被裁掉的边缘才会淡出去，而不是硬切一刀。

不用 JS，也不用测文字宽度，前提是"复制一份"这个动作得手动做对。

一开始只想确认"关掉 JS 还能不能读"，后来越加越多：320 到 1440 的布局、200% 文字缩放、键盘能不能一路 Tab 下来、图片挂了会不会塌、内部文件能不能被访问。

现在一共 31 项，跑一遍不到 40 秒。

最有用的其实只有两项：横向溢出检查，和 200% 缩放。这两个能抓到肉眼在桌面上永远看不到的问题。

写探测脚本的时候，我一边读 font-size 一边写回去。

结果子元素继承了父元素放大过的值，逐层翻倍，最后量到 font-size: 4352px、整页两万多像素宽。差点以为页面真有 bug。

正确做法是先读完全部元素的计算字号、存成数组，再统一写入。测试里现在是两段式的。

手机访问不带 www 的域名，一直看到旧博客的 404；同一网络下 www 却正常。

查了一圈：Cloudflare 的记录是对的，证书也是对的。最后是这一句问出来的——

nslookup king0flight.com ns1.huaweicloud-dns.com
            

华为云那边的旧解析区域还活着，还在回答旧 GitHub Pages 的 IP。删掉旧区域、等本地 DNS 缓存过期，就正常了。

判断口诀：公共 DNS（223.5.5.5）解析到 Cloudflare 的地址，就说明域名和服务端都没问题，问题在当前这条网络的缓存上。

部署命令原先写的是 wrangler pages deploy .，把整个项目目录发了上去——包括部署说明文档和头像源文件。

也就是说，任何人访问 /部署说明.md 都能读到账户 ID 和一堆内部记录。

后来改成只发 public/，内部文档、博客源文件、测试全部留在外面。.assetsignore 在 Pages 上不生效，想靠它排除文件是没用的。

现在每次发完都会 curl 一下那几个内部路径，确认返回的是 HTML 回退页，不是原文。