让博客里的数据和流程动起来

博客正文和学习区共用这些富内容表达；学习内容也可以按同样方式使用提示块、数据图、流程图和本地实验。资源须随对应内容一起保存，不能只复制调用标签。

本次接入参考了 ChatGPT 分享对话 中的卡片、曲线和滑块。本站使用 Hugo 组件，分享页的 box、grid、slider 语法不能直接粘贴。

先判断读者要做什么

连续论述用正文；查精确值用表格，看数量差异用图；追踪步骤与分支用流程图；需要改变假设时再用交互。下面的图把选择过程展开，图中的每条路径也已在这句话中说明。

flowchart TD
    accTitle: 按读者任务选择表达方式
    accDescr: 连续论述用正文，数量比较用表格或数据图，步骤与分支用流程图，改变假设用交互组件。
    A[读者需要理解什么] --> B{主要任务}
    B -->|连续论述| C[自然段与必要强调]
    B -->|比较数量| D[表格或数据图]
    B -->|追踪步骤与分支| E[流程图]
    B -->|改变假设看结果| F[交互组件]
    D --> G[保留单位与来源]
    F --> H[保留默认结果与边界]

复用时在文章头信息中设置 mermaid: true，使用上面的 mermaid 代码围栏。短标签放图中，解释留在正文。按钮可缩放、复位，按住画布可移动；聚焦画布后，方向键移动，+、- 缩放，0 复位。手机在画布内拖图，画布外滚动文章。拖动只改变查看位置。

用提示与卡片突出少量信息

粗体便于回看判断，斜体标注口径，行内代码区分参数。口径会改变结论时，用上面的提示块单独说明；kind 可选 note、tip、warning，标题须写明内容，不能只靠颜色传意。

{{< callout kind="warning" title="口径提醒" >}}
这里写会影响结论的限制条件。
{{< /callout >}}

当一句话已经足够说明关系时，就让它保持一句话。

少量方案适合并排卡片，但比较字段要相同。假设两种付费办法都服务于同一项工作：

指标卡用于回看关键数字，不能省掉单位和口径。

{{< cards >}}
{{< card title="方案甲" >}}同一组比较字段。{{< /card >}}
{{< card title="方案乙" >}}同一组比较字段。{{< /card >}}
{{< /cards >}}

{{< metric label="处理数量" value="20" unit="次" note="教学假设" >}}

需要逐项查值时，表格比继续增加卡片方便：

40 次来自本页固定假设，并非通用门槛。服务质量、税费和折扣未进入模型，不能由表中金额推断。

用数据图看差异，用数据表查值

假设处理同一份材料，三种办法分别耗时 40、16、10 分钟。柱状图便于看差距，图上数值和下方数据表用于核对。

有顺序的类别可用折线图。下图四轮假设耗时为 40、28、16、10 分钟；横轴按轮次等距排列，不代表真实日历时间，也不证明实际效率提高。

两图的图形、完整数据表与来源共用 JSON；手机可在图内横向滑动，关闭 JavaScript 后图仍存在。将下面内容保存为文章目录中的 duration.json：

{
  "title": "相同任务量的假设耗时",
  "unit": "分钟",
  "source": "教学构造数据；任务量相同，未做性能测试",
  "rows": [
    {"label": "手工处理", "value": 40},
    {"label": "脚本辅助", "value": 16},
    {"label": "模板复用", "value": 10}
  ]
}

正文这样调用；折线图另用配套的 rounds.json：

{{< data-chart src="duration.json" type="bar" >}}
{{< data-chart src="rounds.json" type="line" >}}

图表支持负值、全零值，每图 2～24 项，更多数据先汇总。折线点是等距类别，不能用来冒充不等间隔的精确时间轴。

多方交互要交代谁先做什么

流程图突出分支；时序图适合多个参与者的往来。这里作者先写数据、假设与默认结论，博客展示静态结果，读者调整参数后，博客再更新数字和图形。

sequenceDiagram
    accTitle: 作者、博客与读者的交互顺序
    participant A as 作者
    participant B as 博客
    participant C as 读者
    A->>B: 写下数据、假设与默认结论
    B->>C: 展示正文与静态结果
    C->>B: 调整参数
    B-->>C: 更新数字和图形

两种 Mermaid 图都保留相邻文字说明，加载失败时保留源码；不懂源码也能继续阅读。上面的围栏可直接复用，文章仍需开启 mermaid: true。

结果会随假设改变时，再加入滑块

回到付费例子。令 \(q\) 为处理次数，\(C_A\)、\(C_B\) 为甲、乙总成本，单位为元：

文章头信息设置 math: true 可渲染公式。下面滑块改变次数，同时更新金额、差额与曲线标记；聚焦滑块后可用方向键调整，Home、End 跳到端点。

默认 20 次，甲 160 元、乙 260 元，甲少花 100 元。40 次时均为 320 元，此后乙较低；端点 0 次为 0 元与 200 元，100 次为 800 元与 500 元。交互帮助观察数量怎样改变比较结果；这些静态数字也让无法操作的读者看懂关系。

{{< cost-compare src="costs.json" >}}

将配套数据放在同目录的 costs.json：

{
  "title": "同一数量下比较两种成本",
  "unit": "元",
  "source": "教学假设；不含税费、服务差异和阶梯折扣",
  "quantity": {"label": "处理数量", "min": 0, "max": 100, "step": 1, "value": 20},
  "plans": [
    {"name": "按次付费", "fixed": 0, "rate": 8},
    {"name": "固定加按次", "fixed": 200, "rate": 3}
  ]
}

组件只计算“固定成本＋单价×数量”。阶梯计费、复利、期权收益都不能通过改名套入；模型不同，需另用专用实验。

专用实验连同网页一起复制

需要同时改变两个维度时，可以嵌入本地网页。下例把虚构任务放到“紧迫度—影响程度”平面：拖动圆点会同步改变坐标，也可用两个滑块完成相同操作，支持键盘使用。

将配套 priority-lab.html 整份复制到文章目录，再嵌入：

{{< interactive src="priority-lab.html" title="任务位置实验" height="660" >}}
先用文字写出默认情景和实验边界。
{{< /interactive >}}

点击“打开交互实验”展开；桌面可拖动网页框右下角调整高度。网页在独立沙箱中运行，不改变博客导航、正文或字号。它跟随系统深浅色，不跟随博客手动配色；打不开时，上面的默认情景仍可阅读。

折叠补充过程，保留阅读退路

关键结论与限制保持展开，细节可放折叠块：

{{< details title="查看复算过程" >}}
这里写详细推导和补充边界。
{{< /details >}}

title 应说明展开后能看到什么。简短来源补充可用脚注¹；目录仍由普通二、三级标题生成，无须重复卡片标题。

复制时把 Markdown 和所用 JSON、HTML 放在同一文章目录，不能只取组件调用。代码框里的 shortcode 已做 Hugo 注释转义，页面展示的是可复制写法；实际演示使用正常标签。下一篇只取读者需要的表达，并把默认结果留在正文中。

参考资料

• 本次参考的 ChatGPT 分享对话：用于辨认卡片、图形和滑块的表达方式，未把其中的金融数据搬入本文。
• Hugo shortcode 模板：本文组件的模板机制。
• Hugo 内容类型：将文章中的 HTML 实验按资源发布。
• Mermaid 使用说明：文本图形的渲染方式。