Way to Minimalism, Part 1: Meta Bar
最近在改博客样式时，我反复修改又撤销了不少细节，尤其是字体类型和字号。正文与标题在 serif 和 sans-serif 之间来回切换，平常不会长期使用、但偶尔看着也不错的 monospace 和 handwriting 字体，也被我拿出来试了一遍。
这些尝试最后都指向同一个问题：阅读设置需要一个入口，但这个入口不能打扰阅读本身。如果不做 UI，这些设置只能靠手动修改 CSS 变量。PC 端还勉强能操作，只是麻烦；到了手机上，基本就没有现场调整的空间。
所以交互入口是需要的。但如果只是把选项摊在页面上，又很容易破坏阅读时的安静感。于是这次改动从文章元信息栏，也就是 Meta Bar，开始做起。
修改起因：晚上和朋友等烧烤，店家设备一直出故障，最后没吃上。
但等待的空档也不算浪费。前几天重构 Post 元信息组件时，我注意到 Tags 右侧刚好留着一块空白区域，于是突然想到：或许可以把这些阅读设置收进那里。
于是干脆在前端里加一些交互设置项，让字体、字号、字重、行高这类调整不必暴露在页面主体里。
另外可以加一个 info icon，点击后展示文章信息。这样文章末尾的 licensing 组件也可以删掉，界面看起来更整洁。
我让 GPT 先后生成了移动端和 PC 端的 Blueprint。
PC 端的蓝图生成得有点慢，要排队。11 点多回宿舍时，我已经忘了这件事。现在来看，蓝图里使用的 Popover 组件确实更适合：它不会像 Modal 一样打断阅读，也更符合“把选项收起来”的目标。
如前面所说，一开始我只让 GLM 对着移动端蓝图进行设计，先搓了一个“起码能用”的版本。
目前 PC 端和移动端都还是 Modal Dialog Component。
还有很多待完善的地方：设计风格的统一、性能优化、行高设置、各类组件的适配、交互细节和快捷键。
完善之后，还需要在 ABOUT 页面补充介绍。不过关于页面不宜过长，后面或许可以单独开个帖子，统一介绍博客里的快捷键和隐藏交互。现在是 03:56 AM，太晚了，后面再说吧。或者后天，但明天肯定没时间。
Timeline
- 2026-04-26: 适配 text-image 组件，换用新的 SVG Icon
- 2026-04-26: 重构，使用 CSS Variable 代替动态为元素内联样式
- 2026-04-27: 让 AI 支持设置
font-weight、line-height - 2026-04-27: 让 Codex 把评论区组件也默认隐藏，改为点击 Message Icon 后弹出 Popover Component
Interlude
Chrome 的 DevTools 可以预览网页在手机端的使用体验，但并不完全准确。
于是当电脑与手机在同一局域网内时，我一般会直接在手机上访问 PC 运行的 Server。手动操作时，需要先用 ipconfig 查看电脑的 IP 地址，然后在手机浏览器里输入地址和端口号。
为了简化流程，我写了个 Nushell function。输入 i 可打印地址，输入 i 4000 则会打印拼接端口号后的字符串。def i [port?: int] { let ip = ipconfig getifaddr en0 if $port == null { $ip } else { $"($ip):($port)" }}
效果：$ i210.41.101.202$ i 4000210.41.101.202:4000# 重定向到剪切板，clip 也是我自定义的函数，macOS 可以用 pbcopy 代替$ i 4000 | clip
这个小函数和 Meta Bar 本身关系不大，但属于同一种冲动：把重复操作折叠起来，让真正要看的东西留在前面。
Appendix
May.4
最近又开始尝试各种 Web Font。全部直接引入当然最省事，但也会拖慢加载速度，而且其中很多只是我的个人偏好。
blog 目前访问量不大，大概也不会有人认真评价它是否 bloat。不过我还是更倾向于把这些字体做成 optional feature：默认不加载，只有用户主动选择时再引入。
这个 feature 的出发点，还是我之前做性能优化时留下的习惯：优先使用 local font。问题在于，Android 设备上的本地字体选择很少，很多效果无法仅靠系统字体实现，所以最终还是需要引入一部分 Web Font。
评论