FriendLinkCard：可组合的友链卡片

FriendLinkCard 用于在 MDX 内容中展示友链。卡片按照自身容器的宽度响应，而不是直接按浏览器宽度排版：默认最多四列，正文宽度约 720px 时会自然排成三列；更窄的内容区域继续收为两列。移动端无论是否指定 columns，均为单列，以保证头像、名称和简介可读。

基础状态

不指定背景图时，头像会以淡化效果出现在卡片后方；没有头像时，名称首字母会作为圆形占位头像。bio 最多两行，超过部分以省略号截断，因此同一行卡片保持稳定高度。

指定背景图与列数

backgroundImage 会覆盖默认的头像淡化背景。columns 是宽容器下允许的最大列数，可选 1、2、3、4，默认值为 4；它不会阻止窄容器和移动端自动收列。

随机半透明背景与排序

开启 randomBackground 后，组件会在服务端为每张卡片生成新的半透明色彩，刷新页面会得到不同组合，没有客户端补色或闪烁。该模式会忽略 backgroundImage。sticky 值更高的友链始终靠前；shuffle 只随机未置顶友链的顺序。

组件参数

参数	类型	默认值	说明
`items`	`FriendLinkItem[]`	-	内联友链数据。
`src`	`string`	-	远程或本地 JSON 数据地址。
`source`	`'auto' \| 'src' \| 'items'`	`'auto'`	数据源策略。`auto` 优先读取 `src`，失败时回退到 `items`。
`columns`	`1 \| 2 \| 3 \| 4`	`4`	宽容器下的最大列数；窄容器和移动端仍会自动收列。
`randomBackground`	`boolean`	`false`	使用每次渲染随机生成的半透明背景色，并忽略 `backgroundImage`。
`shuffle`	`boolean`	`false`	随机未置顶友链的顺序。

1
import FriendLinkCard from '@navfolio/mdx-components/FriendLinkCard.astro';
2

3
<FriendLinkCard
4
  columns={4}
5
  randomBackground={true}
6
  shuffle={true}
7
  src="https://example.com/friends.json"
8
  items={[{ name: 'Fallback', url: 'https://example.com/' }]}
9
/>

友链数据字段

字段	说明
`name`	必填，站点名称。
`url`	必填，站点主页地址。
`bio`	可选，最多显示两行。
`avatar`	可选，圆形头像；没有 `backgroundImage` 时也会作为淡化背景。
`backgroundImage`	可选，指定卡片背景图；`randomBackground` 开启时会被忽略。
`rss`	可选，供友链朋友圈同步器读取的 RSS 或 Atom 地址。
`sticky`	可选，`true` 或正数；数值越大排序越靠前。

友链朋友圈的 RSS 抓取与部署请参阅 Friend Circle Sync。