视觉稿通过不等于上线完成。真正麻烦的是主题切换后的每一个页面、每一种屏幕、每一条缓存头和每一个 404。
这次首页改版，视觉上只是“封面会动、多了亮色主题、页尾变短”。交付前实际跑过的检查，比设计稿多得多。
第一层：截图不是只看首页
产物用真实浏览器打开，分别截：
- 1440px 桌面暗色首屏
- 1440px 桌面亮色首屏
- 桌面亮色整页（首页、文章库、文章页、关于）
- 390px 手机暗色 / 亮色首屏
- 手机滚动后的封面覆盖状态
截图不是为了好看，而是为了抓三类问题：
- 层级错误：卡片文字被图片盖住、目录压住正文。
- 主题遗漏：页脚仍然是深色、亮色下对比度不足。
- 溢出：手机页面被表格或长标题撑宽。
这次就抓到过一个真实问题：精选卡的大 <a> 里嵌套了标签 <a>，浏览器提前闭合外层链接，标题和标签被甩出卡片。截图之前，HTML 结构检查先发现 a a 数量不为 0。
第二层：交互回归
用脚本实际点击，而不是只读代码：
- 搜索
WebP，按 Enter 打开第一条结果。 - 分类选“随笔”，再点一个标签，确认 URL 带
?tag=。 - 清除标签，确认 6 篇文章重新出现。
- 文章页点击代码复制，确认按钮变成
COPIED。 - 打开移动端菜单，按 Esc 关闭。
- 手机打开搜索，输入
Nginx，确认有结果。 - 点击精选卡的“阅读全文”，确认进入文章页。
这些步骤最后固定成一个可重复运行的脚本。每次改 UI 都重跑，避免“这个功能上次是好的”。
第三层：页面审计
审计脚本会用浏览器逐页检查：
- HTTP 状态是否为 200；
- 是否只有一个
<h1>； - 是否有重复
id； - 是否有图片缺少
alt； - 是否有嵌套
<a>； - 页面是否横向溢出；
- canonical、description、JSON-LD 是否存在；
- 内链与资源是否全部可达。
首页改版当时的审计结果：
- 11/11 个公开路由返回 200；
- 44/44 条内链与资源可达；
- 0 个重复 ID；
- 0 个缺失
alt； - 0 个嵌套链接；
- 0 个手机横向溢出。
第四层：线上循环自检
静态站上线后，用 selfcheck.mjs 连续请求：
- 页面、文章、CSS、JS；
- AVIF / WebP 图片；
- 搜索索引、RSS、sitemap、robots、manifest；
- 自定义 404、PHP 禁用、隐藏文件、目录列表；
- gzip、缓存头、CSP / nosniff / Referrer-Policy；
- 主题初始化脚本和亮色 CSS；
- 每轮响应时间。
这一版（首页改版时）跑了 8 轮 × 29 项 = 232 项检查，全部通过：
- 平均响应 6.9ms
- P95 13.7ms
- 最大 17ms
- 0 失败
后来加入 4 篇技术文，自检页面从 8 个扩展到 12 个，检查项变为 33 项/轮；最终数字以 reports/ 里的最新报告为准。报告同时保留 JSON 和 Markdown，失败项会写明轮次、检查名和细节。
页尾：从 594px 压到 118px
页尾原本是“logo + 三列导航 + 一行巨大的描边字 + 版权”，在 1440px 下总高约 594px。它抢走了太多视觉重量。
这次做了三件事：
- 移除巨大的描边字；
- 把三列导航改成更紧凑的内联链接；
- 页脚高度压到 118px，约为原来的 19.9%。
同时修掉一个主题问题：页脚以前被固定成深色，切到亮色后像另一个网站。现在页脚使用当前主题的背景、文字和边框，只保留黄色 logo 作为识别色。实测暗色页脚背景为 #050408，亮色为 #ebe4d6，两种主题下高度都是 118px。
性能回归
改版后重新测了冷缓存手机首屏：
- LCP 192ms
- CLS 0
- TTFB 11ms
- 首屏传输 98KB
- 首屏图片仍是
hero-960.avif（65.7KB）
CSS 从 94.8KB 原始体积压到约 16.6KB gzip，JS 约 5.7KB gzip。新视觉图位于首屏以下，使用 lazy load，不进入首屏关键路径。
Nginx 与备份
发布脚本做四件事：
- 构建
dist/； - 打包并上传；
- 部署前把当前线上站点备份到
/www/backup/site/； - 安装 Nginx 规则，
nginx -t通过后 reload。
Nginx 配置里：
- HTML：
no-cache； /assets/：一年缓存；- 预生成
.gz，gzip_static on； - PHP 请求直接 404；
.user.ini等隐藏文件不可访问。
宝塔的 .user.ini 带 immutable 属性，部署脚本显式跳过它，不对它执行 chown/chmod。这是为了避免整站权限修正到一半失败。
UI 改版清单
- 桌面 / 手机截图
- 亮色 / 暗色截图
- 主题持久化
- 封面 sticky / 滚动淡出
- 搜索、筛选、目录、复制
- 嵌套链接检查
- 横向溢出检查
- 图片 alt / 重复 id
- 内链 / 资源可达
- gzip / 缓存 / 安全头
- 8 轮线上自检
- 部署前备份
“看起来没问题”不是验收标准。可重复的检查、能回滚的备份，才是。
