网站卡片

在文章或页面中展示一组网站卡片，以网格形式呈现网站的封面截图、图标、标题和描述。适合用来展示常用工具、设计资源、推荐阅读等网站收藏。

基本用法

在 Markdown 中使用 sites 容器指令：

:::sites{group="design"}
:::

group 属性对应 site-config.ts 中 links 配置的分组名称。

配置数据

在 src/data/site-config.ts 的 links 字段中定义分组和站点数据：

export default {
    // ...其他配置
    links: {
        design: [
            {
                title: 'Unsplash',
                url: 'https://unsplash.com',
                description: 'Photos for everyone.',
                icon: 'https://unsplash.com/favicon.ico',
                labels: [{ name: '图片', color: '#3b82f6' }]
            },
            {
                title: 'Dribbble',
                url: 'https://dribbble.com',
                description: 'Discover the world\'s top designers.',
                icon: 'https://dribbble.com/favicon.ico',
                labels: [{ name: '设计', color: '#ec4899' }]
            },
        ],
        tools: [
            {
                title: 'Figma',
                url: 'https://figma.com',
                description: 'The collaborative interface design tool.',
                icon: 'https://figma.com/favicon.ico',
                labels: [{ name: '设计', color: '#a259ff' }]
            },
        ],
    },
};

字段说明

每个站点支持以下字段：

字段	类型	必填	说明
`title`	`string`	是	网站标题
`url`	`string`	是	网站链接
`description`	`string`	否	网站描述，未填写时显示 URL
`icon`	`string`	否	网站图标 URL，未填写时自动尝试获取根域名 `/favicon.ico`
`cover`	`string`	否	封面截图 URL，未填写时自动使用 thum.io 服务抓取网站截图
`labels`	`SiteLabel[]`	否	标签列表

标签字段：

字段	类型	说明
`name`	`string`	标签文字
`color`	`string`	标签背景色，支持十六进制色值（如 `#3b82f6`）

标签颜色规则

标签的文字颜色会根据背景色自动调整：

背景较浅（亮度 > 75%）：文字使用深色，保证可读性
背景高饱和且较亮（饱和度 > 90%，亮度 > 40%）：文字使用稍深的颜色
其他情况：文字使用白色

封面图说明

封面图优先级：

优先使用 cover 字段指定的图片地址
未指定时，自动通过截图服务抓取网站截图
截图加载失败时，显示主题色的占位背景

切换截图服务

在 site-config.ts 中配置 screenshotService：

export default {
    // ...其他配置
    screenshotService: 'thumio',  // 'thumio' | 'mshots'
    links: { ... },
};

服务	说明	适用场景
`thumio`（默认）	`image.thum.io`，截图质量高	大多数网站
`mshots`	WordPress 截图服务	thum.io 被屏蔽时备选

注意：截图服务均为第三方免费服务。某些网站（如需要登录或有反爬虫机制）可能无法自动抓取，建议手动配置 cover 字段。

使用示例

展示设计资源

## 设计资源

:::sites{group="design"}
:::

展示常用工具

## 开发工具

:::sites{group="tools"}
:::

自定义分组

你可以创建任意名称的分组：

links: {
    blogs: [
        { title: 'Astro Blog', url: 'https://astro.build/blog', description: 'Astro 官方博客' },
    ],
    reading: [
        { title: 'MDN', url: 'https://developer.mozilla.org', description: 'Web 技术文档' },
    ],
}

:::sites{group="blogs"}
:::

:::sites{group="reading"}
:::

Posters 海报卡片

展示竖向比例的海报网格，适合电影海报、专辑封面等收藏。

:::posters{group="movies"}
:::

与 sites 的区别：

	`sites`	`posters`
比例	横向（3 ）	竖向（2 ）或正方形（1 ）
信息展示	封面 + 图标 + 标题 + 描述 + 标签	封面 + 悬停标题
间隙	较大（1rem）	极小（2px）
适用场景	网站收藏	海报、专辑、封面

比例设置

通过 ratio 属性切换比例，默认 portrait：

<!-- 竖向比例（2:3）—— 电影海报 -->
:::posters{group="movies"}
:::

<!-- 正方形（1:1）—— 专辑封面 -->
:::posters{group="albums" ratio="square"}
:::

ratio 值	比例	适用场景
`portrait`（默认）	2	电影海报、竖版封面
`square`	1	专辑封面、头像墙

固定列数

通过 cols 属性指定每行固定列数，任何屏幕下保持不变：

:::posters{group="movies" cols="4"}
:::

cols 值	每行列数	适用场景
`2`	2 列	大幅海报展示
`3`	3 列	中等尺寸封面
`4`	4 列	专辑/书籍封面
`5`	5 列	紧凑排列
`6`	6 列	小型缩略图
`8`	8 列	头像墙/徽章墙

不传 cols 时，根据容器宽度自动计算列数。

posters 使用同一套 links 配置，字段需求更少：

title：悬停时显示的标题
cover 或 icon：封面图片（必填，不自动抓取截图）
url：点击跳转链接（可选，无链接则不可点击）

links: {
    movies: [
        { title: '星际穿越', url: 'https://movie.douban.com/subject/1889243/', cover: 'https://example.com/poster1.jpg' },
        { title: '千与千寻', url: 'https://movie.douban.com/subject/1291561/', cover: 'https://example.com/poster2.jpg' },
    ],
}

样式特点

响应式网格：根据容器宽度自动调整列数，小屏幕 2 列，中等屏幕 3~4 列
悬停效果：鼠标悬停时卡片整体上浮，封面图轻微放大，标签渐隐
圆角卡片：跟随主题的圆角和阴影风格
懒加载：封面图和图标均使用 loading="lazy" 懒加载

与 OGCard 的区别

	`sites` 指令	`OGCard` 组件
数据来源	配置文件（静态）	实时抓取目标网页
使用场景	批量展示已知网站收藏	文章中引用单个链接
布局	响应式网格	横向卡片
标签	支持	不支持
性能	构建时渲染，无额外请求	页面加载时抓取 OG 数据

建议：批量展示使用 sites 指令，文章中引用单个链接使用 OGCard 组件。