链接网格
5 分
链接网格 区块将内容组织为响应式卡片布局。它们适用于创建落地页、导航中心、文档索引及相关资源集合。
语法
您可以使用 Markdown 或 MDX 添加此组件。
<LinkArray contentSource="CUSTOM" itemsPerRow="3">
<LinkArrayItem headerType="COLOR" headerColor="#2166AE">
Card content.
</LinkArrayItem>
</LinkArray>链接网格卡片支持三种标题样式：
- 无标题，用于简单卡片布局。
- 颜色，使用 headerColor 属性。
- 图像，使用 headerImage 属性。
使用 itemsPerRow 属性控制每行显示的卡片数量。
MDX 示例
以下示例展示了三种可用的卡片样式。
普通卡片
<LinkArray contentSource="CUSTOM" itemsPerRow="3">
<LinkArrayItem>
**Getting Started**
Learn the basics of setting up your documentation project.
</LinkArrayItem>
<LinkArrayItem>
**Configuration**
Customize every aspect of your docs with `archbee.json`.
</LinkArrayItem>
<LinkArrayItem>
**Templates**
Choose from 4 built-in templates to match your brand.
</LinkArrayItem>
</LinkArray>彩色标题卡片
<LinkArray contentSource="CUSTOM" itemsPerRow="3">
<LinkArrayItem headerType="COLOR" headerColor="#2166AE">
**API Reference**
Complete endpoint documentation with examples.
</LinkArrayItem>
<LinkArrayItem headerType="COLOR" headerColor="#16A34A">
**Guides**
Step-by-step tutorials for common tasks.
</LinkArrayItem>
<LinkArrayItem headerType="COLOR" headerColor="#DC2626">
**Troubleshooting**
Solutions to common issues and FAQ.
</LinkArrayItem>
</LinkArray>图片标题卡片
<LinkArray contentSource="CUSTOM" itemsPerRow="3">
<LinkArrayItem headerType="IMAGE" headerImage="https://images.archbee.com/K_JWZranXy1tD6qvlG2v6-YOw4gia62kkE1bvECH6iX-20250910-182430.png?format=webp">
**Visual Docs**
Add images and media to your documentation.
</LinkArrayItem>
<LinkArrayItem headerType="IMAGE" headerImage="https://images.archbee.com/K_JWZranXy1tD6qvlG2v6-_tiGuKOk_9dziwY-l92FX-20250910-190316.png?format=webp">
**Code Examples**
Syntax-highlighted code with copy support.
</LinkArrayItem>
<LinkArrayItem headerType="IMAGE" headerImage="https://images.archbee.com/K_JWZranXy1tD6qvlG2v6-Vjd5vTfjNgJi8V0mulhgV-20250910-190329.png?format=webp">
**API Blocks**
Interactive API endpoint documentation.
</LinkArrayItem>
</LinkArray>Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.