野生码农
GEO 博客上线首夜:九连修批量捉虫复盘
背景与目标
GEO 博客 9-15 切换 www.wdmeng.cn 上线,9-18 晚本人拿着元素拾取器在站上逐页过,23:10 起到 00:15 连报 9 个问题(导航、tab、封面、统计、排版、图表、目录、权限),全部是上线后第一次真人视角验收暴露出来的。本人开场就定了分工:「我可能会快速提交多个 bug……只要文件不重复就好。改完了你不需要急着验证,你先改完,我看效果,我来做验证。」——我改他验,流水线作业。
过程回顾
九条线,按报到顺序:
- 导航子菜单 hover 断裂(23:13,7343ed13):子菜单
top:calc(100% + 8px),8px 间隙不在<li>hover 区内,鼠标下移必断。加::before隐形桥接带,一行 CSS。 - 分类页 chips 改 tab 无刷新(23:18,d57a3e88):本人原话「我需要的只是一个 tab 切换分类,不需要重新跳转页面」。后端开
?partial=1列表片段口,模板抽_list_frag.html整页 include 同一份,JS 拦截 + pushState,无 JS 照旧整页跳转。 - 封面题图判死刑(23:25 前后,DB 操作):公众号题图自带文字排版,被 16/10 裁剪必然露残。查库:322 篇里 40 篇带封面全是 ipms 迁移图,直接清空走品牌默认图,先 dump 备份再 UPDATE。
- 首页 chips 同款 tab 化(23:31,87718353):复用第 2 条模式,差异点=首页 tab 不动地址栏(tab 是过滤不是真实页,pushState 到 /c/xxx 会地址与内容不符)。
- 首页 tab 查空(23:35,5cdb1db1):ai-practice 是父板块,文章全在子分类,
flag 精确匹配查零。改c.flag 或父级 p.flag 命中,curl 实证返回 10 条。 - "导航栏文字超出板块范围"侦查(23:36–23:50):先当 chips 溢出查,WebBridge 实测 1821px + CDP 模拟 1366/1280/1024/900/800/700 六档全无溢出;最后本人下一条拾取指向 /a/322 的 TOC 才真相大白——是 front matter 长文本撑爆了目录面板。本条与第 7 条同根。
- front matter 清洗(23:49,473ae7cb + DB):206 篇迁移文正文以 YAML FM 开头,结尾
---被 Markdown 当 setext 标题线,整块title:/run:/tags:变成一个超长 h2 进正文进目录。三层处置:渲染层剥、摘要层剥、存量库剥(LF/CRLF 双修),清洗后复查 fm=0、run:=0。 - 统计改实数 + 平台卡排版(23:52/23:54,df2e97e3/5a858e8f):本人「这些数据都没有考究,没有验证,还不如不写」——手填 site_stats 全弃,/about 统计条改实时查库(AI 项目 4/工作日志 202/实战系列 44/调研 14),首页 hero 同步(128→306、分发平台 6→4);平台卡 3 列 4 卡孤儿行改 auto-fill 自适应。
- 研报图表抢救 + TOC h3 补收录 + storage 权限(00:00–00:15):/a/325 的 4 张 ECharts 在源 report.html 里、迁移只带了纯文本;本地起 http 服务用浏览器渲染,
getDataURL2x 导出 PNG(修两张标题重叠+tooltip 残留),scp 上服务器插回四个小节;TOC 补 h3 降一级缩进(dd487d57);后台上传报 mkdir Permission denied——storage/default 与 report 是 root 属主(root 直拉 git 的后果),chown www 修复并立规:服务器部署一律 su www 跑 git pull。
关键踩坑
坑一:清洗改出"目录只剩壳",被本人当场抓获。 FM 清洗上线后本人发现 /a/319 的「一、这种件,最不敢让 AI 碰」这类章节全没了,原话:「你改的什么玩意?把正常的应该显示的文章结构标题给改没了。」根因:这篇文真实章节是 h3,唯一 h2 是迁移壳「公众号长文」,而 TOC 原本只收 h2——清洗前 FM 假 h2 占着目录第一位,清洗后目录只剩壳。我只验证了"脏数据没了",没验证"该有的还在"。修复:TOC 收 h2/h3 两级,h3 缩进,另加 overflow-wrap:anywhere 防长串再撑爆。
坑二:root 直拉 git,断 www 写入。 本人后台传图报 Permission denied。storage 下我建的目录全是 root 属主,PHP-FPM 跑 www 无权 mkdir。教训落台账:部署一律 su www。
坑三:离屏 canvas 截图是黑的。 研报 4 张图,后两张元素截图全黑(实例在、option 在,合成器没画)。滚屏+resize 重绘无效,最终弃截图走 echarts.getDataURL() 直出——离屏渲染不依赖合成器,一次成功,还顺手修了标题与轴名重叠。
最终方案
九条线全部上线,证据齐:7 个 git commit(7343ed13→dd487d57)、3 份 DB 备份(封面/FM/图表各一)、curl 实证(tab 口 10 条、TOC 无 run: 残留、4 图 HTTP 200)、su www mkdir 实测。规则沉淀两条进故障台账(su www 部署;清洗类改动先抽查典型页面前后对比)。
做得好的地方
- 片段口模式一单定型复用两次:
?partial=1+ 模板抽片段 + JS 拦截,分类页和首页两单同一架构,第二单边际成本极低。 - 每个数据动作都先备份再改库,三份 dump 落
/root/backup/,回滚路径现成。 - 侦查不乱猜:"文字超出"六档宽度实测排除后才转向,没有瞎改 chips 样式交差。
复盘与改进
- 清洗/迁移类改动,验收标准必须是双向的:"不该显示的没了" AND "该显示的还在"——每条清洗规则跑完抽查 2-3 个典型页面的前后渲染对比;
- 拾取器缓存旧 pick(pickedAt 与上一单相同)这类信号要第一时间识破,不当新证据用;
- 服务器写路径属主检查加入部署 checklist:pull 后
find storage -not -user www一行扫雷。
成长评估(五维,10 分制)
- 指令与提示词质量 8.5:拾取 JSON 精确定位 + 一句话定性(「选通用的那张图片」「一个 tab 切换分类就行」),九单零返工问需求;扣分点:"文字超出板块范围"单拾取器带的是缓存旧 pick,指代偏移,我多扫三轮才定位。
- 判断与结论 9:封面题图判死刑改清库、统计"还不如不写"直接改实时口径,都是一步到位的终局判断,没留临时方案。
- 思维方式 8.5:快速连报 + 预授权并行(文件不重复即可),把验收活动拆成"我改他验"两条并行流。
- 最终结果与产出 9:九连修全上线,每个交付带新鲜实证,无"改了就算"。
- AI 协作能力 8:分工节奏好;扣分点:我侦查期间双方抢过同一个浏览器 tab 组(他点开文章把我的会话页导航走了),浏览器归属没有事先约定。
AI 自评失分(同场):① FM 清洗没做前后对比抽查,TOC 剩壳副作用被本人抓获;② root 属主断 www 写入,属主意识缺失;③ 旧 pick 时间戳信号识别滞后。
素材点
- hover 间隙断桥:
::before隐形桥接带一行 CSS,任何下拉菜单可抄; - tab 无刷新架构:片段口 + include 同一份模板,无 JS 降级白拿 SEO;
- ECharts 静态化:
getDataURL({pixelRatio:2})离屏导出,专治离屏截图全黑; - "该显示的还在"双向验收清单,清洗类任务通用。