Skip to content
1,342 chars
5 mins
0
0
0

博客最近的重构和优化

Posted at
Categories

10 月 22 日到 30 日给博客提交了一百八十多个 commit。编辑器先画原型再重写,加了版本历史和内容组件;AI 摘要、帮写、润色和 MCP 服务都只给建议、只写草稿,拍板留给自己;音乐播放器重写成沉浸式页面,多来源逐字歌词按质量选择,AI 只挑词、选特效,不碰时间轴。另外重做了前台设计、修了一轮安全问题,补上分享图、访客记录等功能。

从公司请假回来之后也算是有了一些自己的时间,重拾了一下当年没有完成或者做的不好的几个项目,其中包括这个 neo-blog,当年很多功能优先保证能用,体验什么的后面再优化吧,但是这一等就是一年。

这东西口头上说是博客,严格来说是一个内容管理系统。

编辑器:重新定义博客编辑体验

作为一个内容创作者,首先是创作,我觉得一个好的CMS不应该只关注最终呈现给访客的部分,还应当关注创作者在这个过程中的实际体验。时间回到一年前,我是第一次接触这种富文本编辑器的开发,当时在众多开源组件中选定了Tiptap组件库,被它的设计语言所吸引。但是最初也只是保证能用,很多功能都是糊上去的,我自己感觉都比较难绷。

这次干脆重做了。在我使用过的无数富文本编辑器中,飞书云文档和Outline的编辑体验是比较好的一档,流畅度、UIUX都是很影响的因素(真想吐槽一下腾讯自己的文档)。我让AI帮我重新设计了一版原型图,基本上对齐这两家产品,并且还结合了我实际的编辑体验中值得改善的地方。

另一个我觉得很实用的是版本历史。每次保存草稿或者发布都会留一个快照,发布过的版本永久保留。写崩了可以一键放弃这次打开编辑器以来的修改,或者把某个旧版本恢复成草稿。这个我是参考了Git的实现。

然后是内容组件。现在文章和独立页面里都能插内置组件了,有一个按目录浏览的组件库,组件可以设宽度、对齐和预设高度。这个算是我想出来的一个花活之一。

音乐播放器:一个『有情感和生命』的播放器

起因是看到我导师做了一个很不错的播放器:

我听歌有个习惯:喜欢盯着歌词看。

可大多数播放器里的歌词,都只是一行一行地往上滚。唱到最痛的那句,它和「啦啦啦」一样平静;唱到心跳加速的地方,它也只是默默变亮。歌手已经把情绪推到了顶点,屏幕上的字却还站在原地。

我总觉得,有些唱出来的歌词是值得被看见的。

所以给博客的播放器加了特效歌词。每首歌第一次播放时,AI 会先把整首歌读一遍,再决定哪些字该放大、哪些该发抖、哪些该发光,哪些唱完就该碎掉、散掉。那句「心碎像玻璃」,唱完的一瞬间真的会碎;唱到点题那句时,其他歌词都会退后,只留它一个在灯下。

说到底,这个播放器是做给自己的。那些我反复听了很多遍、却说不出为什么喜欢的歌,现在终于能看着它们,一个字一个字地被唱出来。

如果你也路过这里,愿意的话,挑一首歌,把声音开大一点。

原来的播放器只是一个能放歌的小挂件,这次重写成了一个独立的沉浸式页面。

点击查看各种特效演示

编辑器AI:扩写、润色、自定义指令

我个人不太喜欢AI通篇生成文章,但是我自己的文笔能力有限,这个功能可以帮我在能完整表达意思的基础上,优化文章阅读体验。

其他顺手重做的

  • 剪贴板直接粘贴图片:这是我觉得最实用的功能之一,截完屏就可以直接粘贴到文章,无需保存本地再上传。

  • 访客记录:匿名用户使用浏览器指纹分析,认证用户直接记录,便于分析访客来源和分布。

  • 博客编辑MCP:便于本地Agent客户端直接接入对文章进行动刀。

  • 页面:支持上传自定义HTML,支持外部链接,可以实现各种各样奇奇怪怪的页面了。

欢迎给我的博客项目点一个Star喵,喜欢的话可以自己部署一个哦~。

博客最近的重构和优化
Posted at
10/30/2026

Unless stated otherwise, articles are licensed under CC BY-NC-SA 4.0. Please credit the source.