跳到主要内容

添加Ant Design UI支持

Docusaurus默认的UI框架为infima，这个UI框架提供的组件并不是特别丰富，如果我们想要使用更多的UI组件，则需要依赖其他UI框架。本文中以Ant Design为例，介绍如何在Swizzling中和MDX文档中使用Ant Design中的组件。

infima说明及文档

安装Ant Design​

npm install antd --save
shell

Ant Design 融合了 CSS-in-JS 的能力，所以无需额外配置样式信息。

在swizzle中使用Ant Design组件​

本例中我们在站点Footer的版权声明中增加一个"复制版权声明"的按钮，这里我们并不实现具体逻辑，仅为演示如何在swizzle中使用Ant Design组件。

首先，创建Footer/Copyright swizzle

npm run swizzle @docusaurus/theme-classic Footer/Copyright -- --wrap

创建时会询问使用哪种语言，这里我们选择Typescript

swizzle生成在src\theme\Footer\Copyright\index.tsx中。然后引入Ant Design中的Button并添加到Copyright后。如下：

import React from 'react';
import Copyright from '@theme-original/Footer/Copyright';
import type CopyrightType from '@theme/Footer/Copyright';
import type {WrapperProps} from '@docusaurus/types';
import {Button} from "antd";

type Props = WrapperProps<typeof CopyrightType>;

export default function CopyrightWrapper(props: Props): JSX.Element {
    return (
        <>
            <Copyright {...props} />
            <Button type="primary">复制版权声明</Button>
        </>
    );
}
tsx

效果如下：

在MDX文档中使用Ant Design组件​

在文档的头部引入要使用的组件

import { Card } from 'antd';
tsx

可以直接在文档中像在tsx中一样使用组件。

<Card title="Card组件使用示例" style={{ width: 600 }}>
    <p>举盖闻天有不测风云，人有旦夕祸福。蜈蚣百足，行不如蛇；雄鸡两翼，飞不如鸦。马有千里之能，非人力不能自往；人有凌云之志，非时运不能自通。</p>
    <p>内容支持**Markdown**</p>
    <p>也支持数学公式$f(x)=x^2$</p>
</Card>
tsx

展示效果如下：

Card组件使用示例

举盖闻天有不测风云，人有旦夕祸福。蜈蚣百足，行不如蛇；雄鸡两翼，飞不如鸦。马有千里之能，非人力不能自往；人有凌云之志，非时运不能自通。

内容支持Markdown

也支持数学公式f(x)=x2f(x)=x^2