警告框
除了基本的 Markdown 语法外，我们还有一个特殊的警告框语法，它通过用一组三个冒号括起文本，后跟一个表示其类型的标签来实现。
示例：
:::note
一些带有 _Markdown_ `语法` 的 **内容** 。查看 [此 `api`](#) 。
:::
:::tip
一些带有 _Markdown_ `语法` 的 **内容** 。查看 [此 `api`](#) 。
:::
:::info
一些带有 _Markdown_ `语法` 的 **内容** 。查看 [此 `api`](#) 。
:::
:::warning
一些带有 _Markdown_ `语法` 的 **内容** 。查看 [此 `api`](#) 。
:::
:::danger
一些带有 _Markdown_ `语法` 的 **内容** 。查看 [此 `api`](#) 。
:::
与 Prettier 配合使用
如果您使用 Prettier 来格式化 Markdown 文件，Prettier 可能会自动将您的代码格式化为无效的警告框语法。为避免此问题，请在起始和结束指令周围添加空行。这也是我们在此处显示的示例在内容周围都有空行的原因。
<!-- Prettier 不会更改此内容 -->
:::note
Hello world
:::
<!-- Prettier 会更改此内容 -->
:::note
Hello world
:::
<!-- 更改为此 -->
::: note Hello world:::
指定标题
您还可以指定一个可选标题。
:::note[您的标题 **带有** 一些 _Markdown_ `语法`！]
一些带有 _Markdown_ `语法` 的 **内容** 。
:::
语法！一些带有 Markdown 语法 的 内容 。
嵌套警告框
警告框可以嵌套。每个父警告框级别使用更多冒号 :。
:::::info[父级]
父级内容
::::danger[子级]
子级内容
:::tip[深层子级]
深层子级内容
:::
::::
:::::
父级内容
子级内容
深层子级内容
使用 MDX 的警告框
您也可以在警告框内使用 MDX！
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
:::tip[在警告框中使用选项卡]
<Tabs>
<TabItem value="apple" label="Apple">这是一个苹果 🍎</TabItem>
<TabItem value="orange" label="Orange">这是一个橙子 🍊</TabItem>
<TabItem value="banana" label="Banana">这是一个香蕉 🍌</TabItem>
</Tabs>
:::
- Apple
- Orange
- Banana
在 JSX 中使用
在 Markdown 之外，您可以使用 @theme/Admonition 组件来获得相同的输出。
import Admonition from '@theme/Admonition';
export default function MyReactPage() {
return (
<div>
<Admonition type="info">
<p>一些信息</p>
</Admonition>
</div>
);
}
可接受的类型与上面相同：note、tip、danger、info、warning。您可以选择通过传递 JSX 元素或字符串或标题来指定图标：
<Admonition type="tip" icon="💡" title="你知道吗...">
使用插件为项目中最常用的 JSX 元素引入更短的语法。
</Admonition>
使用插件为项目中最常用的 JSX 元素引入更短的语法。
自定义警告框
警告框有两种自定义方式： 解析 和 渲染 。
自定义渲染行为
您可以通过 交换 来自定义每个单独警告框类型的渲染方式。您通常可以通过简单的包装器来实现目标。例如，在下面的示例中，我们只交换了 info 警告框的图标。
import React from 'react';
import Admonition from '@theme-original/Admonition';
import MyCustomNoteIcon from '@site/static/img/info.svg';
export default function AdmonitionWrapper(props) {
if (props.type !== 'info') {
return <Admonition title="我的自定义警告框标题" {...props} />;
}
return <Admonition icon={<MyCustomNoteIcon />} {...props} />;
}
自定义解析行为
警告框是使用 Remark 插件 实现的。该插件的设计是可配置的。要为特定内容插件（文档、博客、页面）自定义 Remark 插件，请通过 admonitions 键传递选项。
export default {
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
admonitions: {
keywords: ['note', 'tip', 'info', 'warning', 'danger'],
extendDefaults: true,
},
},
},
],
],
};
该插件接受以下选项：
keywords：可以用作警告框类型的关键字数组。extendDefaults：是否应将提供的选项（例如keywords）合并到现有默认值中。默认为true。
keyword 将作为 Admonition 组件的 type 属性传递。
自定义警告框类型组件
默认情况下，主题不知道如何处理自定义警告框关键字，例如 :::my-custom-admonition。您有责任将每个警告框关键字映射到一个 React 组件，以便主题知道如何渲染它们。
如果您通过以下配置注册了一个新的警告框类型 my-custom-admonition：
export default {
// ...
presets: [
[
'classic',
{
// ...
docs: {
admonitions: {
keywords: ['my-custom-admonition'],
extendDefaults: true,
},
},
},
],
],
};
您可以通过创建以下文件来提供 :::my-custom-admonition 的相应 React 组件（不幸的是，因为它不是 React 组件文件，所以它不可交换）：
import React from 'react';
import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
function MyCustomAdmonition(props) {
return (
<div style={{border: 'solid red', padding: 10}}>
<h5 style={{color: 'blue', fontSize: 30}}>{props.title}</h5>
<div>{props.children}</div>
</div>
);
}
const AdmonitionTypes = {
...DefaultAdmonitionTypes,
// 在这里添加所有自定义警告框类型...
// 您也可以根据需要覆盖默认类型
'my-custom-admonition': MyCustomAdmonition,
};
export default AdmonitionTypes;
现在您可以在 Markdown 文件中使用新的警告框关键字，它将使用您的自定义逻辑进行解析和渲染：
:::my-custom-admonition[我的标题]
它有效！
:::
我的标题
它有效！