分类: 组件

  • 使用 AntV 创建信息图

    分类:

    infographic 短代码使用 Oink 随主题分发的固定版本 AntV Infographic 运行时渲染 DSL。它适合展示流程、时间线、循环、漏斗、路线图与紧凑信息摘要；如果统计图显得过于生硬，可以选择信息图。 DSL 会作为数据序列化，不会作为任意 HTML 或可执行代码插入页面。浏览器运行时把它转换成 SVG，并且只在实际使用该短代码的页面加载。 快速开始 GO-HTML-TEMPLATE {{< infographic >}} infographic …

    infographic 短代码使用 Oink 随主题分发的固定版本 AntV Infographic 运行时渲染 DSL。它适合展示流程、时间线、循环、漏斗、路线图与紧凑信息摘要；如果统计图显得过于生硬，可以选择信息图。 DSL 会作为数据序列化，不会作为任意 HTML 或可执行代码插入页面。浏览器运行时把它转换成 SVG，并且只在实际使用该短代码的页面加载。 快速开始 GO-HTML-TEMPLATE {{< infographic >}} infographic …

  • Apache ECharts

    分类:

    echarts 短代码使用 Oink 随主题分发的固定版本 Apache ECharts 运行时渲染选项对象。Hugo 在构建阶段解析 JSON 或 YAML，把结果序列化到页面中，并且只在实际使用该组件的页面加载 ECharts。 当定量图表需要精确控制坐标轴、视觉编码、提示或序列时，请使用 ECharts。图表旁边仍要提供文字摘要，不能让结论依赖颜色、指针交互或 JavaScript。 快速开始 GO-HTML-TEMPLATE {{< echarts height="300px" >}} …

    echarts 短代码使用 Oink 随主题分发的固定版本 Apache ECharts 运行时渲染选项对象。Hugo 在构建阶段解析 JSON 或 YAML，把结果序列化到页面中，并且只在实际使用该组件的页面加载 ECharts。 当定量图表需要精确控制坐标轴、视觉编码、提示或序列时，请使用 ECharts。图表旁边仍要提供文字摘要，不能让结论依赖颜色、指针交互或 JavaScript。 快速开始 GO-HTML-TEMPLATE {{< echarts height="300px" >}} …

  • 图表与公式

    分类:

    OINK 支持 KaTeX、Mermaid、Markmap、PlantUML 和 Diagrams.net。KaTeX、Mermaid 与 Markmap 使用构建期能力或主题随附的同源资源。PlantUML 和 Diagrams.net 编辑器需要显式配置服务端点；主题不会静默使用公共服务。 使用 KaTeX 支持 LaTeX KaTeX 可以在 Web 上渲染 TeX 数学公式。Hugo 内置的 KaTeX 支持可以在构建期间渲染公式，因此读者不需要连接远程数学服务。 行内公式 行内公式使用 …

    OINK 支持 KaTeX、Mermaid、Markmap、PlantUML 和 Diagrams.net。KaTeX、Mermaid 与 Markmap 使用构建期能力或主题随附的同源资源。PlantUML 和 Diagrams.net 编辑器需要显式配置服务端点；主题不会静默使用公共服务。 使用 KaTeX 支持 LaTeX KaTeX 可以在 Web 上渲染 TeX 数学公式。Hugo 内置的 KaTeX 支持可以在构建期间渲染公式，因此读者不需要连接远程数学服务。 行内公式 行内公式使用 …

  • 短代码

    分类:

    短代码用于表达普通 Markdown 无法承载的行为。OINK 保留 Docsy 核心组件，并新增本地提供的图表、终端录像、信息图、轮播、卡片和折叠组件。浏览器运行时只在实际使用它们的页面加载。 标题、正文、列表、链接、表格和图片应优先使用 Markdown。短代码一旦投入使用，就成为内容 API 的一部分：修改名称或参数可能破坏所有调用它的页面。 短代码分隔符 Hugo 支持两种形式： {{< name >}} 使用标准分隔符，原样传递内部内容； {{% name %}} 使用 …

    短代码用于表达普通 Markdown 无法承载的行为。OINK 保留 Docsy 核心组件，并新增本地提供的图表、终端录像、信息图、轮播、卡片和折叠组件。浏览器运行时只在实际使用它们的页面加载。 标题、正文、列表、链接、表格和图片应优先使用 Markdown。短代码一旦投入使用，就成为内容 API 的一部分：修改名称或参数可能破坏所有调用它的页面。 短代码分隔符 Hugo 支持两种形式： {{< name >}} 使用标准分隔符，原样传递内部内容； {{% name %}} 使用 …

  • Image Zoom

    分类:

    Image Zoom 使用一个原生对话框渐进增强符合条件的内容图片。对于在正文宽度下难以看清细节的截图与架构图，它尤其有用。没有 JavaScript 或对话框支持时，原图片仍然完整可读。 适用场景 当读者确实需要放大查看原图时再启用 Zoom。如果放大仍然不能解决可读性问题，应提供专门裁剪的图片或更清晰的图表。装饰图标、正文中的小型 Logo 与带链接缩略图应保留原有行为。 启用功能 Image Zoom 默认关闭。在 Hugo 配置中为全站启用： YAML params: ui: …

    Image Zoom 使用一个原生对话框渐进增强符合条件的内容图片。对于在正文宽度下难以看清细节的截图与架构图，它尤其有用。没有 JavaScript 或对话框支持时，原图片仍然完整可读。 适用场景 当读者确实需要放大查看原图时再启用 Zoom。如果放大仍然不能解决可读性问题，应提供专门裁剪的图片或更清晰的图表。装饰图标、正文中的小型 Logo 与带链接缩略图应保留原有行为。 启用功能 Image Zoom 默认关闭。在 Hugo 配置中为全站启用： YAML params: ui: …

  • Gallery

    分类:

    Gallery 使用响应式网格组织相关图片。它以静态内容为基础：没有 JavaScript 时，图片、替代文字与说明文字仍然完整。启用 Image Zoom 后，Gallery 会复用同一个对话框，而不会加载另一套灯箱。 适用场景 Gallery 适合比较少量截图、状态或相关视觉示例。如果顺序和对比不重要，请使用单张图片。如果内容确实需要幻灯片导航，而且隐藏非当前条目可以接受，请使用 Carousel。 快速开始 源码 GO-HTML-TEMPLATE {{< gallery columns=3 …

    Gallery 使用响应式网格组织相关图片。它以静态内容为基础：没有 JavaScript 时，图片、替代文字与说明文字仍然完整。启用 Image Zoom 后，Gallery 会复用同一个对话框，而不会加载另一套灯箱。 适用场景 Gallery 适合比较少量截图、状态或相关视觉示例。如果顺序和对比不重要，请使用单张图片。如果内容确实需要幻灯片导航，而且隐藏非当前条目可以接受，请使用 Carousel。 快速开始 源码 GO-HTML-TEMPLATE {{< gallery columns=3 …

  • FileTree

    分类:

    FileTree 用于解释仓库或目录结构中与读者有关的部分。交互式 HTML 使用原生展开控件表示目录，所有输出格式都会保留完整嵌套结构。 适用场景 FileTree 适合安装指南、架构概览与贡献说明中的精选结构。如果需要逐字复制命令输出，请使用代码块。对于自动生成或频繁变化的目录树，应使用正文描述，不要提交很快就会过时的大型快照。 快速开始 源码 GO-HTML-TEMPLATE {{< filetree label="仓库结构" >}} {{< filetree/folder …

    FileTree 用于解释仓库或目录结构中与读者有关的部分。交互式 HTML 使用原生展开控件表示目录，所有输出格式都会保留完整嵌套结构。 适用场景 FileTree 适合安装指南、架构概览与贡献说明中的精选结构。如果需要逐字复制命令输出，请使用代码块。对于自动生成或频繁变化的目录树，应使用正文描述，不要提交很快就会过时的大型快照。 快速开始 源码 GO-HTML-TEMPLATE {{< filetree label="仓库结构" >}} {{< filetree/folder …

  • 组件参考

    分类:

    OINK 的组件分两类：每天都会用到的写作原语，和特定场景才需要的大型组件。跨多个页面的完整出版工作流位于场景组件。 所有组件都遵循同一套契约：语义化 HTML、非交互组件不加载 JavaScript、在打印和 Markdown 输出下都有明确的呈现方式、参数非法时构建直接失败而不是静默降级。 日常写作 组件 用途 需要 JS 代码块与代码分组 文件名、复制、折叠、同步标签页 有代码块的页面 Badge Beta、Deprecated 之类的状态标签 否 Kbd 键盘快捷键 否 Fields 配 …

    OINK 的组件分两类：每天都会用到的写作原语，和特定场景才需要的大型组件。跨多个页面的完整出版工作流位于场景组件。 所有组件都遵循同一套契约：语义化 HTML、非交互组件不加载 JavaScript、在打印和 Markdown 输出下都有明确的呈现方式、参数非法时构建直接失败而不是静默降级。 日常写作 组件 用途 需要 JS 代码块与代码分组 文件名、复制、折叠、同步标签页 有代码块的页面 Badge Beta、Deprecated 之类的状态标签 否 Kbd 键盘快捷键 否 Fields 配 …

  • Fields 与 Field

    分类:

    fields 与 field 子项用于记录具名值及其元数据。组件使用响应式定义列表，而不是固定宽度的大表格，因此长名称和长描述在窄屏上仍然可用。 适用场景 Fields 适合配置键、命令或 API 参数、对象属性与响应字段。如果读者需要按相同列横向比较大量条目，请使用普通 Markdown 表格；如果条目表达的是步骤而不是定义，请使用正文。 快速开始 源码 GO-HTML-TEMPLATE {{< fields label="搜索配置" >}} {{< field …

    fields 与 field 子项用于记录具名值及其元数据。组件使用响应式定义列表，而不是固定宽度的大表格，因此长名称和长描述在窄屏上仍然可用。 适用场景 Fields 适合配置键、命令或 API 参数、对象属性与响应字段。如果读者需要按相同列横向比较大量条目，请使用普通 Markdown 表格；如果条目表达的是步骤而不是定义，请使用正文。 快速开始 源码 GO-HTML-TEMPLATE {{< fields label="搜索配置" >}} {{< field …

  • Kbd

    分类:

    Kbd 用于把实际按键和快捷键与周围正文区分开。它输出语义化 HTML，在 Markdown 与打印中仍然清晰，而且不需要 JavaScript。 适用场景 Kbd 适合读者需要按下的按键，包括多键快捷键。命令、选项名或读者需要输入的文本应使用行内代码，因为它们并不是物理或虚拟按键。 快速开始 源码 GO-HTML-TEMPLATE 按 {{< kbd "Ctrl" "K" >}} 打开搜索。 按 {{< kbd "⌘" "Shift" "P" >}} 打开命令面板。 渲染结果 按 Ctrl+ …

    Kbd 用于把实际按键和快捷键与周围正文区分开。它输出语义化 HTML，在 Markdown 与打印中仍然清晰，而且不需要 JavaScript。 适用场景 Kbd 适合读者需要按下的按键，包括多键快捷键。命令、选项名或读者需要输入的文本应使用行内代码，因为它们并不是物理或虚拟按键。 快速开始 源码 GO-HTML-TEMPLATE 按 {{< kbd "Ctrl" "K" >}} 打开搜索。 按 {{< kbd "⌘" "Shift" "P" >}} 打开命令面板。 渲染结果 按 Ctrl+ …

  • Badge

    分类:

    Badge 用于在功能、选项或版本名称旁边放置简短状态。作者选择语义 tone，Oink 再把它映射到主题 token，确保浅色与深色模式下都有足够的对比度。 适用场景 Badge 适合 Beta、New、Experimental 与 Deprecated 等生命周期状态。标签文字必须明确：颜色只能补充含义，不能代替文字。如果状态需要解释、操作说明或截止日期，请改用普通正文或提示框。 快速开始 源码 GO-HTML-TEMPLATE {{< badge text="Beta" …

    Badge 用于在功能、选项或版本名称旁边放置简短状态。作者选择语义 tone，Oink 再把它映射到主题 token，确保浅色与深色模式下都有足够的对比度。 适用场景 Badge 适合 Beta、New、Experimental 与 Deprecated 等生命周期状态。标签文字必须明确：颜色只能补充含义，不能代替文字。如果状态需要解释、操作说明或截止日期，请改用普通正文或提示框。 快速开始 源码 GO-HTML-TEMPLATE {{< badge text="Beta" …

  • 代码块与代码组

    分类:

    OINK 在不替换 Chroma、也不引入浏览器端高亮器的前提下增强 Hugo 普通围栏代码块。服务器输出完整代码与外壳；按页面加载的小型脚本只负责复制、视觉折叠与标签状态。 增强围栏 在 Hugo 围栏属性列表中补充元数据。没有属性的围栏也会获得同一套响应式外壳与默认复制行为。filename 会增加可见标题栏；title 是它的兼容别名，同时设置两者会导致构建失败。两者都没有时，OINK 使用紧凑浮层，不绘制空标题栏。 作者写法 content/docs/example.md …

    OINK 在不替换 Chroma、也不引入浏览器端高亮器的前提下增强 Hugo 普通围栏代码块。服务器输出完整代码与外壳；按页面加载的小型脚本只负责复制、视觉折叠与标签状态。 增强围栏 在 Hugo 围栏属性列表中补充元数据。没有属性的围栏也会获得同一套响应式外壳与默认复制行为。filename 会增加可见标题栏；title 是它的兼容别名，同时设置两者会导致构建失败。两者都没有时，OINK 使用紧凑浮层，不绘制空标题栏。 作者写法 content/docs/example.md …