文章组件全组件演示：一次跑完 28 个组件

写在前面

这是一篇由 AI 生成的演示文章。选题、结构、示例文案以及配图挑选全部由 AI 完成：它先通过 Halo MCP 读取「文章组件」插件提供的组件清单，再逐个渲染成 HTML，最后原样写入正文。因此你在这里看到的每一个组件，都是插件真实输出的写法。

全文覆盖 28 个组件，阅读时长约 。下面按「信息强调 → 结构组织 → 代码与命令 → 媒体与其他」的顺序依次演示。

一、便签 note

便签适合放补充说明、踩坑记录这类旁注，比提示框更轻。

二、提示框 alert 与行内提示 tip

alert 用 type 切换语义色彩；tip 则给某个词挂一条悬浮说明——把鼠标移到 行内提示 上就能看到效果。

三、引用 quote

放金句、观点或摘录。

四、对话 chat

用气泡还原一段问答，带 self 属性的一侧表示「我方」。

五、时间线 timeline

梳理版本演进或项目里程碑。

六、步骤条 stepper

七、任务清单 task-list

八、卡片列表 card-list

适合并列展示几个要点，而不必写成表格。

九、命令组 command-group 与一键复制 copy

十、对比 compare

十一、折叠 folding 与标签页 tab

十二、分栏 split

十三、进度 progress、状态 status 与结果 result

当前状态：演示通过，全部组件均已渲染。

十四、行内小件：badge、annotation、key、blur、button

给功能标注状态：已上线；给术语加批注：渲染期组件；提示快捷键： 或 ；需要读者主动查看的内容可以先遮住：这段文字默认模糊，读者需要主动查看才能看清，适合放剧透或轻微敏感信息。

也可以直接放一个跳转入口：访问 Halo 官网。

十五、表情时钟 emoji-clock

一个纯装饰性的小挂件，用来观察当前时间：

十六、图片 pic 与 PDF

十七、视频 bilibili

填 bvid 即可嵌入，标题留空时只显示占位。

十八、小结

28 个组件跑完，结论其实很朴素：组件解决的是「表达结构」的问题——哪句是结论、哪段是步骤、哪块可以稍后再看。选择标准只有一条：如果去掉组件后信息依然完整，那它大概率只是装饰。