从第一版
改到现在.

无障碍扫描过关

• axe-core（几百条无障碍规则）进了测试库，九类页面全量扫描：serious 与 critical 级违规为零。187 条手写断言之外，从此多一层机器全量把关。
• 唯一的报告是首页反色横幅的「1.37:1」——追进去发现是逐词点亮动画的起始透明度（0.15），滚到位后是 15:1 的完美值。扫描前把终态抬到 1，属于「扫的是动画中间态」的假阳性，测试注释里写清了缘由。
• 初稿把 opacity 当成了颜色问题，禁了动画还报——所以那条测试的注释比测试本身还长。

浅色巡检抓出过期文案

• 全站浅色主题逐页截图巡检（7 类页面）：光场、命令面板、索引卡、缓动工具、片尾跑马灯在浅色下都干净——v41 之后的十来个新组件没有漏配浅色样式的。
• 唯一的收获在 404 页：文案还写着「改过二十多版」「从第 1 版到第 23 版」——已经 48 版了。改成不带数字的写法，以后不会再过期。
• 大标题补了 text-wrap：折行时不再留孤字，不支持的浏览器自动忽略。

给自己上了版本控制

• 坦白：这个站改到 47 版，源代码一直不在版本控制里——45 个版本的历史只活在部署说明和备份文件夹里。现在项目进了 git，第一步基线提交，往后每一步改坏了都有得退。
• 顺手加了一道性能预算测试：首页传输超过 270KB 就红。这个站的承诺是「没有框架，也没有构建步骤」，体积悄悄涨上去等于违背承诺——现在有测试守着了。

回访不用再等

• 带版本号的资源（css/js、每篇的分享卡、图标、头像）现在盖了「一年、不可变」的缓存：内容变了 URL 就变，所以存一年也绝对新鲜。回访时浏览器直接用本地副本，连 304 验证都省掉——第二次进站几乎是即时开画。
• 数据文件（订阅源、站点地图、搜索索引）反过来只给五分钟短缓存，让它们常回头更新。
• 此前所有资源只有四小时缓存加每次重新验证——对换了十几版 ?v= 的站来说，这套机制一直在白跑。

体检：数字说话

• 十三轮改造后做了一次全面体检。结论先说：卫生良好——341 个 CSS 类名逐个与全站 HTML/JS 语料比对，死代码只有 3 小块（约 0.5KB）：墨线替代掉的旧进度条填充、一处没人用的文件树注释样式、一条旧章节变体。已删。
• 页面加载已是最优结构：首页只加载 1 个 CSS + 2 个 JS + 1 张头像，总传输 245KB（无框架手写站的合理体重）；avatar 已是优化过的渐进 JPEG，不再动。
• 测试套件提速：装了 pytest-xdist，4 路并行从 6 分半压到 1 分 50 秒——日常改一行等两分钟就见效；动画类断言在多浏览器同跑时偶有竞争 flake，发布验收仍以串行全套为准。

实验室住进第二个计算器

• 实验室添了缓动曲线工具：这个站所有动画共用一条 cubic-bezier(0.16,1,0.3,1)——快出缓停。改四个数就能试别的手感，两枚点同时出发赛跑：空心走线性，实心走你调的曲线，差距就是「手感」本身。牛顿迭代从贝塞尔求值，全在浏览器里算。
• 站点加了一组安全响应头（nosniff、DENY、Referrer-Policy、Permissions-Policy、HSTS、COOP）——Cloudflare Pages 的 _headers 文件随站部署，不需要账号侧操作。CSP 暂不加：内联主题脚本依赖 unsafe-inline，加了形同虚设。
• PWA 身份显式化：manifest 补 id 字段。

每篇内容有了自己的分享卡

• 此前把任何一篇文章分享到社交平台，卡片都是首页那张图。现在 20 篇内容各有各的卡：深底网格、一团光场（文章靛蓝、笔记品红，卡片上能看出类型）、标题自动折行、紧凑日期和域名落款。生成脚本顺手渲染，写新内容零额外动作。
• 文件名带类型前缀（post-*/note-*）——博客和笔记有同名 slug，不加前缀会互相覆盖，第一版就踩了。
• 日期用紧凑格式：Consolas 画不了「年月日」三个汉字，先成了豆腐块。

十轮改造写成了一篇长文

• 这版动了内容：把 v32 到 v41 的十轮改造复盘成一篇长文《十轮改造，把手写站从「炫」做到「顺」》——每层的取舍、掉帧的教训、被测试网住的坑，站史里只有碎片，长文里串成了完整的叙述。
• 文章 4 篇变 5 篇；目录、锚点、打印样式、全文订阅自动跟上——正好把这十轮做的东西全用了一遍。

头一回来做客也能挑主题

• 此前首访一律深色——浅色系统的访客被强塞了深色。现在没存过偏好的新访客跟随系统的 prefers-color-scheme 进场；存过偏好的老访客照旧以浏览器本地为准。
• 开关的按压状态（aria-pressed）在进页时就对齐当前主题——此前浅色访客看到的状态是反的。
• 断网撞上没缓存过的页面时，那张离线说明页换上了站的皮肤：两团光场、粉色句点、一行域名——不再是素面的一块黑。
• 博客列表卡片补上阅读时长：日期旁边就是「约 N 字 · 阅读约 M 分钟」。

把踩过的坑记成笔记

• 这版没有动代码，动了内容：把近几轮改造里真踩过的三个坑写成笔记——动画里 scale 会让 blur 每帧重算（无头测试先于肉眼发现的掉帧）、正则组引用在转义里静默丢成空串（feed 直接不合法）、grep 数出来的可能是注释（门闩缺了五页没暴露）。
• 都是这几天真发生的事：现象、原因、改法，按笔记子系统的老规矩记。索引卡、搜索、RSS、首页「最近的笔记」全部自动跟上。

分享卡片也换新了

• 16 篇内容此前一个参考链接都没有——正文里明明点名了 pytest、Playwright、Cloudflare、WCAG。给 4 篇文章和 1 条笔记的名词首次出现处补上了权威出处（6 条），只挂链接不改叙述。
• 生成器加了外链策略：站外链接统一新标签打开并带 noopener，站内锚点不受影响；全文 RSS 同步吃到。
• 分享到社交平台的卡片图换新：还是那张「光王.」，但标语换成现在的定位，底色从纯黑换成网格加三团光场——和站点现在的样子对上了。v1 的旧图还是 10 月 2 日的文案。
• 装到桌面后长按图标直达三处：博客、笔记、实验室（manifest shortcuts）。

长列表读起来更顺

• 笔记列表是全站最长的页（12 条全文排下来）：正文前多了一张「按标题跳」的索引卡，点了直达某条，落地时闪一下（v37 的 :target 高亮管到它了）；跳过的路径是纯页内锚点，没脚本也成立。
• 视口外的条目不再白画：content-visibility: auto 让浏览器跳过屏幕外的笔记渲染，滚到哪儿画到哪儿——这页越长省得越多。

分享的落地、纸面的去处

• 顺着别人分享的 #链接落到某一节时，那一节会闪一下底色告诉你「就是这」——纯 CSS 的 :target 一条规则管全站，减少动效时安静。
• 页面之间切换不再是生硬的白闪：跨文档 View Transitions 渐变（Chrome 126+ 生效，其余浏览器无感跳过，减少动效关闭）。
• 文章有了打印样式：想存成 PDF 时，固定的装饰、导航、评论区全部退场，变量层面直接换成纸色白底黑字，正文里的外链会把地址印在后面，代码块不跨页断开。
• 浏览器标签页的图标终于不是那张 JPEG 了——全站 favicon 换成 192 的 PNG，路径统一成绝对。

订阅器里读全文

• RSS 现在带全文：每条 item 多了 content:encoded，装着和网页一样的正文（连同小节锚点）。在订阅器里就能读完，不用再点开网页——但点开时锚点是对得上的。
• 博客、笔记、站史三个列表页也有了「回到顶部」：笔记页把 12 条全文排下来、站史 27 条，一路滚到底想回头，右下角那枚 ↑ 就派上用场了。退路照旧：没脚本就隐身。
• 安装图标瘦身：512 那张从 237KB 压到 82KB（调色板量化，卡通图肉眼无差），离线包整体轻了一截。
• 顺手把生成器里的标题装饰改成只做一次（页面、目录、订阅器共用同一份），feed 从此跟着页面同源。

卡片开始有质感

• 「折腾」横向画廊的四张卡片换了做法：悬停时一张靛蓝-紫-粉的色相环渐变描边亮起来，卡片随指针微微倾转，封面里的画往指针反方向挪、略略放大——框稳住，画面有纵深。
• 全部走合成层：JS 只写 --tx/--ty 两个变量，角度与位移都由 CSS 用变量算，指针再快也不重绘；描边环是静态渐变，不随指针转、不做旋转动画（v32 的 scale+blur 教训记着）。
• 封面视差与既有的悬停放大合并成一条 transform，互相不再覆盖；露出画框的部分被框裁掉。
• 退路：触屏和减少动效下不启动倾斜，描边安静亮着；没脚本时变量恒为 0，是一张静态卡。

断网也能读

• 这个站现在可以装了：地址栏会出现「安装」，装完像 App 一样从桌面/主屏打开，没有浏览器那圈壳。命令面板里搜「装」也能触发安装。
• 读过的东西离线都在：Service Worker 对页面用「网络优先」——在线永远最新，断网回落缓存；带版本号的 css/js 和图片「缓存优先」；文章和笔记访问到才进缓存，不强塞。
• 预缓存只装骨架：首页、各列表页、全站 css/js、图标和搜索索引；断网撞上没读过的页面时，给一张内置的离线说明页。
• 退路照旧：不支持 SW 或注册失败的浏览器一切照常，站点不感知它的存在。

按 Ctrl K，翻遍全站

• 全站每个页头都多了一枚「搜索」按钮，按 Ctrl+K（Mac 是 ⌘K）或者点它，一个搜索框从页面顶部落下来：六个页面、三个作品、四篇文章、十二条笔记，加「切主题」「回顶部」两个动作，敲几个字回车就到。
• 索引是生成脚本顺手产出的 search-index.json（25 条，3 KB 上下），第一次打开面板才去取，之后走浏览器缓存，平时零开销。
• 键盘走完全程：↑↓ 选择、Enter 打开、Esc 关闭、Tab 被圈在面板里；搜「主题」回车直接换明暗。窄屏上按钮缩成一枚放大镜。
• 没有脚本时按钮和面板压根不出现——按钮也是 JS 建的，不留假开关。

整站开始有光

• 主人说页面看着还是单调——病根是从头到尾所有章节共用同一块深底色。其实每一节早就配了自己的色相（靛蓝一路走到珊瑚），但光晕只有 27% 透明度，几乎看不出来。这版把它点亮：每节两团环境光，位置交错、相位相反，各自以四五十秒的周期缓慢漂移，滚动像穿过一片一片的光。
• 光只动 transform（合成层），模糊是静态栅格，动画不吃重绘；开着「减少动效」时光还在但不动；浅色主题下整层按六折出光，免得白底上发脏。
• 画廊和联系区之间垫了一条描边空心大字的反向跑马灯：一步一步来 / KEEP GOING / 不着急……衬线空心字配紫色小菱形，没脚本时静止显示。
• 博客、笔记、站史、工具、实验室这些子页的页头也加了一团同语言的紫晕——全站子页共用 .blog-main，一处 CSS 全都吃到。

把读长文这件事理顺

• 文章里的小节标题有了自己的锚点：悬停标题浮出一枚 #，点它就跳到这一节，同时把带锚点的完整链接复制走，方便把别人直接送到那一段。锚点是生成时就写进 HTML 的普通链接，没有脚本也照样能点。
• 超过三节的长文开头多了一张「目录」，列出每一节；宽屏（1240px 往上）时它升级成正文右侧常驻的一栏，滚动到哪一节，哪一节就亮起来。窄屏收成一张可点开的卡片。
• 文章和笔记的日期旁边现在写着字数和预计阅读时间（笔记页此前没有）；滚过一屏后右下角浮出一枚「回到顶部」，点一下就回开头。
• 退路照旧：关掉脚本，目录整张展开、锚点照点、返回顶部安静隐身（html[data-js] 门闩）；目录的展开收起由脚本按屏宽管理，没脚本时默认展开。

这次学的是它们的招牌动作

• 开页先是一道幕：整幅纸幕铺满屏，中间一根手绘墨线从上往下画出来，外面套一圈慢慢转的虚线环数百分比，数到 100 幕就整幅掀上去（学 itomdev 的入场）。开着「减少动效」时这道幕压根不出现；万一脚本没跑起来，CSS 里留了 2.6 秒的保险，幕自己会让路；幕布全程不吃点击，挡不住任何链接。
• 小屋和过程之间插了一整屏「幕间」：衬线大字先虚着，滚到位再从模糊聚焦成实的，背后压一行 280px 的描边 KING0FLIGHT（学 i.ccrui.cn 的巨字招牌和 lonely.land 的整屏排字）。
• 幕间那层星尘是浏览器现场算的：五十来个点自己漂，离得近就连线，鼠标过去会被推开（学 147227.xyz 和 yucihent.me 的生成式画布）。不是图片，也不是循环动画，每一帧都在重算。
• 「折腾」从竖排列表改成钉住的横向画廊：宽屏往下滚，画面钉在原地往右走，右下角报 01 / 04 和一条进度线（学 lonely.land 和 itomdev 的 hscroll）。窄屏、减少动效、没脚本三种情况都自动退回竖排卡片，内容一个不少。
• 画廊最后补了一块「站里还有五处可以逛」，把博客、笔记、站史、工具、实验室一起收在横滚的终点。

把六个站的巧劲收进来

• 连着看了六个个人站，一人借一手：屏幕四角多了取景框、主视觉角落跑一条 REC 时间码（数的是你在这页停了多久，滚出首屏就停表，学 i.ccrui.cn）。
• 「关于本站」多了一条现场体检：传输体积、请求数、DOM 节点数都由 Performance API 当场算，不写死数字，每次打开都不太一样（学 147227.xyz）。
• 联系区改成片尾字幕：过去 / 现在 / 未来三行，左边标签右边一句话，中间一条点线连着；作品封面悬停时有一道光扫过去（学 lonely.land）。
• 左侧导轨从进度条换成一根手绘墨线，随滚动一点点画出来，百分比外面套一圈慢慢转的虚线（学 itomdev）；小屋那节铺了极淡的涂鸦底纹（学 old-i.ccrui.cn）。
• 工具页开头新增一面贴纸墙：九张贴纸都是这个站真在用的东西，可以关掉飘动，选择记在浏览器本地（学 yucihent.me）。

网站变成一间屋

• 看到有人把个人站建成可以走的我的世界（terryhu.cn），借了它「网站是一间屋子」的念头：新增 02 小屋节，三十三个纯 CSS 立方体拼出一间屋，拖着能绕一圈看。
• 昼夜四段：窗里的天色、台灯和地上那池光按访客本地时间换（清晨 / 白天 / 傍晚 / 夜里），不拉任何接口。
• 点屏幕去博客、点黑板翻站史、点信箱到联系；舞台下的图例给键盘和读屏留同一条路。
• 章节重编号：小屋插成 02，其余顺延；导航、左导轨和页脚都加了「小屋」。顺手修了 --radius-lg 一直没定义的旧账。

把大企业官网的手法搬回来

• 首页页脚从一排链接改成三栏结构（章节 / 内容 / 别处）加一段自述，学的是微软、三星这类官网的分栏页脚。
• 子页页脚也加一行快速导航：首页 / 博客 / 笔记 / 站史，全站页脚统一语言。
• 主视觉下多了一枚胶囊标签「个人网站 · 一行行手写」，位置学微软首页标题上方那枚 New 徽标。
• 那句话的横幅改成整块反色：底色换成墨色、文字换成纸色，深浅主题各自反转，参考 Apple 首页深浅交替的整屏色块。

全站一个质感

• 胶片颗粒铺到所有页面：站史、工具、实验室、404、三个作品页、以及博客和笔记的全部生成页。
• 折腾区套用与过程区同一套 sticky 双栏：左标题钉住，右栏作品列表滚过去。
• 作品封面悬停时里面的画轻微放大，行内正文链接改点线下划线——都是安静的小动作。
• sticky 双栏的类名由 .proc 统一改名为 .duo，过程区与折腾区共用一套规则与测试。

向优秀的前辈站借结构

• 过程区改 sticky 双栏：左边标题钉住，右边步骤回到纵向时间线，进度线竖着随滚动画下来。
• 新增插句带：「慢一点，稳一点，久一点。」三个词随滚动逐个点亮，用 CSS 滚动驱动动画写成，不支持的浏览器就是普通大字。
• 全站加一层极淡的胶片颗粒，章节幽灵编号带滚动视差，复制邮箱按钮也带磁吸。
• 新动效全部可降级：减少动效或无脚本时插句是静态大字，颗粒层不参与交互。

把数字摆进格子里

走错路也有个落脚处

多三个房间，浅色重算一遍

短笔记和长文章分成两条线

暗黑电影感

继续提亮

每节一个色相

首页改版，文案不再空泛

页头不该是 fixed

一天做完四件看得见的升级

补上被忽略的基础包

整体改版，并加上博客

一条命令把内部文档发上了公网

第一次视觉升级

建站