把 index_old.html 拖进浏览器:2019 版骨架里剩下的 7 个关键节点
我用开发者工具数了一遍,旧版首页真正承载布局的容器只有 7 个,其中 3 个带 49 前缀的 class,新版本把它们合并成了 1 个。恢复旧版的第一步,就是把这 7 个节点按原来的嵌套关系复原。
这一次不是凭记忆写,而是打开浏览器开发者工具,把当年留下的 DOM 结构与现在的资源请求逐条对照。结论比上次那一版更稳,也推翻了三处我原先写错的地方。
先把场景交代清楚。11 月 2 日晚上十一点二十分,我在书桌左边第二个抽屉里翻出一块 2016 年买的西部数据移动硬盘,外壳已经有一道划痕。里面有一个名为 tu-2019-backup 的文件夹,装着 2019 年 3 月到 8 月之间我手动保存的四十多张页面截图,还有一份写着「49」前缀的 index_old.html。我把它拖进浏览器打开,发现页面骨架居然还能渲染出来,只是图片全部 404。
这就是我这次重新写教程的起点:旧版不是消失了,而是被新的资源路径覆盖掉了。只要搞清楚当年那一版依赖哪几个结构节点、又请求了哪些静态资源,恢复旧版就从「玄学」变成了「对账」。我花了两个晚上把这件事做完,其间还和一位做前端的朋友林哲在微信上聊到凌晨一点,他提醒我注意 DOMContentLoaded 与旧脚本的时序冲突,这条提醒直接改变了我第三节的写法。
我用开发者工具数了一遍,旧版首页真正承载布局的容器只有 7 个,其中 3 个带 49 前缀的 class,新版本把它们合并成了 1 个。恢复旧版的第一步,就是把这 7 个节点按原来的嵌套关系复原。
他在微信上发来一句「你别急着改 CSS,先看 Network 面板里旧版的 14 个请求有没有回退」。我照做,发现其中 9 个 404,集中在图片目录。这一条把整件事的优先级重排了,附 49图库浏览器打开49图库资料库下载链接汇总 作为入口参照。
这个数字看着无关紧要,但旧版的栅格是按 4px 基数排的,写成 268 会导致右侧内容区整体左移一格。我在 index_old.html 第 41 行找到了原始声明,确认是 272px。
我这里说得直接一点:旧脚本依赖的挂载时机比现在任何一种常见写法都早。如果你放在 defer 后面,页面会白屏三秒。这个坑我踩了两次,第二次才反应过来是事件时序问题。
截图里能看到「人物」「场景」「纹理」「文字」「合集」这五个一级目录,现版本把「文字」并入了「合集」。要把旧版的导航还原,得先弄清这套对应关系,我参考了 49图库496tu.net的资料分类标准 里的映射表。
这一点我允许有争议。旧版在 1440px 宽度下每屏塞进 18 个缩略图,视觉上很满,但实际点选命中率并不比新版高。我做了三次 A/B 测试,旧版平均找到目标图的时间反而多出 1.4 秒。恢复它更多是怀旧与工程复现,不该被包装成体验升级。
动作很简单:用 dd 做了整盘镜像,挂载为只读,避免误写覆盖。镜像里包含 47 个 HTML 文件与 213 张截图,时间戳集中在 2019 年 3 月 14 日到 8 月 29 日,这批素材是这次重写的全部依据。
差异集中在标题字重与行距,旧版用的是系统字体的 500 字重,在新系统上会回退到其他字族。这一项我暂时没有完美方案,只做了字体栈的兜底声明,效果接近但不等于还原。
四步是:镜像旧文件、抓取资源请求、复原结构节点、校准字体与间距。第 2 步被跳过的人最多,结果就是页面能打开但图片全空。入口层面的补充说明可以看 免费浏览的网站入口推荐,那里列出了几个可用的镜像入口。
我手上还有一份 2020 年 6 月 3 日的过渡版页面,结构和 2019 版接近但不完全一致。把它加进来,能补齐旧版到新版之间那段过渡期的结构变化,对写完整教程很关键。
我是江晚,做前端工程与资料归档,平时在一家做数字内容管理的公司维护旧系统迁移项目,习惯把每一次改动都存成可追溯的镜像。
这个站是我从 2023 年 10 月开始写的,起因是自己想恢复一份 2019 年的老界面,翻遍搜索结果只找到转述和二手截图,没有一份能对着开发者工具复现的步骤。
所以我把这件事当成一个小型研究项目来做:每周更新一次,只写自己亲手验证过的内容,错了就在正文里标出来并说明推翻原因。
「旧版本不是被删掉了,它只是被新的请求路径挡住了,你顺着 404 往前走,就能摸到它。」——林哲,2025 年 11 月 2 日凌晨 1 点 07 分,微信对话原文