本文展示博客新支持的富文本功能：Callout 提示块、折叠内容、脚注增强和 ECharts 交互图表。

Callout 提示块

Callout 是一种突出重要信息的视觉方式，支持四种类型：

示例

  • tip - 提示信息
  • info - 背景信息
  • warning - 注意事项
  • danger - 危险警告
提示
当你学习新概念时，尝试用自己的话复述一遍，这能加深理解。
背景信息
Transformer 架构最早由 Google 在 2017 年的论文《Attention Is All You Need》中提出。
注意事项
这个配置选项在生产环境中不建议修改，可能导致服务不稳定。
危险警告
执行此操作将删除所有数据，且无法恢复。请务必确认已备份重要文件。

用法

1
2
3

{{< callout "tip" "标题" >}}
内容
{{< /callout >}}

类型可选：tip、info、warning、danger

折叠内容

适用于隐藏较长但需要时可见的内容：

点击展开：分布式训练的核心挑战

分布式训练面临三个核心挑战：

  1. 通信开销 - 多节点间需要同步梯度，带宽成为瓶颈
  2. 负载均衡 - 不同计算任务耗时不同，需要动态调整
  3. 容错处理 - 长训练任务中节点故障如何恢复
1
2
3
4

# 示例：简单的梯度同步
for param in model.parameters():
    dist.all_reduce(param.grad)
    param.grad /= world_size
点击展开：矩阵乘法优化技巧

矩阵乘法是深度学习中最耗时的操作之一。以下是几个常用优化技巧：

  • Tiling - 将大矩阵分块以提高缓存命中率
  • 向量化 - 使用 SIMD 指令一次处理多个数据
  • 混合精度 - 使用 FP16/BF16 减少计算量

用法

1
2
3
4
5
6

<details>
<summary>点击展开：标题</summary>

这里是隐藏的内容...

</details>

脚注增强

脚注用于添加补充说明而不打断正文流1：

分布式系统的 CAP 理论指出，一个分布式系统无法同时满足一致性（Consistency）、可用性（Availability）和分区容错性（Partition tolerance）2。

当你设计系统时，需要根据业务场景权衡这三个特性。比如对于金融交易系统，一致性是首要考虑3。

ECharts 交互图表

ECharts 支持多种交互式图表：

1. 折线图 - 训练曲线

加载图表中...

2. 柱状图 - 性能对比

加载图表中...

3. 饼图 - 资源分配

加载图表中...

用法

1
2
3

{{< echarts "chart-id" "400px" >}}
{"xAxis": {"type": "category", "data": ["A", "B"]}, "series": [{"type": "line", "data": [1, 2]}]}
{{< /echarts >}}

总结

以上功能可以显著提升技术博客的表达能力：

功能适用场景类型
Callout重点提示、警告、信息视觉强调
折叠内容技术细节、代码、扩展阅读内容组织
脚注参考文献、术语解释学术规范
ECharts数据分析、性能对比交互图表

有问题或建议？欢迎反馈！

  1. 脚注会自动编号并显示在文章末尾。 ↩︎

  2. Eric Brewer, “Towards Robust Distributed Systems”, PODC, 2000. ↩︎

  3. 在证券交易系统中，任何不一致都可能导致交易错误，因此通常选择 CP 模型。 ↩︎