文章目录
- DevDocs:一个网页搞定所有 API 文档查询
- 1、 这玩意儿是干嘛的
- 2、 为什么要用它
- 3、 它是怎么做到的
- 4、 怎么用
- 5、 一些快捷键
- 6、 适合谁用
DevDocs:一个网页搞定所有 API 文档查询
devdocs 在 GitHub 上已经拿到 39,116 Star 了。
freeCodeCamp 维护的这个开源项目,做了一件事:把几十种开发者的 API 文档聚合到一个干净的网页里。搜索快,支持离线,有暗色主题,键盘快捷键也齐全。
1、 这玩意儿是干嘛的
一句话:查 API 文档,不用再到处翻官网了。
开发者平时写代码,最常干的事就是查文档。React 的文档在 react.dev,Python 的在 docs.python.org,Ruby 的在 ruby-doc.org,Vue 的又在另一个地方。每个框架、每个库都有自己的文档站,URL 记不住,排版风格各异,搜索体验参差不齐。
DevDocs 把这些全收拢到一起。打开一个网页,左边选文档集,右边看内容,搜索框里打几个字就能定位到具体的 API。
2、 为什么要用它
用过官方文档站的人都知道那种体验:React 的搜索挺好,但有些库的文档站连搜索都没有,只能靠 Google。不同文档站的排版差距也大,有的字号小得要命,有的代码块没有语法高亮,有的连个目录都没有。
DevDocs 统一了这些。所有文档进来之后,排版一致,搜索响应控制在毫秒级,代码块都有高亮。它用 localStorage 和 Service Worker 做缓存,第一次加载之后,后续打开基本秒开。
离线模式也实用。开启之后,选好的文档集会下载到本地,断网也能查。在飞机上、高铁上、网络不稳定的工位上,这个功能的价值就出来了。
3、 它是怎么做到的
DevDocs 分两部分:一个 Ruby 写的爬虫,一个 JavaScript 写的前端。
爬虫负责从各个官方文档站抓取内容,做一轮清洗:去掉原始页面里的脚本、样式、导航栏,只保留文档正文和元数据。处理完的结果是标准化的 HTML 片段和 JSON 索引文件。
前端是一个单页应用,靠 XHR 加载内容。因为文档已经被爬虫标准化过了,前端只需要处理渲染和搜索。搜索算法不复杂,但在十万级的字符串里也能保持快速响应。
4、 怎么用
最简单的方式:直接访问 devdocs.io。网页版开箱即用,不需要装任何东西。
想自己部署,用 Docker 一行命令:
docker run --name devdocs -d -p 9292:9292 ghcr.io/freecodecamp/devdocs:latest跑起来之后访问 localhost:9292 就行。
本地安装的话,需要 Ruby 4.0.5 和一个 JavaScript 运行时。装好依赖,下载文档,启动服务:
gem install bundler bundle install bundle exec thor docs:download --default bundle exec rackup文档的管理用 thor 命令。thor docs:list看所有可用文档,thor docs:download html css下载指定的,thor docs:download --installed更新已安装的。
5、 一些快捷键
DevDocs 在键盘操作上花了心思。按/或Ctrl + K直接聚焦搜索框,方向键浏览搜索结果,回车打开,退格返回上一页。Shift + S切换侧边栏,A打开文档集列表,Esc关闭弹窗。
这些快捷键设计得不复杂,但用熟之后查文档的速度会快很多。
6、 适合谁用
日常写代码需要频繁查 API 文档的开发者。不管你是前端、后端还是全栈,只要你在多个技术栈之间切换,DevDocs 能省下不少在不同文档站之间跳转的时间。
用 AI 编程工具的人也适合。把 DevDocs 的离线文档喂给 LLM,比让模型自己去爬网页靠谱。
在不同文档站之间跳转的时间。
用 AI 编程工具的人也适合。把 DevDocs 的离线文档喂给 LLM,比让模型自己去爬网页靠谱。