建站: IconLink 组件 • CCM

本页面展示了 <IconLink> 组件的各种用法和效果。

1. 基础用法 (Basic Usage)#

1.1. 外部链接（自动添加图标）#

访问 Google 搜索信息。

import IconLink from '@/components/IconLink.astro'

<IconLink href="https://www.google.com">Google</IconLink>

1.2. 内部链接（不添加图标）#

这是一个内部链接，不会添加图标。

<IconLink href="/about">内部链接</IconLink>

2. 自定义属性 (Custom Attributes)#

2.1. 自定义 target 和 rel#

在当前窗口打开

<IconLink href="https://github.com" target="_self" rel="nofollow">在当前窗口打开</IconLink>

2.2. 自定义 CSS 类#

带自定义样式的链接

<IconLink href="https://www.google.com" class="text-primary font-bold">带自定义样式的链接</IconLink>

3. 自定义图标 (Custom Icons)#

3.1. 全局配置#

你可以在 src/site.config.ts 中配置全局的自定义图标映射，这样所有使用 <IconLink> 组件的地方都会自动应用这些配置。

配置示例：

export const theme: ThemeUserConfig = {
  // ... 其他配置
  content: {
    externalLinks: {
      customIcons: {
        'github.com': 'github',        // GitHub 使用 github 图标
        'www.google.com': 'google',    // Google 使用 google 图标
        'stackoverflow.com': 'stack',  // Stack Overflow 使用 stack 图标
        // ... 更多配置
      }
    }
  }
}

可用的图标名称：

常用的图标包括：github, gitlab, discord, youtube, instagram, x, telegram, rss, email, reddit, bluesky, tiktok, weibo, steam, bilibili, zhihu, coolapk, netease, link, qrcode, copyright, receive-money, alipay, wechat-pay 等。

完整的图标列表请参考 packages/pure/libs/icons.ts 文件中的 BuiltInIcons 对象。

优先级说明：

图标获取的优先级顺序为：

组件级别的 customIcons prop（最高优先级）
全局配置中的 customIcons
favicon 服务（https://favicon.im/{hostname}）

3.2. 使用全局配置的自定义图标#

访问 GitHub（使用全局配置的自定义图标）。

<IconLink href="https://github.com">GitHub</IconLink>

3.3. 组件级别的自定义图标#

组件级别的配置会覆盖全局配置，适用于需要为特定链接使用不同图标的场景。

Google（使用 GitHub 图标）

<IconLink href="https://www.google.com" customIcons={{ 'www.google.com': 'github' }}>Google（使用 GitHub 图标）</IconLink>

4. 图标大小 (Icon Size)#

4.1. 默认大小（16px）#

默认图标大小

<IconLink href="https://www.google.com">默认图标大小</IconLink>

4.2. 自定义图标大小#

更大的图标（24px）

<IconLink href="https://www.google.com" iconSize={24}>更大的图标（24px）</IconLink>

5. 实际应用场景 (Real-world Examples)#

5.1. 在段落中使用#

本网站使用 Astro 框架构建，
主题基于 Astro Theme Pure。
评论系统使用 Waline。

<p>
  本网站使用 <IconLink href="https://astro.build">Astro</IconLink> 框架构建，
  主题基于 <IconLink href="https://github.com/cworld1/astro-theme-pure">Astro Theme Pure</IconLink>。
  评论系统使用 <IconLink href="https://waline.js.org">Waline</IconLink>。
</p>

5.2. 在列表中使用#

<ul>
  <li><IconLink href="https://www.google.com">Google</IconLink></li>
  <li><IconLink href="https://github.com">GitHub</IconLink></li>
  <li><IconLink href="https://stackoverflow.com">Stack Overflow</IconLink></li>
</ul>

5.3. 协议相对链接#

协议相对链接

<IconLink href="//www.google.com">协议相对链接</IconLink>

6. 组件属性说明 (Props)#

属性	类型	默认值	描述
`href`	`string`	必需	链接地址
`target`	`string`	`'_blank'`	链接打开方式
`rel`	`string \| string[]`	`['nofollow', 'noopener', 'noreferrer']`	rel 属性
`class`	`string`	`''`	自定义 CSS 类
`customIcons`	`Record<string, string>`	`undefined`	组件级别的自定义图标映射
`iconSize`	`number`	`16`	图标大小（像素）

7. 工作原理 (How It Works)#

自动识别外部链接：组件会自动判断链接是否为外部链接（绝对 URL 或协议相对 URL）
图标获取优先级：
- 首先检查组件级别的 customIcons prop
- 然后检查全局配置中的 customIcons
- 最后使用 favicon 服务（https://favicon.im/{hostname}）
图标显示：图标显示在链接文本的左侧
内部链接：内部链接不会添加图标，保持普通链接样式