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