# Oink 0.7.0：主题色、统一的字体口径，以及终于能读的图

> Oink 0.7.0 让每个板块通过外壳的底色拥有自己的强调色，把七个字体角色交给站点配置， 并把 mermaid 围栏变成一张真正的图：居中、切换深浅色就地重绘、可以按原始尺寸打开。

---

LLMS 索引： [llms.txt](/zh/llms.txt)

---

Oink 0.7.0 没有改动任何组件 API。它只做两件读者真正长时间面对的事——页面周围的外壳
与页面上的字——并补完了一个从来没有被设计过、只是继承下来的围栏。

**v0\.7\.0 · 2026-08-25**
- [查看发布](https://github.com/pgsty/oink/releases/tag/v0.7.0)
- [源码 · tar\.gz](https://github.com/pgsty/oink/archive/refs/tags/v0.7.0.tar.gz)
- [源码 · zip](https://github.com/pgsty/oink/archive/refs/tags/v0.7.0.zip)
- [pgsty\/oink](https://github.com/pgsty/oink)

## 概览 {#at-a-glance}

- `params.ui.theme_color` 让板块拥有自己的强调色，作用于外壳的底色，而非正文。
- `params.ui.fonts` 覆盖全部七个字体角色；Book 不再自带字体。
- `mermaid` 围栏是一张图：居中、无边框、切换配色就地重绘、可按原始尺寸打开缩放拖动。
- 行内代码是绯色墨迹配极淡底纹，不再是灰色药丸。
- 主题自带的浏览器行为以稳定能力分块发布在 `js/chunks/` 下，页面按需选择脚本而不再自制打包。
- 配置 schema 由解析器生成，不再手工维护。

## 主题色 {#theme-color}

`params.ui.theme_color` 接受 `#rgb` 或 `#rrggbb`，为外壳的强调底色着色：选中的侧栏行
以及相邻行在指针下的底色、悬停底纹、大纲的胶囊及其滑动轨道与圆点、标签与 chip 的
悬停、卡片的悬停边缘、分享按钮的悬停填充、文本选区，以及焦点环。

```yaml {title="hugo.yaml"}
params:
  ui:
    theme_color: "#2f6f4f"
```

板块可以设置自己的颜色，页面用 `theme_color: false` 退出继承来的颜色。它刻意不碰阅读
表面——正文链接、外部链接与行内代码在任何板块都保持品牌色——所以着色的板块是一个安静
的位置信号，而不是把整页重新上色。

## 统一的字体口径 {#typography}

`params.ui.fonts` 从配置触达主题的七个字体角色，站点不用再自带样式表就能改变自己的
字体口径。

Book 不再自带字体。它的编号与图表标题原先用一套只含拉丁子集的等宽字体渲染，导致一句
中文标题在句中被拆成两种字面——数字用一套，汉字落到读者恰好装有的任意回退字体。现在
它们继承周围的字体，由 `tabular-nums` 维持侧栏那一列的对齐。

## 终于能读的图 {#mermaid}

`mermaid` 围栏原本是五行透传：把代码块的 `<pre>` 交给 Mermaid，剩下的交给
`startOnLoad`。三个缺陷都源自这一个决定，而它们的修法是同一个——让源码在 Mermaid
跑过之后依然可读。

围栏现在输出一个 figure，里面是空舞台加上以 JSON 保存的源码，也就是 `echarts` 与
`infographic` 已经在用的形状，由运行时决定每张图何时绘制。

**居中，且无边框。** Mermaid 输出 `width="100%"` 加上等于图自身尺寸的 `max-width`，
所以比栏窄的图会贴在起始边，旁边留下最多 300px 空白——而且那块空白是被框起来的，
框来自代码块。这里刻意不提供对齐属性：图是 figure，没有读者想要一张贴右的图。

**可以按原始尺寸打开。** Mermaid 在窄栏里不会溢出，它会缩小以适应，所以
`overflow-x` 从来给不出退路：在 390px 手机上，本站 Mermaid 文档页里的时序图渲染为
自身宽度的 35%，14px 的标签变成 5px。把指针移到图上（或用键盘走到它），图的角上出现
一个按钮，点开后图会按原始尺寸重新渲染一遍进入对话框。拖动平移，滚轮、双指捏合或
`+` `-` 缩放，`0` 复位，`Esc` 关闭。如果一张图要缩到一半以下才放得下，它会按 1:1
停在起始角打开，而不是变成缩略图；而无论多大，往回缩总能看到整张图。

**切换配色不再重载页面。** 旧运行时在任何含图页面上、每次切换主题都会重载整个页面，
理由是 Mermaid 8.x 时代的一条限制。Mermaid 11 支持干净地重新初始化，所以图会就地
重绘，且每张图在重绘期间保持原有高度，读者眼前不会有东西移动。

处于非激活标签页里的图现在也能以正确尺寸渲染。在 `display: none` 之内，一切文字测量
都返回零，Mermaid 把由此得到的 `max-width: 16px` 永久写进了 SVG，切回那个标签页也救
不回来。

Markdown、RSS 与打印输出携带围栏源码。打印此前携带的是一个没有任何运行时能触达的
`<pre class="mermaid">`，且 `font-size: 0`——所以打印出来的图一直是一段空白。

## 阅读表面 {#reading-surface}

行内代码是绯色墨迹配极淡底纹，不再是灰色药丸。旧的色块让每个 token 都变成一颗药丸；
现在淡得多的底纹只负责标出 token 的边界，识别工作交给等宽字面、字重与色相，这让
token 密集的段落保持可读，而不是变成一片灰色控件。

系列条现在是与栏同宽的一块面板，而不是一摞链接；分类 chip 静止时安静、在指针下亮起；
导航栏的下拉面板是呼吸式展开而不是弹出；链接悬停从沉闷的藏青转为明亮的天蓝。

## 构建与基础设施 {#build}

- 主题自带的浏览器行为以稳定能力分块发布在 `js/chunks/` 下。页面按能力选择 script
  标签，而不再自制一份打包，因此这些分块可以跨页命中缓存。
- `bin/generate-config-schema.py` 从解析器生成 schema，新的 `params` 键若没有对应
  schema，CI 会失败。
- 新增可选的 `BookManifest` 输出，用稳定 id 记录 Book 的顺序。
- 每一张解析出的图片背后是同一套 media-result 契约。
- Google Analytics 仅限交互式 HTML 输出，打印与机器输出不再携带。
- Book 发布任务终于能渲染出 PDF。它从来没有成功过：`chrome-headless-shell` 需要
  非特权用户命名空间，而 Ubuntu 24.04 通过 AppArmor 限制了它，该任务此前每一次运行
  都是失败的。

## 升级 {#upgrading}

```bash
hugo mod get github.com/pgsty/oink@v0.7.0
hugo mod tidy
```

组件 API 没有变化，因此不需要改动内容。两点值得知道：

- `mermaid` 围栏不再渲染 `<pre class="mermaid">`。站点里针对该选择器的 CSS 现在匹配
  不到任何东西；图现在是 `figure.td-diagram`，内含 `.td-diagram__stage`。
- 如果站点自己的检查脚本里硬编码了主题版本号，那条断言需要跟着 pin 一起更新。

完整清单见 [CHANGELOG.md](https://github.com/pgsty/oink/blob/main/CHANGELOG.md)。