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

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

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

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

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

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

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

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

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

这话是对的。首页有入场幕、一间能拖的 3D 小屋、钉住的横向画廊；而文章页连个目录都没有，标题点不了，读完长文只能一路滚回顶部。皮和里子不在一个水平线上。

于是有了从 v32 到 v41 的十轮改造。这篇按层记下每一步学到了什么——比「改了什么」更重要的是「什么被测试网住了」。

#先把底色点亮

第一刀砍向「单调」。整页从上到下共用一块深底，其实每节早就配了自己的色相——靛蓝一路走到珊瑚——但那层环境光只有 27% 的透明度，几乎看不见。

把它点亮：每节两团光，位置交错、相位相反，四五十秒漂移一圈。滚动的时候像穿过一片一片的光。

然后掉帧了。无头浏览器里整站的动画卡成幻灯片，连不相干的跑马灯都卡。查下来是漂移动画里写了 scale：模糊是静态栅格，平移是整帧搬纹理，很便宜；缩放却会改变模糊的视觉半径，浏览器只好每帧重算那 64px 的高斯模糊。删掉 scale，光斑多大就把元素做多大，动画只留平移。

这件事让我确立了一条规矩：动画只动 transform，而且别碰带 filter 的东西。

#Ctrl+K：把全站装进一个输入框

第二层是导航。页面上有七个入口，博客里四篇文章、笔记里十几条，全靠翻。

现在全站任何页面按 Ctrl+K，一个输入框从顶部落下来：页面、作品、文章、笔记，加「切主题」「回顶部」两个动作，敲几个字回车就到。

有意思的是数据怎么来。生成文章的脚本顺手产出一个三 KB 的 JSON 索引，面板第一次打开才去取，之后走浏览器缓存——平时零开销。按钮和面板全部由脚本创建，没有脚本的浏览器里它们压根不出现，不留假开关。

#断网也能读

第三层是 Service Worker。策略分三种：页面「网络优先」，在线永远最新，断网回落缓存；带版本号的静态资源「缓存优先」，换版本即换键；索引和订阅源「先给缓存、后台更新」。预缓存只装骨架，文章访问到才进缓存——读过的都能离线看。

这层埋了一个我到现在都后怕的坑：网络优先的分支起初没检查响应状态码，服务器的 404 会被当成「最新版本」写进缓存。也就是说，一个不存在的页面，断网时会永远看到它。现在 404 原样透传，只有真正的网络失败才走兜底。

#质感是成批来的

后面的几轮开始成批处理：画廊卡片换上色相环描边和指针倾斜；RSS 带上全文，订阅器里直接读完；顺着分享链接落到某一节时，那节闪一下告诉你「就是这」；文章可以打印成 PDF，外链把地址印在纸面上；最长的笔记列表页加了页内索引，视口外的条目干脆跳过渲染。

这一批的共性是每一件都很小，但都在真实的使用场景里：分享出去的人、打印的人、用订阅器的人、滚到底想回头的人。

#测试是安全网

十轮下来，验收测试从 129 条涨到 181 条。比数量更重要的是它们抓到过的东西：

自动摘要里出现一个 \1，裸插进结构化数据，整个 JSON 块静默失效——生成一篇新笔记的当晚就被老测试拦下。浅色系统的访客首访被强塞深色主题，三行内联脚本之外还有一行启动逻辑会把系统跟随强行拍回深色——也是测试先说的。

这些错有一个共同点：肉眼看不出来。href="" 是合法的空字符串，浅色主题在别人电脑上，而我这边永远是深色。

两个教训写进了脚本注释。一是动画里 scale 和 blur 别放一起；二是正则替换串里的组引用会过好几道转义，一道错了就静默丢掉——后来一律改用回调函数拼，没有可丢的地方。

#还开着的事

评论和访问统计还在等账号侧的配置，入口都留好了。

比这更难的其实是内容。皮有 181 条测试守着，改坏了会红；内容没有测试，只有自己守着自己——写一篇是一篇，每篇都得值得别人花时间。

这个站到今天 40 多个版本。下一步大概还是老样子：看到一个问题，记下来，修掉，写一篇笔记。

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

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

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

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

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

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

npx wrangler pages deploy .

（这条命令出自 Cloudflare Pages 的直传部署。）

. 代表当前目录。命令跑完，网站正常打开，我也就没再看它。

#问题是怎么暴露的

后来发现：整个项目目录都被传上去了。也就是说，下面这些地址在公网上可以直接打开：

https://king0flight.com/部署说明.md
https://king0flight.com/avatar.png

部署说明里有 Cloudflare 账户 ID、DNS 记录、凭据文件的位置。虽然里面没有密码，但把这些东西挂在公网上，无论如何都不该发生。

#为什么 .assetsignore 没用

最容易想到的办法是加一个 .assetsignore，把内部文件排除掉。

它不生效。.assetsignore 是 Workers 静态资源那一套的机制，Cloudflare Pages 不读它。对 Pages 来说，你传上去什么，它就发什么。

#改法：改成白名单，而不是黑名单

真正管用的做法是把结构改掉：

personal-website/
├── public/          ← 只发这个目录
│   ├── index.html
│   ├── css/
│   ├── js/
│   └── ...
├── blog/            ← 博客源文件，不发布
├── tools/           ← 生成脚本，不发布
├── tests/           ← 测试，不发布
└── 部署说明.md       ← 内部文档，不发布

部署命令随之变成：

npx wrangler pages deploy public --project-name king0flight --branch main

黑名单的思路是"我记得排除哪些"，白名单的思路是"只有这些能出去"。前者会漏，后者不会。

#怎么验证

改完不能只看首页能不能打开，要专门请求那几个内部路径，检查两件事：

• 状态码和 Content-Type：内部文档现在返回的是站点的 HTML 回退页（text/html），不是 text/markdown
• 正文里搜关键词：账户 ID、凭据路径这些字符串一处都不该出现

这一步现在成了固定动作：每次发布后 curl 一遍内部路径。看起来有点多余，但它只需十秒。

#一个遗留问题

已经发出去的资源会被 Cloudflare 边缘缓存，非 HTML 资源的默认缓存是七天。所以在切换后的短时间内，裸域上那两个地址还可能返回旧内容；www 和 pages.dev 域是即时干净的。

急不来，等它过期。

#留下的习惯

发布目录永远显式写出来，不用 .。多打十几个字符，换掉一整类事故。

手机访问 king0flight.com，看到的是 GitHub Pages 的 404：

There isn't a GitHub Pages site here.

同一台手机、同一个网络，访问 www.king0flight.com 却是新站。电脑上也正常。

第一反应是"域名解析还没生效"。但域名迁移已经过去一段时间了。

#先排除掉的可能性

按顺序查了一遍：

• Cloudflare 的 DNS 记录：@ 和 www 都正确 CNAME 到 king0flight.pages.dev，开了代理
• 自定义域状态：两个域名都是 active，证书已签发
• 页面内容：直接用 IP 和 pages.dev 地址取，都是新站
• 移动端 UA：服务端没有做任何 UA 判断
• HTTP 到 HTTPS 跳转：正常

服务端看起来没有问题。那就说明，手机拿到的地址就不对。

#关键的一条命令

正常查解析是这样：

nslookup king0flight.com 223.5.5.5

返回的是 Cloudflare 的地址，正确。

但真正说明问题的是这一条——直接去问华为云的域名服务器：

nslookup king0flight.com ns1.huaweicloud-dns.com

返回的是：

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

这是 GitHub Pages 的四个 IP。

也就是说：域名已经托管到 Cloudflare，但华为云那边还有一个没删掉的旧解析区域，依然在对外回答，而且回答的是迁移之前的内容。谁问它，它就给旧地址。

#为什么只有部分设备中招

两层原因叠在一起：

1. 旧区域还在（主因）：华为云的云解析里那个 king0flight.com 没有删除
2. NS 委派有缓存：改 NS 之后，各级解析器对委派关系的缓存最长 48 小时。这段时间里，一部分网络仍然会去问华为云

所以会出现"同一个域名，不同网络看到不同网站"这种看起来很不讲理的现象。

#处理

• 在华为云删掉旧区域。删完再查 nslookup ... ns1.huaweicloud-dns.com，返回变成 Query refused，说明它不再乱答了
• 本地或运营商 DNS 缓存：换 DNS（223.5.5.5 / 1.1.1.1）、换网络，或者等它过期
• 清浏览器缓存、开无痕模式没有用——这是 DNS 层的问题，不是浏览器的问题

#一条判断口诀

用公共 DNS 查，返回 Cloudflare 的地址，就说明域名和服务端都没问题；这时候所有异常都出在"当前这条网络的缓存"上。

这句话后来省了我很多时间。以前遇到"网站打不开"，我会从服务器一路查到代码；现在先分清是"服务端答错了"还是"有人替它答了"。

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

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

导航在小屏上被挤出去、图片没了页面塌掉、浅色主题下某个字看不见——这些问题都有一个共同点：在桌面浏览器里，用鼠标，正常字号，永远看不到。

所以我开始写测试。不是单元测试，是拿一个无头浏览器把页面打开，量它。

#工具

• pytest 组织用例
• playwright 开一个独立的无头 Chromium，不碰我日常用的浏览器
• 测试自己起一个 http.server，指向 public/，不访问线上

一条命令跑完：

pytest tests/ -q

#最有用的几项

横向溢出检查。遍历页面上所有可见元素，只要有一个伸出视口右边，就失败。装饰性的巨型描边字和跑马灯轨道会故意溢出，所以它们都标了 aria-hidden，检查时跳过。

200% 文字缩放。把所有元素的计算字号翻倍，再跑一遍溢出检查。WCAG 要求页面在 200% 缩放下仍然可用，这一项抓到的都是真问题。

关掉脚本。java_script_enabled=False 打开页面，断言正文、导航、展开说明都还在。渐进增强不是口号，关掉 JS 一眼就知道有没有做到。

图片加载失败。把所有图片请求中断，看布局会不会塌。

署名拼写。扫 public/ 下所有 HTML/CSS/JS，只允许 King0fLight、king0flight、KING0FLIGHT 三种写法。这条是因为 0 和 o 长得太像，被指出过两次。

内部文件不可访问。直接请求部署说明、博客源文件、测试文件，必须 404。

#两个测量上的坑

一、量 200% 缩放时不能边读边写。

我第一版是遍历元素，读到字号就乘二写回去。结果子元素继承了父元素放大后的值，逐层翻倍，最后量到 font-size: 4352px、整页两万多像素宽，差点以为页面真的坏了。

正确做法是两段式：先把所有元素的计算字号读进数组，再统一写入。

二、别把 Cloudflare 的 308 当成内容丢失。

Pages 会把 /*.html 重定向到去掉后缀的地址。用 curl 验证线上内容时如果不加 -L，拿到的是空响应体，很容易误判成"页面内容丢了"。测试里不涉及这一点，但线上排查时踩过一次。

#它到底拦住了什么

• 页头 fixed 加固定高度，在 320px + 200% 缩放下把主题按钮挤出屏幕——改成 sticky 后解决
• 首页标题的句点跑到了"光王"前面（遍历活的 childNodes、边删边加的经典错误）——这个不是测试抓到的，是自己看截图看出来的，也说明自动检查覆盖不到所有东西
• 新增页面忘了同步 ?v= 版本号——资源版本号是测试里写死的常量，忘了就红

#最后

31 项，40 秒。覆盖率谈不上，但它给了我一件事：改完敢按发布。

对一个一直在改的个人网站来说，这比多写几个功能重要。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#为什么要有这一页

首页介绍了我是谁。这一页不一样——它会一直往下长。

我打算把那些不值得单独发一篇、但也不想忘掉的东西放在这里：踩过的坑、试出来的办法、正在做的小东西。

#会写什么

大概是这几类：

• 做东西的过程，和中间遇到的问题
• 学会了、想记住的知识点
• 偶尔的胡思乱想

#现在有什么

说实话，现在几乎什么都还没有。这一页也是刚开。

但总得有个开头。第一件要写的事，就是这个网站本身——它是怎么从一张空白页，变成你现在看到的样子。

那篇会放在后面，等我整理好。

这一页由 blog/posts/ 下的 Markdown 文件生成，写 .md 就能发布下一篇文章。

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

nslookup king0flight.com ns1.huaweicloud-dns.com

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

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

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

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

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