项目记录：给组件示例做一份本地可用的离线速查

起因

出差路上网络不稳，想查一个组件的最小结构却打不开在线示例。在线示例本身没问题，只是我把它当成了唯一的查阅入口。于是做了一份能离线打开的本地速查。

素材来自 Bootstrap 组件实验室：示例可交互、代码块可一键复制，取下来很干净。

做法

第一步：只选十个高频组件。 不追求覆盖官方全部组件，先把日常真会用的收进来。第一次做时贪多，抄了二十多个，结果文件很大、没人翻。

第二步：每个组件只留最小结构。 去掉演示用的填充文本、修饰类和装饰图片，只保留能跑起来的骨架，旁边配一行“为什么这几个类不能省”。

第三步：把外部依赖本地化。 在线示例通常走 CDN，离线就会失效。我把关键样式与脚本存到本地目录，页面全部改成相对路径，并写了一个检查脚本，逐个确认资源文件存在。

第四步：生成索引页。 按组件名排一个纯静态目录，点开即到，不依赖任何构建。静态页面的组织方式可以参考 HTML 入门教程站讲的纯静态生成与 sitemap 实践，思路完全一致：内容固定、加载快、不依赖后端。

踩到的两个坑

代码块被当作正文渲染。 复制下来的片段里带了 Markdown 围栏之外的空白字符，贴进页面时格式错位。后来统一用固定表头（组件名 / 最小结构 / 常见坑 / 原示例链接）重新生成，格式问题消失。

版本标记漏了。 离线副本最容易过期，却看不出来。现在每页顶部固定写一行“取于哪个版本、抓取日期、原示例地址”。三个信息缺一不可，否则半年后没人敢用。

补基础概念时我会翻 前端 Wiki 的 CSS 框架章节，离线速查里只放结论，不放教程。

结果与复盘

这份速查不到一屏就能找到目标，路上用起来比在线站还快。更重要的收获是：留了原示例链接之后，维护压力很小——本地副本负责“快”，原站负责“准”，职责分开就不会纠结要不要同步全部内容。

工具的价值常常不在功能多，而在离线也能用、过期能看出来。这两点做好，一份十几页的静态文件就够用了。