建站 · FIELD NOTE

一场关于博客的文艺复兴

在七月的某个下午,我们为这个小小的文字花园添上了更多温柔的细节,让每一次阅读都成为一场从容的漫步。

文章目录 9 节

起因

这是一个普通的七月下午。窗外的蝉声渐起渐落,屏幕上的代码在光标闪烁中静候重写。

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/vuevue 依赖
  • 新增 article-enhancements.css 样式文件
  • 阅读时长计算:中文字符 ÷ 400,英文单词 ÷ 200
  • 相关文章推荐:基于 Jaccard 相似度算法
  • 目录生成:自动提取 h2/h3 标题,支持平滑滚动和高亮当前章节
  • 阅读进度条:使用 Intersection Observer API 计算滚动位置
  • 所有交互细节支持键盘导航和屏幕阅读器

构建耗时:2.33 秒
页面数量:24
代码变更:+897 行,-1450 行

写在最后

这些改动,说大不大,说小也不小。它们不会让你的文字突然变得更有深度,也不会让访问量一夜翻倍。

但它们让这个空间变得更像一个适合停留的地方——有舒适的阅读体验,有贴心的导航设计,有对细节的执着,有对读者的尊重。

就像你精心布置自己的房间,不是为了拍照炫耀,而是因为你知道,有些人会在这里停留,有些文字会在这里被看见。

而那些被看见的瞬间,值得你为之准备得更周全一些。


这篇文章本身,也是用今天升级后的 CMS 写下的。新的字段、新的预览、新的体验——从工具到作品的距离,又近了一点。