这篇文章介绍如何在 MDX 内容中使用 FriendLinkCard 组件，快速展示站点名称、链接、头像和简介。
为什么使用友链卡片？
相比纯文本链接，友链卡片可以提供更清晰的结构：
- 一眼看到站点名称与定位
- 支持头像和背景图，识别度更高
- 保持页面信息密度与阅读节奏
如果你在做个人博客、数字花园或资源页，这个组件很适合用于友情链接区块。
组件导入
在 MDX 文件中先导入组件：
import FriendLinkCard from '../../components/mdx/FriendLinkCard.astro';基础示例
下面是一个使用数组批量渲染友链列表的示例。组件会按照数组顺序展示，并在桌面宽度下一行排列两个卡片。
带背景图示例
如果你希望某一张卡片更有视觉识别，可以在对应数组项里加上 backgroundImage。
可用属性
组件支持以下属性：
- items: 友链数组（必填），会按照数组顺序渲染为列表
每个 items 数组项支持以下字段：
- name: 友链名称（必填）
- url: 跳转链接（必填）
- bio: 简介文案（可选）
- avatar: 头像地址（可选）
- backgroundImage: 背景图地址（可选）
当未提供 avatar 时，组件会自动使用名称首字母作为头像占位。
小提示
- 建议 bio 保持简短，避免卡片高度过大
- 外链会在新标签页打开，并带有安全属性
- 背景图建议选择对比清晰、细节不过度复杂的图片
留言
关于这篇文章的留言。