这次博客改造通过 Codex Work 完成,文章用截图展示紧凑的首页列表、正文与可折叠 AI 摘要、无配图时自动排版的文字封面,以及藏在桌面端头像里的刺猬生存小游戏和《NEW GAME!》隐藏主题,同时介绍加载、图片、导航和评论的调整。 小游戏首次坚持 60 秒可解锁《NEW GAME!》主题,之后还能挑战无尽模式。作者提出需求、检查预览并决定取舍,Codex 负责实现和提交 PR;实现与反复修改的成本降低后,个性化博客更容易从想法变成成品。
最近集中折腾了一下这个博客。文章还是放在 Notion 里,网站还是基于 NotionNext,不过外观和使用体验,开始更接近我自己想要的样子了。
这些修改都是通过 Codex Work 完成的。准确地说,目前这个仓库里的所有 PR 都是这样做的:我提出想法、看预览、继续提意见,Codex 负责读代码、实现修改和提交 PR。
首页先清爽一点

首页现在是一列紧凑的文章列表:左边放标题、摘要和标签,右边放封面,上面保留简单的个人介绍和分类入口。往下翻时,可以很快扫一眼最近写了什么;想了解作者,点名字就能进入关于页。
正文更好读,摘要可以自己收起

正文重新调整了行宽、字号和留白,标题、内容、评论和页脚也对齐到同一条阅读轴线上。文章头部能看到字数和预计阅读时间;长文章的目录在宽屏时放到正文外侧,窄屏时可以收起。
图里浅色的区域是新增的 AI 摘要。想先了解大意,可以看两段概括;想直接读正文,点一下就能折叠。哪些文章需要摘要、摘要写什么,都由我在 Notion 里决定,网站只负责展示,不会自动给文章生成摘要。
创作方式也用简短标签放在文章头部:经过 AI 润色,或者由 AI 生成正文,会有相应标记,点击可以查看具体说明。摘要和正文的创作方式分开标注,读者可以按自己的偏好选择。
没有配图,也能有一张封面

上面两篇日语学习文章正好能看出区别:有封面的继续用原图;《日语学习过程工具资料记录及评鉴》没有设置封面,网页就把标题、摘要和分类排成一张文字卡片。
这张卡片直接在网页上渲染,不需要另外生成图片,再传回 Notion。以后偶尔只想写点文字,也不用为了让首页好看而专门找一张配图。
还有一些不太显眼,但每天都会碰到的修改
- 加载与切换: 减少列表页里不必要的 Notion 内容加载,调整字体和封面图的加载方式。打开文章时加上及时的加载反馈,导航也有了轻微的交互动效。
- 图片与链接: 修复首次打开 Notion 图片时偶发的错误,以及图片、链接卡片和嵌套内容挤出正文的问题。预览图失效时,链接本身仍然可以正常阅读和点击。
- 评论与细节: 评论只出现在已发布的文章中,统一圆角和底部留白,也给找不到的页面补上清楚的返回入口。
头像里,还藏着一个小游戏

桌面端点击首页头像,原本的个人介绍区域就会展开成一场刺猬生存小游戏。用方向键或 WASD 移动、躲开敌人,飞刺会自动攻击;拾取微光升级后,再从三个强化中选一个。
第一次坚持 60 秒,就能解锁《NEW GAME!》主题,让首页、文章、目录和评论区一起换成粉紫色的风格。解锁状态会保留,之后可以自由切换回平时的样子,也可以继续挑战无尽模式。

切换后的首页就是这个样子:粉紫色背景、游戏界面风格的导航,以及ひふみ抱着宗次郎的头图。小刺猬一脸不领情的表情还单独做了放大特写,和我平时用的头像也呼应上了。
我挺喜欢这种藏起来的小趣味。平时安安静静地看文章,偶然点一下,又能发现一点意料之外的东西,也让这个博客更像是属于我自己的地方。
有想法,就可以试着做出来
以前改博客,很容易停在“这个地方要是能改一下就好了”。真正动手之前,得先弄清主题结构、组件关系,以及改完会不会影响其他页面。很多小想法还没开始,就被这些准备工作劝退了。
现在可以先把想要的效果描述出来,让 Codex 做一版,再打开预览继续调整。页面哪里太挤、哪些动效太抢眼、某张图片怎么又越界了,都可以直接指出来,接着改。连藏一个小游戏、做一套隐藏主题,也变成了可以顺手试试的事。
最终留下什么,还是要自己看、自己决定。不过,实现和反复修改的成本确实低了很多。搭起一个博客之后,继续把它改成自己喜欢的样子,也不再是那么费劲的一件事了。