Skip to Content
🎉 Nextra 4.0 已发布。Dima Machina 正在 寻找新的工作或咨询机会
Documentation指南GitHub 警告语法

GitHub 警告语法

nextra-theme-docsnextra-blog-theme 支持将 GitHub 警告语法 替换为 .md/.mdx 文件中的 <Callout> 组件。

用法

Markdown
> [!NOTE] > > 用户在浏览内容时应该知道的有用信息。 > [!TIP] > > 关于如何更好或更轻松完成事情的有用建议。 > [!IMPORTANT] > > 用户实现目标所需了解的关键信息。 > [!WARNING] > > 需要用户立即注意以避免问题的紧急信息。 > [!CAUTION] > > 提醒某些操作可能带来的风险或负面结果。

示例

Note

用户在浏览内容时应该知道的有用信息。

💡
Tip

关于如何更好或更轻松完成事情的有用建议。

🚫
Important

用户实现目标所需了解的关键信息。

⚠️
Warning

需要用户立即注意以避免问题的紧急信息。

🚫
Caution

提醒某些操作可能带来的风险或负面结果。

在自定义主题中使用

如果你想在自己的主题和自己的 <Callout> 组件中使用此功能:

创建 <Blockquote> 组件

要创建 <Blockquote> 组件,首先从 nextra/components 导入 withGitHubAlert。然后通过调用 withGitHubAlert 函数创建 <Blockquote> 组件。

第一个参数应该是处理 GitHub 警告语法的 React HOC 组件,第二个参数应该是你的标准 <blockquote> 组件。

type 属性可以是以下之一:'note' | 'tip' | 'important' | 'warning' | 'caution'

import { withGitHubAlert } from 'nextra/components' const Blockquote = withGitHubAlert(({ type, ...props }) => { return <MyCalloutComponent type={type} {...props} /> }, MyBlockquoteComponent)

提供 <Blockquote>useMDXComponents

要使 <Blockquote> 组件可用,你应该将其集成到 useMDXComponents 函数中:

mdx-components.jsx
export function useMDXComponents(components) { return { blockquote: Blockquote, ...components } }
Last updated on