跳到主要内容

将自定义组件注册为全局组件

将自定义组件注册为全局组件的好处是无需再文档中通过import引入组件，将自定义组件注册为全局组件后可以直接在文档中使用组件。

官方文档：https://docusaurus.io/docs/markdown-features/react#mdx-component-scope ，中有相关说明。

这里需要手动创建一个 src/theme/MDXComponents.js文件。内容如下：

src/theme/MDXComponents.js
import React from 'react';
// Import the original mapper
import MDXComponents from '@theme-original/MDXComponents';


export default {
    // Re-use the default mapping
    ...MDXComponents,
};
js

这其实是 @theme/MDXComponents 的一个 wrap，只是我们无法通过 swizzle 来创建它，而是需要手动创建它。

将我们的自定义组件添加到全局组件中​

src/theme/MDXComponents.js
import React from 'react';
// Import the original mapper
import MDXComponents from '@theme-original/MDXComponents';
import Underline from '@site/src/components/Underline';

export default {
    // Re-use the default mapping
    ...MDXComponents,
    Underline,
};
js

添加完后就可以在所有文档中直接使用这个组件了。

md文档和mdx文档都可以使用自定义组件。在实际处理时md文档和mdx文档的渲染逻辑是一致的。

使用全局组件​

<Underline>云想衣裳花想容，春风拂槛露华浓。</Underline>
html
云想衣裳花想容，春风拂槛露华浓。