跳转到主要内容

OINK 1.4.0 — 表格、图表与搜索更好用了

按需展开大表格,本地绘制与查看图表,改进中英文搜索,新增博客画廊并统一组件细节。

OINK 1.4.0 主要改善技术文档的阅读体验:大表格可以按需展开,Mermaid 与 PlantUML 共用图表查看器,本地搜索更好地处理中文和中英混合查询。这次还加入博客画廊, 统一了常用组件的间距、边框与操作反馈。

表格:需要时再展开

多数表格放在正文里就够用。少数需要更大阅读空间的表格,在下方加上 .expand 即可。 鼠标移入或键盘聚焦时,右上角出现一个小按钮;触屏上保持可见。点击后在弹窗中 按正常字号阅读,按 Escape 或关闭按钮即可回到正文原来的位置。

.wide 用于技术宽表:标识符保持完整,较长的说明列限制宽度。这两个 class 各管一件事, 可以独立使用,也可以组合。Goldmark 支持在同一个属性块里设置多个 class:

| 扩展包 | 版本 | 用途 |
| --- | --- | --- |
| pgvector | 0.8.1 | 向量相似度检索 |
{.wide .expand}

下面就是这段源码实际渲染出来的表格。右上角的小按钮是真实的 .expand 阅读入口,列宽由 .wide 控制:

扩展包示例
扩展包 版本 用途
pgvector 0.8.1 向量相似度检索
pg_stat_statements 1.11 语句统计

原来的 .td-table--wide 写法继续兼容,普通表格无需添加控件。阅读器保留原表格、 链接和文字选择;打印及静态输出保留完整内容。表格标题也修正了留白和对齐, 与列标题保持一致,并给角落按钮留出空间。详见表格。

图表:统一查看,本地绘制

Mermaid 与本地 PlantUML 现在共用缩放、平移、适应窗口、查看源码、复制源码和 下载 SVG 操作,键盘与触屏都可使用。较大的渲染引擎等图表接近屏幕时才加载, 藏在标签页或折叠区中的图表会等到显示后再渲染。

PlantUML 可以直接使用主题自带的资源在浏览器中绘制。开启 params.plantuml: true, 不配置服务端地址即可,无需安装 Java、Graphviz、npm,也无需维护绘图服务。 显式配置服务端地址时继续使用服务端模式。本地引擎仍不支持 include、外部库及部分 PlantUML 特性,使用前可查阅本地渲染限制。

渲染失败时保留可读源码。浏览器打印优先使用已绘制的图表,尚未绘制时使用源码; 独立静态输出保留源码回退。窗口变化、窄列和主题切换后,图表仍能正常阅读。 Markmap 增加适应窗口按钮,Infographic 根据作者指定的主题保留独立底面。 详见 Mermaid 与 PlantUML。

本地搜索现在支持分开的中文词、中英混合查询,以及 shared_buffers、 pg_basebackup 这类技术标识符。优先展示包含全部关键词的页面;没有完整匹配时, 明确标出部分匹配,避免让读者误以为所有词都找到了。

结果会展示相关小节的上下文,并跳到真实标题锚点,每个页面只出现一次。 命令面板中可以通过紧凑的范围控件选择全站或当前栏目,键盘命令与中文输入法组字 继续正常工作。无需搜索服务、账号或新配置。详见本地搜索。

设置 blog_index: gallery,即可在列表、卡片和表格视图之外使用第四种博客视图。 画廊提供照片墙、无缝拼接、瀑布流三种排布和尺寸滑块,读者偏好与 Expo 相册分别保存。

点击封面仍然进入文章,日期顺序与分页保持一致。键盘与触屏用户都能看到标题, 缺少封面时显示占位图,禁用 JavaScript 时仍能使用普通网格。 详见博客布局。

组件:细节更安静,也更一致

卡片、折叠区、Tabs、代码控件、表格、Fields、徽章、步骤和导航列表行统一了 间距、边框与状态反馈。复制提示预留空间,按下按钮时文字不再跟着移动, 触屏控件更容易点中。Paper 去掉了标题右侧的装饰尾线。

短内容还可以选用三种紧凑形式:

  • {.cards .td-cards-list} 或 cards variant="list":带分隔线的资源列表。
  • {.steps .td-steps-compact} 或 steps variant="compact":紧凑的短步骤。
  • {class="td-code-command"}:把单行代码围栏显示为命令条。

不适合命令条的代码块会发出警告并保留普通呈现,不会丢弃内容。 Paper 继续作为默认风格,Slate 保留兼容选择;Ink 与 Terminal 仍是显式启用的 实验性风格。详见组件对照示例。

其他阅读修复

  • 跳转到片段链接时,自动展开目标所在的嵌套标签页。
  • 公式和页面操作控件在窄阅读列中保持正确布局。
  • 弹窗打开时,备用复制方式仍可使用。
  • 调整窗口后,宽图、适配视图与打印输出继续保留可读内容。
  • 新增表格阅读控件补齐全部 32 套界面语言目录。

升级

使用 Hugo Extended 0.168.0 与 Go 1.27.3,模块最低 Go 版本也为 1.27.3。 主题样式继续使用 Hugo 内置 LibSass,普通站点无需安装外部 Sass 编译器或 Node.js。

hugo mod get github.com/pgsty/[email protected]
hugo mod tidy
hugo --environment production --minify --printPathWarnings

提交更新后的 go.mod 与 go.sum。使用 vendor 或主题源码副本的站点需要单独刷新。 保留 Hugo 的 LibSass 弃用告警并审阅其他诊断,不要启用 --panicOnWarning 或 HUGO_PANICONWARNING。

已有内容无需统一迁移。需要留意的一项配置变化是 PlantUML:开启渲染但没有服务端地址时, 现在会使用本地模式;如需完全关闭,请设置 params.plantuml: false。 维护中的站点继续使用 Paper 默认风格和 preset_menu: [paper, slate, ink, terminal]。 升级指南说明了验证与回滚步骤。

表格阅读