Shirone

1. 背景#

首先是最明显的，这个等高线背景。我执意想用Monochrome主题，优点是只有黑白，缺点也是只有黑白。

黑白让整个页面失去了生气，太过严肃太过冷清，对比度也不太高，整个页面有种灰蒙蒙的感觉（尤其是深色模式），谈不上压抑，但也不舒服。

默认的那几套背景跟这又不搭，即使放在这套非黑即白的主题上，都让人觉得二次元风溢出了屏幕。不是说不好，只是不搭，总觉得突兀、违和。

而且Monochrome主题的选区高亮效果也有问题，透明度太低了，几乎看不清…完全看不到文字。

正因如此，我几番动了换成Neutral凑合用的念头。但隔一阵子再看，又会觉得颜色太多了……最终还是换回了Monochrome。

既然都这样选了，那只能尽可能地去改了。

于是我开始思考：怎样让这个页面活起来？背景是最容易下手的地方，而且最好是动态的。

这类效果可以说是AE里最基础且经典的了，各种设计和教程数不胜数，挑个满意的方案直接抄😋随便一搜就有不少：滚动的方格、动态拼贴的元素自转 + 整体斜向移动、随风摆动的斜线、等高线演变……emm……说实话，当这几个效果同时出现在候选里时，其实已经没有选的必要了

前两个动得快了影响阅读体验，动得慢了整个页面又“不活”了。

斜线好像不错，但疏密很难控制。

就算穷举出了一个舒服的组合，这种摆动该怎么向AI描述？在AE里用湍流置换叠加实现，但在canvas里呢？

以我这离开AI就不会写Hello World的水平，自己写完全不现实，描述也描述不清……这条路也行不通。

只剩等高线了。有静有动，还能加入鼠标交互，堪称完美之选。

实现很快，但性能…2K环境的单帧渲染延迟增加了约10ms，从稳定的200帧掉到了不足100帧，滚动时更是连60帧都稳不住…一点一点地试着优化，现在这样勉强还行。

你应该已经看到比较明显的了：滚动时冻结、触控设备上冻结。

还有些藏得比较深的：复杂度、采样大小、计算间隔、限制90帧、空闲时限制30帧。

还在考虑有没有必要监测帧渲染耗时来动态调整性能，但总感觉没必要？断点怎么定、防抖怎么处理、是限制帧率还是直接砍成静态…整套逻辑要设计完善很麻烦，搞不好体验还不如之前…懒就直说🫵

点击导航栏右侧的调色盘图标展开菜单，你可以选择关闭或限制动态效果。如果遇到了严重的性能问题，欢迎在这篇文章底部的评论区留言。

2. 一些元素的颜色#

行内代码块、剧透，都是在浅色模式下隐约可见，深色模式下直接隐身。改成了基于字体颜色调整透明度的方案；但剧透需要遮挡文字，不可能用透明度，一时也没找到合适的CSS变量，于是改成了模糊。

还有一些零散的、明显不对的配色，比如明暗切换菜单、Monochrome主题的选区高亮等等。毕竟项目还在早期开发阶段，每天都会修复旧Bug并增加新Bug，过去发现的许多Bug我还没来得及反馈就被顺手修了，说明很多问题早就被注意到了，所以暂时没提issue…🤔

3. 可有可无的优化#

• 点击复制 行内代码块 的内容：借鉴了Qwen Studio里的一个小设计，功能简单，但体验提升明显。
• 日历支持修改日期：在Mizuki时期我就给日历加了文章修改日期的支持，这次也一并迁移了过来。
• 外部链接在新标签页打开：Mizuki原本就有的功能，rehype-external-links 插件加上两行配置实现的，可能忘了？
• 悬浮按钮大小响应式调整，并自动半隐藏：避免遮挡正文。很常见的设计，没什么好说的。
• 自动盘古之白+：过去全靠手动插入空格，一是不方便，二是空格的宽度略大。前段时间才了解到 text-autospace 这个CSS属性，它会在渲染阶段自动保持一定距离（通常是1/8到1/4个字宽）。详见 这篇文章。

4. 针对小屏的适配#

尽可能保证在小屏上的使用体验，以360×780px（逻辑高度）为基准进行测试。涉及排版、悬浮按钮、背景性能等。

除此之外好像没什么了，其他都是些小的更改，比如站点罗盘卡片的介绍超长不折叠、友链页的申请指南、滚动条不触发布局重拍、“你知道的太多了”……