# 卡片

编辑 Astro、Starlight、Fumadocs 和 Prosefly MDX 文档中的卡片、链接与卡片网格。

import ContentEditor from '@/components/editor/ContentEditor.astro';

使用 Prosefly 的 MDX 组件编辑器编辑文档卡片和链接，同时保留 Astro、Starlight、Fumadocs 或 Prosefly 网站使用的语法。

## 支持的配置

同一个编辑器支持 [Astro](/zh-cn/frameworks/astro/)、[Starlight](/zh-cn/frameworks/starlight/)、[Fumadocs](/zh-cn/frameworks/fumadocs/) 和 [Prosefly](/zh-cn/frameworks/lotus/) 配置。选择与你的网站匹配的配置，即可查看该集成支持的组件语法和编辑控件。

## 可视化编辑

在组件中修改卡片标题和正文，通过控件调整受支持的链接与图标。卡片分组中可以编辑多张卡片，每张卡片仍是独立的可编辑条目。

链接控件修改的是保存的目标地址，不会让编辑器跳转到该页面。发布前，可以在源码中检查 URL。

<ContentEditor content="card" />

## 源码示例

```mdx
import { Card, CardGrid } from '@astrojs/starlight/components';

<CardGrid>
  <Card title="连接你的网站" href="/docs/zh-cn/connect-github/" icon="lucide:folder">
    从已有的文档仓库开始使用。
  </Card>
  <Card title="审阅修改" href="/docs/zh-cn/publishing/" icon="lucide:git-pull-request">
    发布审阅后的内容，继续使用现有构建流程。
  </Card>
</CardGrid>
```

## 配置差异

Starlight 支持 Card、LinkCard 和 CardGrid，LinkCard 的摘要与 Card 正文采用不同的保存方式。Fumadocs 使用 Cards 和 Card，Prosefly 使用 CardGrid 和 Card，Card 上还支持相应的链接属性。

请使用当前卡片类型提供的控件。自定义布局属性和表达式可能需要在源码中修改，最终网格布局由网站决定。

## 相关 MDX 指南

继续阅读：[提示块](/docs/zh-cn/editor/components/callout/) · [标签页](/docs/zh-cn/editor/components/tabs/) · [链接按钮](/docs/zh-cn/editor/components/link-button/).