使用 MDX 完成友链卡片的展示

这篇文章介绍如何在 MDX 内容中使用 FriendLinkCard 组件，快速展示站点名称、链接、头像和简介。

为什么使用友链卡片？

相比纯文本链接，友链卡片可以提供更清晰的结构：

一眼看到站点名称与定位
支持头像和背景图，识别度更高
保持页面信息密度与阅读节奏

如果你在做个人博客、数字花园或资源页，这个组件很适合用于友情链接区块。

组件导入

在 MDX 文件中先导入组件：

1
import FriendLinkCard from '../../components/mdx/FriendLinkCard.astro';

基础示例

下面是一个使用数组批量渲染友链列表的示例。组件会按照数组顺序展示，并在桌面宽度下一行排列两个卡片。

带背景图示例

如果你希望某一张卡片更有视觉识别，可以在对应数组项里加上 backgroundImage。

远程 JSON 示例

如果你希望把友链配置放在远程 JSON 中，可以改用 src 属性。远程 JSON 需要是一个数组，字段结构和 items 数组项保持一致。

1
[
2
  {
3
    "name": "Astro",
4
    "url": "https://astro.build/",
5
    "bio": "Static site framework for content-driven websites",
6
    "avatar": "https://astro.build/assets/press/astro-icon-light-gradient.svg"
7
  }
8
]

在 MDX 中直接传入 JSON 地址：

1
<FriendLinkCard src="https://example.com/friends.json" />

静态构建时，远程 JSON 会在构建阶段读取；如果 JSON 内容更新，需要重新构建站点才会反映到页面中。

可用属性

组件支持以下属性：

items: 本地友链数组，会按照数组顺序渲染为列表
src: 远程 JSON 地址，适合把友链配置维护在外部数据源中

如果同时提供 items 和 src，组件会优先使用 items，不会请求远程 JSON。

每个 items 数组项支持以下字段：

name: 友链名称（必填）
url: 跳转链接（必填）
bio: 简介文案（可选）
avatar: 头像地址（可选）
backgroundImage: 背景图地址（可选）

当未提供 avatar 时，组件会自动使用名称首字母作为头像占位。

小提示

建议 bio 保持简短，避免卡片高度过大
外链会在新标签页打开，并带有安全属性
背景图建议选择对比清晰、细节不过度复杂的图片