毛毛的二三事

下面是这个小窝支持的 11 种互动组件，每个都配一段说明和实例。

1. 提示框 Callout

四种颜色——蓝色说明、紫色技巧、黄色警告、绿色成功，可以自定义标题。

2. 标签页 Tabs

顶部标签切换不同内容，适合把多种方案并列展示。

3. 折叠面板 Accordion

带展开收起按钮，适合放常见问题，默认收起节省空间。

4. 步骤卡片 Steps

带编号的步骤展示，步骤之间有连接线，适合做教程。

5. 代码块复制

把鼠标移到下面代码块上，右上角会出现「复制」按钮，所有代码块自动有这个效果。

const maomao = {
  name: "毛毛",
  breed: "马尔泰",
  birthday: "2024-07-25",
  hello() {
    return "汪汪！";
  },
};

6. B 站视频

在文章里嵌入一个 B 站视频，宽度自适应，默认播放最高清晰度。

7. 引用卡片 Quote

大字引用 + 署名，左侧有一条品牌色竖线，适合放金句。

养狗之后才懂，所谓陪伴，就是你低头时有一双眼睛一直在等你。

— 毛毛的主人

8. 键盘按键 Kbd

把按键显示成键盘按键的样子，可以直接嵌在句子里。

保存文件按 Ctrl + S，搜索按 Cmd + F。

9. 代码对比 Diff

展示代码修改前后的变化，删除的行红色，新增的行绿色。

- 体重：3斤
+ 体重：4斤4两
- 技能：撒娇卖萌
+ 技能：撒娇卖萌、召回

10. 时间轴 Timeline

竖向时间线，每个节点显示时间、标题和说明，适合展示成长路径。

11. 文件下载 Download

带图标的下载按钮，显示文件名和大小。把要下载的文件放在 public/pdf/ 目录，链接写成 /pdf/文件名 就能下载。