Badge 徽标组件：自动图标与头像识别

为什么需要 Badge

在博客文章中，经常需要提到其他网站、GitHub 项目、开源作者等。如果用普通链接，读者很难一眼看出链接指向哪里；如果用纯文本，又缺少视觉辨识度。

Badge 组件就是为这个场景设计的——一个小小的标签，能自动识别链接类型并显示对应的图标或头像，让文章中的引用更加直观。

核心特性

外部域名自动获取站点图标 喵洛阁，GitHub 链接能自动识别头像 kmoretti，也可以手动指定图片 自定义头像。

基础用法

带链接的 Badge

传入 link 属性即可创建可点击的 Badge，外部链接会自动在新窗口打开：

kmoretti

Astro Docs

纯文本 Badge

不传 link 时，Badge 渲染为 <span>，不可点击：

自动图标识别

Badge 会根据链接类型自动选择图标来源：

外部域名 → Favicon

对于非 GitHub 的外部链接，自动通过 Google Favicon 服务获取站点图标：

Bilibili

Vercel

MDN

GitHub 链接 → 用户头像

GitHub 链接会自动提取用户名并拉取头像，无需手动指定图片：

kmoretti

Astro

形状控制

Badge 支持两种形状：

• 圆形（有图时默认）：图标和文字都使用圆角
• 方形（无图时默认）：使用小圆角

默认形状规则

有图默认圆形，无图默认方形：

有图 → 默认圆形

手动指定

通过 round 或 square 属性覆盖默认行为：

有图方形

自定义图片

通过 img 属性可以传入任意图片 URL，覆盖自动识别逻辑：

本地图片

自定义图标

插槽内容

除了 text 属性，还可以通过默认插槽传入内容，支持内联 Markdown：

文本传入方式

Badge 支持两种方式传入文本：

{/* 方式一：text 属性 */}

<Badge text="文本" />

{/* 方式二：默认插槽 */}

<Badge>插槽文本</Badge>

text 属性适合简短的纯文本；插槽适合需要格式化内容的场景。

核心实现

图标解析优先级

img 属性  →  GitHub 头像  →  域名 Favicon

if (img) {
  resolvedImg = img; // 1. 手动指定的图片
} else if (link) {
  const ghUser = getGithubUsername(link);
  if (ghUser) {
    resolvedImg = getGithubAvatar(ghUser); // 2. GitHub 头像
  } else if (isExtLink(link)) {
    resolvedImg = getFavicon(getDomain(link)); // 3. 域名 Favicon
  }
}

形状规则

// 有图 → 默认圆形（square 覆盖）
// 无图 → 默认方形（round 覆盖）
const isRound = resolvedImg ? !square : !!round;

链接渲染

Props 一览

与其他组件组合

Badge 是行内元素，可以自然地嵌入其他组件的插槽中：

外部域名自动获取站点图标 喵洛阁，GitHub 链接能自动识别头像 kmoretti，也可指定方形 blog。

小结

Badge 组件虽小，但在文章中提到其他网站、项目、作者时非常实用。自动识别 GitHub 头像和站点 Favicon 的特性，让你只需传一个链接就能得到带图标的标签，无需手动找图片。