如何在Docusaurus中增加卡片链接

实现的效果如下

解决办法

使用的是:Semi Design

1. 安装依赖

# with npm
npm i @douyinfe/semi-ui

# with yarn
yarn add @douyinfe/semi-ui

# with pnpm
pnpm add @douyinfe/semi-ui

2.在你的components目录下创建 CardLink.js文件

然后粘贴以下代码

import React from 'react';
import { Card, Typography } from '@douyinfe/semi-ui';

export default function CardLink() {
    const { Text } = Typography;

    return (
        <Card
            title='Semi Design'
            style={{ maxWidth: 360 }}
            headerExtraContent={
                <Text link>
                    更多
                </Text>
            }
        >
            Semi Design content
        </Card>
    );
}

3.接着你就可以在你mdx文件中使用了

比如这样:

import CardLink from "@site/src/components/CardLink";

<CardLink></CardLink>

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×