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

Tue, 27 Oct 2026 02:50:00 +0800

比较两个数字、追踪一个分支、改变假设看结果，需要不同的表达。这份模板把实际效果和复制写法放在一起：先判断读者要完成什么，再取相应组件。

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

本次接入参考了 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 >}}

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

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

方案甲：按次付费

固定成本 0 元，每次 8 元。起步支出低，总成本随次数增长较快。

方案乙：固定加按次

固定成本 200 元，每次 3 元。先承担固定支出，次数足够多才能体现低单价优势。

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

默认处理数量: 20 次; 下面比较器的初始情景

两方案成本相等: 40 次; 由 8q = 200 + 3q 算得

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

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

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

数量	方案甲总成本	方案乙总成本	本模型中较低的一项
20 次	160 元	260 元	方案甲
40 次	320 元	320 元	相同
100 次	800 元	500 元	方案乙

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

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

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

相同任务量的假设耗时 （分钟）

来源与口径：教学构造数据；任务量相同，未做性能测试

查看完整数据

相同任务量的假设耗时（分钟）
项目	数值
手工处理	40
脚本辅助	16
模板复用	10

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

四轮假设耗时变化 （分钟）

来源与口径：教学构造数据；同一示例任务，轮次等距，不代表真实测试

查看完整数据

四轮假设耗时变化（分钟）
项目	数值
第 1 轮	40
第 2 轮	28
第 3 轮	16
第 4 轮	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$ 为甲、乙总成本，单位为元：

$$ C_A(q)=8q,\qquad C_B(q)=200+3q $$

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

同一数量下比较两种成本

来源与口径：教学假设；不含税费、服务差异和阶梯折扣；总成本 = 固定成本 + 单价 × 数量。单位：元。

默认数量 20：按次付费 160 元；固定加按次 260 元；

固定参数与端点成本（元）
方案	固定成本	单价	数量 0	数量 100
按次付费	0	8	0	800
固定加按次	200	3	200	500

默认 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 >}}

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

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

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

无法交互或打印时还能看到什么

静态数据图已写入生成的 HTML；成本比较器保留默认结果、公式与端点表；流程图保留源码和相邻解释；网页实验保留正文摘要。

打印时隐藏交互按钮与实验 iframe，保留正文、静态数据图及已绘制的流程图。流程图未加载时，仍有文字与源码。

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

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

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

参考资料

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

写作附记

原始提示词

任务很大，你先深入分析，分批逐个提交。 OpenAI 网页版 chat 模式新支持了很多文字的排版模式、针对部分功能，还能绘制流程图、能拖动的网页 https://chatgpt.com/share/6adf9c49-28f8-83ea-86ef-33f54f4e04a2，分析如何合理引入到我的博客里面，开发好了以后，f:\dev\notebook\content\post\2026\10 10月份的文件中写一篇作为演示的模板，展示新的功能。f:\dev\notebook.agents\skills\blog-writer skill 也需要学会这些新功能，后续写作改用的地方就使用，积极主动的使用：新的数据展示方案、流程图，小的网页组件等等重写这三月的文章，注意，如果不是 AI 写的，不用重写

本文数据与任务坐标均为演示输入。换成真实数据时，应补充获取日期、统计区间、单位及来源链接。 ↩︎

博客写作 on 向叔记事簿

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

先判断读者要做什么

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

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

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

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

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

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

参考资料

原始提示词