LinkCard 链接卡片组件：小而精致的资源推荐块

为什么需要 LinkCard

有些外部资源不值得上完整横幅，但又比普通文本链接更需要存在感，比如项目地址、工具站点、作者主页、参考资料。

LinkCard 组件就是为这种场景准备的：一行标题、一行描述，右侧配一张小图标，形成紧凑但清晰的推荐卡片。

效果预览

组件 语法

标题

这是一行描述，如果不提供描述会展示域名

<LinkCard
  link="#link-card"
  title="标题"
  description="这是一行描述，如果不提供描述会展示域名"
  icon="https://picsum.photos/100/100"
/>

基本用法

最常见的用法就是传入 link、title 和 icon：

Astro 官方文档

静态站点、内容站和组件开发的第一参考资料

自动描述回退

如果不传 description，组件会自动尝试从链接中提取域名作为说明文字：

博客源码仓库

github.com

纯展示卡片

不传 link 时，组件仍然可以作为纯展示信息卡片使用：

纯展示卡片

没有跳转，只负责展示一段信息

字段说明

这版组件字段和你旧项目里的预览数据结构保持一致：

icon: https://picsum.photos/100/100
title: 标题
description: 这是一行描述，如果不提供描述会展示域名
link: "#link-card"

Props 一览

核心实现

域名回退

当没有传入描述时，组件会从 link 中提取域名：

function getDomain(url: string): string {
  try {
    return new URL(url).hostname.replace(/^www\./, "");
  } catch {
    return url;
  }
}

const resolvedDescription = description ?? (link ? getDomain(link) : "");

外链判断

外部链接会自动加上 target="_blank" 和 rel="noopener noreferrer"：

function isExtLink(url: string): boolean {
  return url.startsWith("http") && !url.includes(siteHost);
}

无图兜底

如果没有传 icon，组件会自动用标题首字生成一个简洁的占位块，避免右侧区域塌掉。

小结

LinkCard 适合放在文章中部做轻量推荐。相比普通链接，它更容易被注意到；相比大图横幅，它又更节制。用来展示参考资料、作者主页、源码仓库、工具入口都很顺手。