容器

使用标注框来突出提示、警告和重要信息

jet-w
4min

容器

容器是特殊的标注框,用于突出显示重要信息。

基本语法

::: type
内容放在这里
:::

容器类型

提示 (Tip)

用于有用的建议:

::: tip
这是给读者的一个有用提示。
:::
Tip

这是给读者的一个有用提示。

信息 (Info)

用于补充说明:

::: info
这里是一些额外的信息。
:::
Info

这里是一些额外的信息。

警告 (Warning)

用于需要注意的事项:

::: warning
请小心这个操作。
:::
Warning

请小心这个操作。

危险 (Danger)

用于严重警告:

::: danger
此操作无法撤销!
:::
Danger

此操作无法撤销!

备注 (Note)

用于一般性说明:

::: note
给读者的一个旁注。
:::
Note

给读者的一个旁注。

自定义标题

在类型后添加自定义标题:

::: tip 专业建议
这个容器有一个自定义标题。
:::
专业建议

这个容器有一个自定义标题。

::: warning 安全提醒
始终验证用户输入!
:::
安全提醒

始终验证用户输入!

丰富内容

容器内支持完整的 Markdown:

::: info 功能特性
这个博客支持:
- **Markdown** 格式
- `代码` 片段
- [链接](https://example.com)
:::
功能特性

这个博客支持:

  • Markdown 格式
  • 代码 片段
  • 链接

折叠面板 (Details)

创建可展开的区域:

::: details 点击展开
这些内容默认是隐藏的。
你可以在这里放很多内容。
:::
点击展开

这些内容默认是隐藏的。

你可以在这里放很多内容。

折叠面板中的代码

::: details 查看解决方案
function solve() {
  return 42;
}
:::
查看解决方案
function solve() {
  return 42;
}

最佳实践

何时使用容器
  • tip - 有用的建议、最佳实践
  • info - 背景信息、上下文
  • warning - 潜在问题、需要注意的事项
  • danger - 严重错误、数据丢失风险
  • note - 一般性说明
  • details - 可选内容、长示例
不要过度使用

太多容器会分散注意力。谨慎使用,只用于真正重要的信息。

快速参考

类型语法用途
tip tip有用的建议
info info额外信息
warning warning注意事项
danger danger严重警告
note note旁注
details details可折叠内容

下一步:掌握 代码块 来展示精美的代码片段。