Docusaurus 的 md 文档中导入组件内容！图文教程

Docusaurus 提供了灵活且简便的方式在 Markdown 文档中嵌入 React 组件，使文档更具交互性和可定制性。本文将探讨三种主要方法：通过导入_xx.mdx文件、通过组件方式导入并使用别名优化路径，以及通过全局配置在 MDX 文件中注册使用组件。

主页 > 博客 > Docusaurus 的 md 文档中导入组件内容！图文教程

Docusaurus 提供了灵活且简便的方式在 Markdown 文档中嵌入 React 组件，使文档更具交互性和可定制性。本文将探讨三种主要方法：通过导入_xx.mdx文件、通过组件方式导入并使用别名优化路径，以及通过全局配置在 MDX 文件中注册使用组件。这些方法为开发者提供了多样选择，使 React 组件在文档中的集成变得轻松而高效。详细步骤和示例可参考以下总结。

方法 1：通过 `_xx.mdx` 文件导入

官网链接：https://docusaurus.io/zh-CN/docs/next/markdown-features/react#importing-markdown

定义内容：

// _ads.mdx

const Ads = () => (<div>This is my React component!哈哈哈哈</div>) ;

export default Ads;

按照惯例，使用 _ 文件名前缀不会创建任何文档页面，这意味着 Markdown 文件是“部分”文件，这可以供其他文件导入。

导入内容并注册使用：

import Ads from './_ads.mdx';

<Ads></Ads>

方法 2：通过组件方式导入

官网链接：https://docusaurus.io/zh-CN/docs/next/markdown-features/react#importing-components

定义组件：

// ads.js
import React from 'react';

const Ads = () => {
  return (<div>This is my React component!哈哈哈哈是吧</div>)
};

export default Ads;

在 Morkdown 中导入组件，并注册使用：

import Ads from '@site/src/components/ads';

<Ads></Ads>

@site 别名指向你网站的目录，通常是 docusaurus.config.js 文件所在的目录。使用别名而不是相对路径（ '../../src/components/ads' ）可以避免在移动文件或对文档进行版本控制和翻译时更新导入路径。

方法 3：全局配置

除了导入组件和导出组件之外，在 MDX 中使用组件的第三种方法是将其注册到全局作用域，这将使其在每个 MDX 文件中自动可用（注意时 .mdx 文件，不是 .md 文件），而无需任何导入语句。

官网链接：https://docusaurus.io/zh-CN/docs/next/markdown-features/react#mdx-component-scope

定义全局配置文件src/theme/MDXComponents.js：

import React from 'react';
import MDXComponents from '@theme-original/MDXComponents';
import Ads from '@site/src/components/ads';

export default {
  ...MDXComponents,
  Ads
};

定义好以后直接在 .md 文件中注册使用：

<Ads></Ads>

总结

在 Docusaurus 中，有三种方法可以在 Markdown 文件中使用 React 组件。第一种是通过导入_xx.mdx文件，第二种是通过组件方式导入，使用别名避免相对路径，第三种是通过全局配置，在 MDX 文件中直接注册使用组件。每种方法灵活应用，使 React 组件在文档中的管理更加方便。详细信息可参考官方文档链接。