链接展示方案
本页面展示了多种美观的链接展示方式，适用于不同的使用场景。包括全新的 LinkCard 组件和原有的 Hextra 组件。
🆕 LinkCard 组件（推荐）
智能logo识别
系统会自动识别知名网站并应用logo图标和颜色：
状态指示器和角标
支持网站状态显示和特殊标记：
单个链接展示
适合重点推荐的链接：
Visual Studio Code
微软开发的免费、开源的代码编辑器，支持多种编程语言和丰富的扩展生态系统
极简模式
适合侧边栏或紧凑空间：
GitHub
自定义列数
可以指定网格的列数：
📋 Hextra 原生卡片组件
基础卡片
传统的卡片布局，支持图标和标签：
双列布局
适合并排展示相关链接：
带标签的卡片
使用不同颜色的标签来标识链接类型：
2. 友链展示卡片
横向友链布局
项目中包含自定义的友链组件，具有以下特点：
特点：
- 横向布局：图标 + 标题 + 描述 + 状态指示器
- 网络状态检测：自动检测链接可用性（绿色=正常，黄色=慢，红色=异常）
- 适合友情链接展示：专门为友链页面设计
使用方法： 由于该组件为项目特定组件，建议查看项目中的友链页面实际使用示例。
推荐替代方案： 对于一般的链接展示需求，建议使用下面的 Hextra 原生卡片组件，更加稳定和通用。
3. Feature 卡片
大型展示卡片
适合重要功能或项目的突出展示：
4. 徽章链接
内联徽章
适合在文本中嵌入的小型链接：
查看我们的 获取最新代码。
GitHub 仓库
访问 了解详细用法。官方文档
不同类型的徽章
默认徽章
信息
警告
错误
📖 使用建议
选择合适的方案
| 使用场景 | 推荐组件 | 语法示例 | 特点 |
|---|---|---|---|
| 现代链接展示 | link-card + link-grid | | 智能识别、Apple设计、响应式 🌟 |
| 单个重要链接 | link-card | | 横向布局、详细描述 ⭐ |
| 紧凑空间 | link-card (minimal) | | 极简设计、节省空间 |
| 传统导航 | cards + card | | 标准、稳定 |
| 重要功能 | hextra/feature-card | | 大型展示、视觉突出 |
| 文内链接 | badge | | 小巧、内联 |
快速复制语法
1. LinkCard 网格布局 🌟 最新推荐
2. LinkCard 单个链接
3. LinkCard 极简模式
4. 传统卡片网格
3. 大型功能卡片
4. 内联徽章
访问
官方文档
了解更多。响应式设计
所有卡片组件都支持响应式设计：
- 桌面端：多列布局（可通过
cols参数控制） - 平板端：自动调整列数
- 移动端：单列布局
🔧 LinkCard 参数详解
link-card 参数
| 参数 | 类型 | 必需 | 默认值 | 说明 |
|---|---|---|---|---|
url | string | ✅ | - | 链接地址 |
title | string | ✅ | - | 卡片标题 |
description | string | ❌ | - | 卡片描述 |
icon | string | ❌ | auto | 图标类型 |
status | string | ❌ | auto | 状态指示器 (online/slow/offline/none) |
badge | string | ❌ | - | 角标文字 |
target | string | ❌ | _blank | 链接打开方式 |
minimal | boolean | ❌ | false | 极简模式 |
link-grid 参数
| 参数 | 类型 | 必需 | 默认值 | 说明 |
|---|---|---|---|---|
columns | string/number | ❌ | auto | 列数设置 |
gap | string | ❌ | 16px | 间距大小 |
min-width | string | ❌ | 260px | 最小宽度 |
智能logo识别
支持的logo：
- GitHub: github.com, www.github.com
- 哔哩哔哩: bilibili.com, www.bilibili.com, b23.tv
- YouTube: youtube.com, www.youtube.com, youtu.be
- 知乎: zhihu.com, www.zhihu.com
- 少数派: sspai.com, www.sspai.com
- Twitter: twitter.com, www.twitter.com, x.com
- Figma: figma.com, www.figma.com
- Apple: developer.apple.com, apps.apple.com
自定义样式
LinkCard 组件使用 Apple 设计语言，支持深色模式自动适配。传统卡片可以通过 class 和 style 参数自定义外观：