Way to Minimalism, Part 1: Meta Bar
最近在改博客样式时，有些地方我反复修改又撤销，比如字体类型和字体大小。正文和标题在 Serif Font 与 Sans Serif Font 之间来回切换，平常不会使用、但偶尔看一下也不错的 Monospace Font 和 Handwriting Font，也被我拿出来试了一遍。
如果不做 UI，这些设置只能靠手动修改 CSS 变量。PC 端还勉强能操作，只是麻烦；到了手机上，基本就没有现场调整的空间了。所以交互入口是需要的，但如果只是把选项摊在页面上，又很容易破坏阅读时的安静感。
晚上跟朋友等烧烤，店家设备故障频发，最后没吃上。
不过塞翁失马焉知非福，or we can say：这是好事啊。等餐时我突然想到，前几天重构 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 本身关系不大，但属于同一种冲动：把重复操作折叠起来，让真正要看的东西留在前面。
评论