内容组件图鉴

提示类

Alert

提醒

你好，我是默认提示。

带标题的信息

默认插槽里支持链接、粗体和 行内代码。

扁平风格

通过 flat 属性切换为扁平风格，card 是默认的卡片风格。

mdc

::alert{type="info" title="带标题的信息"}
支持 [链接](#alert)、**粗体** 和 `行内代码`。
::

Tip / Quote

行内小提示：:tip我是一条小提示，也可以没有图标只有提示。

引用组件可以自定义图标，图标也可以是 Emoji 或颜文字。

ヾ(•ω•`)o

图标插槽同样支持任意内容。

Badge

纯文本带链接方形 GitHub 头像自动识别

mdc

:badge[带链接]{link="#badge"} :badge[方形]{square}

布局类

Tab

选项卡用于在「效果」和「源码」之间切换，本站多处演示都用了它。

MDC 基本语法

content.nuxt.com

CardList

把普通列表渲染成卡片
- 支持多级嵌套
- 适合罗列特性

Folding

默认展开的折叠

折叠内部可以再次嵌套组件：

嵌套时注意缩进

在插槽内使用 #slot 语法必须正确缩进，否则会解析失败。

mdc

::folding{open title="默认展开的折叠"}
内容……
::

Timeline

第一步: 安装依赖并初始化项目。
第二步: 填写站点配置与内容。
第三步: 构建并部署。

Chat

2026-10-03 09:20:00
: 这个组件可以还原即时通讯的排版。
纸鹿: 还支持昵称和撤回提示。
纸鹿撤回了一条消息

交互类

Copy

pnpm init-project 这样带复制按钮的行内代码，也可以做成整块命令：

$pnpm init-project # 输入 confirm 确认

https://cdemo.iicemeta.com/atom.xml

Key

按 Ctrl / Cmd + K 可以唤起全站搜索，键位提示就是 Key 组件渲染的：:key{code="Control" icon} K。

EmojiClock

现在大概几点？:emoji-clock (半小时) 🕘 (五分钟) 🕤 (指定时间)

Blur

被遮住的文字，鼠标悬浮才能看清。

链接与图片

LinkCard / LinkBanner

卡片式链接

适合放在正文里指向站内外资源。

Pic

提示类