本文 AI 含量 60%
距离上一次更新博客已经过去了 20 多天。这半个月,我的大部分时间都被 Claude Code 占据了。
半个月前,我终于没忍住买了 Claude Code 100 刀的会员。买完之后,每次想到 token 额度没用完,就觉得亏。于是大部分时间都扑在了 Claude Code 上。
那么,这半个月我用 Claude Code 主要做了什么?
- 帮朋友做了一个选课工具。
- 搞了自己的打卡 app、content digest 早报邮件,家里用的小工具。
- 剩下绝大部分时间,都花在建造自己的阅读器上。
为什么要自己做阅读器
说起原因,得先回顾我的阅读器使用经历。
五六年前开始订阅 Readwise,后来 Readwise 出了 Reader,它便成了我的主力阅读器。
Reader 确实有不少优点:解析好、方便高亮,与 Readwise 的高亮系统集成度高,还支持不少快捷键。
但它也有让我受不了的地方。最大的问题是颜值:虽然支持浅色、深色主题切换,却不支持自定义字体和背景。它的背景非白即黑,盯久了眼睛累。另外,PDF 以外的文件上传也挺麻烦,也没法翻译外文文章。
于是我尝试用不同软件来阅读,最终形成了现在的模式:
- 微信文章:用「新枝」。它支持自定义背景,也能用官方设定的字体。但对国外链接支持很差。
- 长篇 PDF 拆书学习:用 Heptabase。
但这两者的高亮都无法与 Readwise 同步。没法同步,就意味着没法把它们集成到其他工具中。
虽然我现在重新开始用手写笔记记录感兴趣的内容,但在外面,比如通勤时阅读文章,总不能掏出本子乱写一通。这种场景下,简单的高亮还是有用的。
我之前没有任何编程经验,自然没办法改进体验。直到半个多月前的一天,我把这些困扰告诉了 Claude。
我告诉它我的诉求:
- 一个美观、可自定义的阅读软件
- 高亮能同步进 Readwise
- 能解析文章链接
- 支持上传文件
这里的「上传文件」主要是指:我用 Podwise 总结那些没时间听的播客,再通过 Claude Code 把文字稿转成播客精读稿(攒了 100 多篇了)。
Claude Code 告诉我一个我之前不知道的事:Readwise 有 Reader API,可以把文章内容导出来,还支持不少字段筛选。正巧刚订阅了 Claude Code,我决定基于这个 API,开发一个由自己掌控的阅读器。
最初的样子
第一版非常简单。我把需求告诉 Claude Code,它建议用 Astro 搭一个静态站点,把 Markdown 文件渲染出来就行。
作为编程小白,我之前选博客框架时听说过 Astro,但完全不知道它具体能做什么。Claude Code 说它的 Content Collections 功能天然适合这个场景。于是我在本地 Obsidian 用 Claude Code 把播客文字稿转换成精读稿,用脚本自动同步到 GitHub 仓库,Vercel 检测到更新就自动部署。整个流程不需要数据库,不需要后端,纯静态。
为了让阅读体验舒服一点,我让 Claude Code 帮我调样式。最后选了 Flexoki 这个护眼配色 —— 背景是淡淡的米黄色,文字是深灰而非纯黑,长时间盯着不累。字体用思源宋体,中文阅读的经典选择。终于告别了 Readwise 那个纯白纯黑的刺眼背景。
这个版本用了大概两周,每天晚上拿 iPad 打开网页读文章,感觉还不错。
但很快就不够用了
问题出在「高亮」上。
阅读时划重点是我的习惯,而且希望这些高亮能同步回 Readwise,方便之后回顾。但静态站点没有后端,高亮数据只能存在浏览器的 localStorage 里,换个设备就没了。
这让我面临一个选择:要不要把这个「小工具」改造成「小应用」?
纠结了几天,还是决定干。原因很简单:做都做了,不如做完整一点。反正有 Claude Code,我又不用自己写代码。
SaaS 改造
所谓 SaaS 改造,说白了就是加数据库和 API。
Claude Code 帮我选了 Turso 作为数据库 —— 一个基于 SQLite 的边缘数据库,有免费额度,跟 Vercel Edge Functions 配合得很好。ORM 用的是 Drizzle,据说类型安全,写起来很舒服(虽然我也不懂这些术语什么意思)。
改造后的架构变成这样:
- Astro 切换到 hybrid 模式,首页还是预渲染,API 路由按需执行
- 文章存在数据库里,通过 API 增删改查
- 高亮数据也存数据库,可以跨设备同步
- 接入 Readwise API,定时把新收藏的文章拉过来
这一步踩了不少坑,后面会说。
功能堆叠
SaaS 改造完成后,我开始往上加功能。有些是一开始就想做的,有些是用着用着才发现需要的。每次有新想法,告诉 Claude Code,它就帮我实现。
阅读进度追踪 是第一个加的。思路很简单:监听滚动位置,防抖保存到数据库,下次打开自动恢复。还做了一个顶部的细进度条,显示当前读到哪了。
多主题支持 是标配。Flexoki 本身就有 Light 和 Dark 两套配色,Claude Code 按官方色值做了两套 CSS 变量。为了避免页面闪烁(先显示浅色再切换成深色),在 HTML head 里加了一段内联脚本,在页面渲染前就应用好主题。此外我还加入了 Nord、Ayu、Monokai Pro 等好几个主题。
批量管理 是为了解决「归档焦虑」。有时候一口气想清理掉十几篇文章,一篇篇点归档太慢了。所以做了个管理模式,可以多选后批量归档或删除。
「下一篇」按钮 是个小细节但很实用。读完一篇,点一下就跳转到下一篇,同时自动把当前这篇归档。连续阅读体验好了很多。
沉浸式翻译 偶尔面对一些长文我也会想偷懒,翻译成中文。所以我接了自己的 Gemini 2.5 Flash Lite 模型,模仿了沉浸式翻译的样式,速度还挺快。
阅读器设置面板 是后来加的。原本主题切换和字体切换是分开的,用着用着觉得该整合起来。现在点顶栏的 Aa 按钮,可以调字号、行间距、正文宽度,还能选不同的配色主题。
踩坑实录
虽然代码都是 Claude Code 写的,但做这个项目的过程中还是踩了不少坑。
iOS PWA 的字体不显示
这个问题困扰了好几天。
我用的思源宋体是从 CDN 加载的。浏览器里一切正常,但把网页添加到 iPad 主屏幕作为 PWA 打开后,字体就变成了系统默认的黑体。
一开始以为是 Service Worker 没缓存好,让 Claude Code 折腾了一圈,发现不是。后来查资料才知道:iOS PWA 在 standalone 模式下,跨域的 CDN 资源加载有问题。
解决方案是把字体文件下载到本地,直接打包进网站。一个可变字重的思源宋体 WOFF2 文件有 21 MB,但没办法,为了字体能正常显示,只能接受这个体积。
Readwise API
另一个比较大的坑来自 Readwise API。
Readwise API 在官方文档里明确表示,它主要用于个人导出自己的文章和文档。当我想批量拉取文章时,很容易触发速率限制。而且我的数据库结构跟 Readwise API 的数据格式差异不小,开发过程中反复调试。
之后为了防止 API 在公网上被滥用,我还加了密钥验证。在浏览器上使用时,需要先输入密钥,才能进行拉取和高亮等操作。而这个密钥功能整整折腾了我两周 —— 各种场景切换以及新功能的变动,都可能导致需要重复输入密钥。
直到这两天,我才终于把这个问题基本修好。
现在的样子
折腾了半个多月,我的 Reader 现在有 40 多个功能点,代码量大概一万行(当然都是 Claude Code 写的,我最多在终端里敲敲命令)。每天睡前拿 iPad 打开它读半小时文章,偶尔发现小 bug 就让 Claude Code 顺手修掉。
直到这几天,它才终于稳定下来,成了我理想中的样子:
- 支持主题、字体、明暗模式的切换
- 与 Readwise 实现了双向打通(无论输入还是输出)
- 支持本地文档上传
- 模仿「沉浸式翻译」添加了翻译功能
- 左侧展示文章列表,右侧展示目录
- 在移动端和浏览器端会有不同的呈现方式
可以说,这个产品终于接近了我想要的阅读器的样子。
而这个项目带给我最大的收获,倒不是技术层面的 —— 毕竟代码都不是我写的 —— 而是做一个「给自己用的工具」的满足感。
市面上有无数优秀的阅读应用:Readwise、Instapaper、Pocket、Omnivore(虽然已经关了)……它们功能更全、体验更好。但它们是别人的工具,而这是我的。
每一个功能都是因为我需要才加的,每一个样式都是按我的审美调的。用着用着想到「哎这里可以改进一下」,就真的能让 Claude Code 去改。这种掌控感,是用任何现成产品都得不到的。
不过,回想过去这近一个月的时间,每天晚上打开电脑,除了玩《终末地》,就是不停地对着终端自言自语,或者焦急地等待它完成任务。之前每天晚上用来阅读、练字、看视频的消遣时间,通通让位给了 Claude Code。
看起来生产力是提高了,但这种 productivity porn 真的是我想要的吗?所以目前的打算是,先用足这一个月的会员,把几个主要的日常自动化和缺少工具的场景覆盖好。之后等会员到期,降回 20 刀的普通会员,日常用用、修修 bug 足够了。