# 内容组件
> 使用 Oink 提供的本地可复用组件丰富文档。
---
LLMS index: [llms.txt](/llms.txt)
---
OINK 把已经在多个 PGSTY 站点证明具有复用价值的内容组件纳入主题。每个组件都有稳定的作者接口、唯一实例 ID、本地资源和明确的安全边界。站点专用的数据控件仍然留在主题之外。
## 加载模型 {#loading-model}
交互式短代码会标记页面实际使用的功能。OINK 随后为每个所需样式或运行时只加入一次，即使页面中存在多个组件实例也不例外。普通页面不会下载从未使用的组件代码。
相对资源与链接参数会经过 Hugo URL 处理，因此部署到 `baseURL`
子路径时仍然正确。在适用情况下，组件标记还覆盖打印、深色模式、移动端、键盘操作与减少动态效果偏好。
## Asciinema {#asciinema}
使用 `asciinema` 播放保存在本地的 `.cast` 终端录像：
```go-html-template
{{< asciinema file="images/install.cast" speed="1.5" >}}
```
`file` 是必填参数，也可以作为第一个位置参数传入。终端窗口优先显示显式传入的
`title`，没有 `title` 时显示 `file` 的值。支持的选项包括 `title`、`theme`、
`fit`（`width`、`height`、`both` 或 `none`）、`autoplay`、`loop`、`preload`、
`speed`、`startAt`、`poster`、`cols`、`rows`、`idleTimeLimit`、
`pauseOnMarkers`，以及逗号分隔的 `markers`。
为了离线使用，请把 cast 文件保存在本地。只有作者显式提供远程 URL 时，组件才会访问远端。
## 高级可视化 {#advanced-visualizations}
ECharts 与 Infographic 仍然是 Oink 内容组件，但现在分别在“高级特性”中拥有独立章节。本页只保留精简的可复用组件总览，并链接到更丰富的示例。
### Apache ECharts {#echarts}
需要使用结构化 JSON 或 YAML 创建定量图表时，请阅读
[Apache ECharts](/zh/docs/advanced/echarts/)。
[图表示例集](/zh/docs/advanced/echarts/gallery/)提供多种实际渲染模式；
[回调与可信代码](/zh/docs/advanced/echarts/callbacks/)则说明显式的可执行代码边界。
### AntV Infographic {#infographic}
需要创建声明式流程、时间线、循环、网格或漏斗时，请阅读
[使用 AntV 创建信息图](/zh/docs/advanced/infographic/)。独立页面会解释模板语义、主题、本地优先约束与无障碍文字后备。
## 卡片与轮播 {#cards-and-carousel}
`doc-card` 与 `nav-card` 共用同一套卡片实现；`doc-cards` 与 `nav-cards`
可以创建一至四列的响应式卡片组。这些别名让现有站点内容继续使用语义最贴切的名称，同时避免复制标记与样式。
```go-html-template
{{< nav-cards cols="3" >}}
{{< nav-card
title="架构"
link="/zh/docs/about/architecture/"
icon="fa-solid fa-diagram-project"
desc="了解构建与运行时边界。"
>}}
{{< nav-card
title="部署"
link="/zh/docs/deploy/"
badge="仅依赖 Hugo"
>}}发布静态输出。{{< /nav-card >}}
{{< /nav-cards >}}
```
卡片接受 `title`、`link`、`image`、`alt`、`icon`、`desc`、`accent` 与
`badge`。卡片正文可以包含 Markdown 链接。`desc` 中的 `{version}`
之类 token，在站点参数存在同名值时会被替换。
把文档卡片放进 `doc-carousel`，即可生成无障碍横向轮播：
```go-html-template
{{< doc-carousel label="OINK 工作流" >}}
{{< doc-card title="编写" >}}创建成对内容。{{< /doc-card >}}
{{< doc-card title="构建" >}}运行 Hugo Extended。{{< /doc-card >}}
{{< doc-card title="验证" >}}检查静态站点。{{< /doc-card >}}
{{< /doc-carousel >}}
```
`label`
提供轮播的无障碍名称。方向键与可见的上一个/下一个按钮都能移动轨道；启用减少动态效果偏好时，不必要的动画会被禁用。
## 折叠块 {#details}
`details` 输出原生 `details` 与 `summary` 元素：
```go-html-template
{{% details title="为什么只依赖 Hugo？" closed="false" %}}
已经提交的浏览器资源让消费端构建保持可复现。
{{% /details %}}
```
为什么只依赖 Hugo？
已经提交的浏览器资源让消费端构建保持可复现。
`title` 设置摘要。折叠块默认关闭；设置 `closed=false` 可让它初始展开。
## 标签页 {#tabs}
OINK 沿用 Docsy 的 `tabpane` 与 `tab` 创作模型，同时保留导入站点依赖的
`selected=true` 与空白处理行为：
```go-html-template
{{< tabpane text=true >}}
{{< tab header="本地" selected=true >}}
使用完整本地主题构建。
{{< /tab >}}
{{< tab header="Cloudflare" >}}
从源分支运行同一条 Hugo 命令。
{{< /tab >}}
{{< /tabpane >}}
```
使用完整本地主题构建。
从源分支运行同一条 Hugo 命令。