整理目录前,先回答“谁在使用这份文件”。本例把两张仍在使用的截图归档,保留用途不明的旧图;交付物是可核对的移动与引用变更。
从这份小目录开始
这是教学项目。在新建的练习目录放入任意两张可公开的 PNG,分别命名为 a.png、b.png;old.png 可用 a.png 的副本。图片内容不参与本例的路径判断。
demo/
index.html
docs/start.html
shots/a.png
screenshots/b.png
tmp-shots/old.png
index.html 的完整内容:
<!doctype html><html lang="zh-CN"><meta charset="utf-8">
<title>操作入口</title><h1>操作入口</h1>
<img src="shots/a.png" alt="安装截图">
<a href="docs/start.html">配置说明</a></html>
docs/start.html 的完整内容:
<!doctype html><html lang="zh-CN"><meta charset="utf-8">
<title>配置说明</title><h1>配置说明</h1>
<img src="../screenshots/b.png" alt="配置截图">
<a href="../index.html">返回入口</a></html>
先在副本打开两页,确认图片能显示。正式站若有构建器,应读取模板、数据及样式中的引用,再修改真实源;不要把本例的手写 HTML 做法直接套到生成站。
第一条任务只要求盘点
只读 demo。列出每个文件的用途证据,找出 HTML、CSS、JS、配置和 Markdown 中的静态路径引用。
输出 inventory.csv 与 references.csv,引用表包含来源文件、字段、原值、按来源目录解析后的目标。
说明没覆盖到的动态拼接路径、CSS url()、srcset、运行时配置;“没搜到”只记未发现引用,不记可删除。
先不要移动文件。为仍在使用的截图提出旧路径→新路径及每个引用的新值。
这个样本应形成两条图片引用:
| 来源 | 原值 | 实际目标 | 移动后原位置应写 |
|---|---|---|---|
| index.html / img.src | shots/a.png | shots/a.png | assets/screens/install.png |
| docs/start.html / img.src | ../screenshots/b.png | screenshots/b.png | ../assets/screens/config.png |
同一个目标,来自不同层级页面的相对路径可能不同。不能把所有匹配文本替换成同一个字符串。正式站的 /assets/... 是站点根路径,部署在子路径时还要核对 base URL。
用映射明确移动范围
old,new
shots/a.png,assets/screens/install.png
screenshots/b.png,assets/screens/config.png
tmp-shots/old.png 留在原处,记录“本次两页中未发现引用,外部使用情况未知”。它不进入移动表,也不进入删除表。
在 demo 副本执行上面两条映射。先检查源存在、目标不存在、大小写折叠后不冲突。
记录移动前 SHA-256,备份 index.html 与 docs/start.html 到本次独立备份目录。
移动两张图片并只改两处 img.src;保留其他页面内容和旧图。
输出 migration.json:每条 old/new、前后哈希、修改引用及备份位置。
若任何目标冲突,停止这一批,不覆盖;不要顺带改页面名称。
预期是两张图片位置变更、两处 img.src 变更,页面互链不变。用浏览器重新加载两页,核查图片请求及 alt 对应的实际图片;数量和哈希一致只能证明文件未丢、字节未改,不能替代页面检查。
恢复不等于盲目覆盖备份
读取 migration.json,先确认新路径文件哈希仍等于本批移动后值、旧路径仍为空,再反向移回并恢复两份 HTML。若后来有人修改过图片或页面,应先列差异,不能拿旧备份覆盖后来工作。
样本通过后,把真实项目按目录分批。跨仓库引用、数据库路径、CMS 内容不在本地静态扫描里,需要另列范围。统一文件名称时,继续看批量重命名与循环冲突。
下一步
继续阅读与你当前问题相关的教程:


