起因
这是一个普通的七月下午。窗外的蝉声渐起渐落,屏幕上的代码在光标闪烁中静候重写。
GPT 做了一半便没了余额,留下一个未完成的升级——就像一首写到副歌便戛然而止的歌。Claude 接过这根接力棒,从那些零散的 git diff 中拼凑出故事的前半段,然后决定把它写完整。
不是因为强迫症,而是因为相信:一个好的博客,应该像一本装帧考究的书,不仅内容值得细读,连翻页的手感都让人舍不得匆忙。
做了什么
一、轻装上阵
Vue 是个好框架,但对于这样一个静态博客来说,就像在散步时穿了双跑鞋——功能过剩。我们把 WaterField.vue 重写为原生 Astro 组件,用 Canvas API 和原生 JavaScript 重新绘制那片会呼吸的水波。
依赖少了,包小了,加载快了。就像给文字卸下盔甲,让它们轻盈地抵达读者的屏幕。
二、阅读的仪式感
我们为文章页面添加了一些克制的功能:
阅读进度条——一条细线,在页面顶端静静跟随你的目光。它不催促,只是温柔地提醒:你已经走了多远,还有多少风景在前方。
目录导航——桌面端固定在侧边,像一位安静的向导;移动端可以折叠收起,不打扰你的沉浸。章节的标题在这里排列成诗,点击便可跃至相应的段落。
相关文章推荐——基于分类和标签的智能匹配,读完一篇,顺手递上几篇相关的。就像在书店里,店员轻声说:“喜欢这本的话,或许也会喜欢那几本。”
上一篇 / 下一篇——时间线上的前后漫步,让偶然的访客也能看见你思考的轨迹。
一键复制链接——分享的门槛应该低到只需一次点击,剩下的事情交给读者自己决定。
阅读时长预估——中文字符和英文单词分别计算,告诉你这篇文字大约需要几分钟。不是为了催促,而是帮你更好地安排时间,选择何时打开它。
三、被看见的努力
SEO 和元数据的完善,是一种对搜索引擎的礼貌,更是对读者的尊重。
我们添加了完整的 Open Graph 标签、Twitter Card 元数据、JSON-LD 结构化数据。当你的文章被分享到社交平台时,它会带着精心准备的封面图和摘要出现,而不是一行干巴巴的链接。
就像你认真打扮后去赴约,而不是穿着睡衣出门。
四、后台的温柔
Sveltia CMS 是这个博客的幕后工作台。我们为它添加了三个新字段:
- 作者:虽然现在只有一个人在写,但总要为未来的客座作者留一扇门。
- 封面图:1200×630 的社交分享图,让每篇文章在被转发时都有自己的脸。
- 图片描述:无障碍访问的 alt 文本,让视障读者也能知道这张图想说什么。
我们还为 CMS 配上了与博客一致的主题色——秋水的青,在浅色和深色模式间自如切换。编辑器现在支持实时预览,标签输入有了常用建议列表,加载时有了品牌化的动画。
写了一份 CMS-GUIDE.md,记录每个字段的用途、每个功能的用法。文档是写给未来的自己看的,也是写给可能某天会用到它的陌生人看的。
五、自动化的优雅
GitHub Actions 接管了部署流程。每次推送代码,它就自动构建、检查、发布到 Cloudflare。
自动化不是为了偷懒,而是为了把重复的事情交给机器,把注意力留给真正需要思考的部分。
技术细节(如果你好奇)
- 移除了
@astrojs/vue和vue依赖 - 新增
article-enhancements.css样式文件 - 阅读时长计算:中文字符 ÷ 400,英文单词 ÷ 200
- 相关文章推荐:基于 Jaccard 相似度算法
- 目录生成:自动提取 h2/h3 标题,支持平滑滚动和高亮当前章节
- 阅读进度条:使用 Intersection Observer API 计算滚动位置
- 所有交互细节支持键盘导航和屏幕阅读器
构建耗时:2.33 秒
页面数量:24
代码变更:+897 行,-1450 行
写在最后
这些改动,说大不大,说小也不小。它们不会让你的文字突然变得更有深度,也不会让访问量一夜翻倍。
但它们让这个空间变得更像一个适合停留的地方——有舒适的阅读体验,有贴心的导航设计,有对细节的执着,有对读者的尊重。
就像你精心布置自己的房间,不是为了拍照炫耀,而是因为你知道,有些人会在这里停留,有些文字会在这里被看见。
而那些被看见的瞬间,值得你为之准备得更周全一些。
这篇文章本身,也是用今天升级后的 CMS 写下的。新的字段、新的预览、新的体验——从工具到作品的距离,又近了一点。