卡片

在 MDX 文档中使用卡片组件

Historical Fumadocs template

旧模板文档为历史链接保留，内容不作为当前 ClaudeSkills 产品指南。

这里保留既有编辑译文；如有最新完整官方参考，会在下方独立提供英文原文。

本页目录

使用方法

将其添加到您的 MDX 组件中。

import { Card, Cards } from 'fumadocs-ui/components/card';

<MDX
  components={{
    Card,
    Cards,
  }}
/>;

有关用法，请参见 Markdown。

卡片的容器。

基于 Next.js 的 <Link />。

图标的树摇优化

如果您没有使用 Fumadocs MDX 来渲染 MDX（例如，使用 Contentlayer），请确保树摇优化正常工作。

大多数图标库支持单独导入图标。

import HomeIcon from 'lucide-react/dist/esm/icons/home';

作为解决方法，您也可以将图标传递给 MDX 组件。（这使用 Next.js 打包器而不是内容源）

import { HomeIcon } from 'lucide-react';

const components = {
  ...defaultComponents,
  HomeIcon,
};