博客的几个小更新
前阵子给博客上线了几个小更新,每一个我都挺喜欢,顺带分享一些我看到的有趣项目。
Sunny Mode
前阵子的再前阵子,Sunny Mode 在 X 上引起了一阵热度,Ding One 也写了一篇文章介绍了其来龙去脉,我就不重复了,这个效果让我想起来《完美的日子》里反复出现的一个词:
木漏れ日 / Komorebi
这个词的意思是:阳光穿过树叶缝隙后落下来的斑驳光影。 s 文章里的提到几个开源效果,都没有很符合我想要的感觉,最符合我想要的感觉的 Garden 也没有开源,我也不想用视频的方式实现,就干脆使用 Codex 自己做了一个,其中最难的一部分在于怎么和 Agent 沟通「自然」的感觉,调了很多版本,目前是相对满意的效果,点击底部的主题切换就可以看到。
主题切换的图标本来使用代表 Sunny 的太阳是很合适的,但太阳的图标本来已经有在使用了,我另外选用了一个叶子的图标来代表这个模式,这个图标来自于一个我很喜欢的游戏:动物森友会。
说到动森,刚好也看到一个有趣的项目 Animal-Island-UI,这是一个动森风格的 React 组件库,还原度挺不错。
pangu
我之前使用 Heti 来优化中文排版,在这次更新里我换成了 pangu,更换原因很简单:Heti 在特定标点一起出现时,会出现标点挤压异常的问题,在这个 issue 里也有一些讨论和配图。标点挤压本是排版上用于优化中文和日文排版的一种技术,我也很喜欢,但这个问题我真的忍受太久了,这次就干脆换掉它了。
还有一个完全主观的小原因:在处理中英文之间的空格时,Heti 并不是单纯地插入一个空格,而是会对文章内容的 DOM 修改,插入额外的元素并使用 CSS 控制间距。Heti 这种处理方式是更加接近于专业排版的,这个避免了真实空格参与断行、两端对齐以及受到字体空格宽度影响等等问题,但是这种处理方式这样会导致我在选择文字时,高亮的 Selection 效果会变得不连续,这点完全不是问题,纯粹是个人主观觉得有些介意。
和 Claude 一起阅读
我不打算为文章增加 AI 总结的功能,但在文章页的发布时间和阅读时间旁边,现在多了一个 Claude 图标,点击之后会打开 Claude,并带上一段预设好的 prompt,大意是「我刚读到这篇文章,你怎么看」。这个功能的灵感来源于 Onboarding is a transaction,我第一次看到这样的做法,觉得挺不错,而且就几行代码的事情,就顺手加上了。
Progressive Blur
在文章页往下滚动后,顶部会出现一个固定的 Header,我之前使用的是普通的 backdrop-blur,看起来很生硬,这次我把它换成了 iOS 里我很喜欢的 Progressive Blur 效果,现在看起来文字模糊消失的效果更柔和了。
Live Chart
这是一个做好了但没有上线的一个更新,我看到 Live Line Chart 这个项目,设计和动画都非常漂亮,马上就试着应用到了博客 Photos 页的统计图表上,但做好后发现这个图表更适合更实时变化的数据,就把修改撤回了,项目现在更新了更多漂亮的图表,似乎我又能多玩几下了。
这几处更新都没有大改博客的设计或者结构,只是放进了一些我的个人偏好,目前我对这个博客已经非常满意了,现在反倒更想要做一个更加个性化的个人主页,跃跃欲试,这也不算违反了之前我说的「再也不折腾博客」吧 :D