ProseA 链接组件演示 🔗

本文展示 ProseA 增强链接组件的各种功能。这个组件可以：

• 自动识别外部链接并在新标签页打开
• 根据域名自动匹配对应图标
• 支持自定义图标
• 鼠标悬停显示域名提示

内部链接

这是 内部链接示例 ，点击后会在当前页面跳转。

外部链接与自动图标

开发者平台

• GitHub 仓库 - 自动显示 GitHub 图标
• GitLab - 自动显示 GitLab 图标
• Stack Overflow - 开发者问答社区
• npm 包管理 - Node.js 包管理器
• Vercel 部署平台 - 前端部署服务
• Cloudflare - CDN 和云服务

社交媒体

• 哔哩哔哩 - 自动显示 B站 图标
• 知乎 - 中文问答社区
• 微博 - 社交媒体平台
• Twitter/X - 国际社交平台
• YouTube - 视频分享平台

文档与学习

• MDN Web Docs - Web 开发文档
• 微软文档 - Microsoft 官方文档
• W3Schools - Web 技术教程

国内服务

• 百度 - 搜索引擎
• 淘宝 - 电商平台
• 京东 - 电商平台
• 腾讯云 - 云服务商
• 阿里云 - 云服务商

自定义图标

你可以通过 icon 属性指定自定义的 Iconify 图标：

• Astro 官网 - 使用 Astro 图标
• Vue.js 官网 - 使用 Vue 图标
• React 官网 - 使用 React 图标
• Svelte 官网 - 使用 Svelte 图标

图标可以在 Iconify 或 Yesicon 搜索获取。

组件使用方式

在 MDX 文件中导入并使用：

import ProseA from '../../components/post/ProseA.astro';

<ProseA href="https://github.com">GitHub</ProseA>
<ProseA href="https://example.com" icon="ri:link">自定义图标</ProseA>

支持的域名图标

目前支持自动匹配图标的域名包括：

类别	域名
社交媒体	bilibili.com, qq.com, weibo.com, zhihu.com, twitter.com, x.com, facebook.com, instagram.com, youtube.com
开发者平台	github.com, gitlab.com, stackoverflow.com, npmjs.com, vercel.com, netlify.com, cloudflare.com
云服务	aws.amazon.com, azure.com, google.com, firebase.google.com
文档	microsoft.com, mozilla.org, developer.mozilla.org, w3schools.com
国内服务	baidu.com, aliyun.com, tencent.com, taobao.com, tmall.com, jd.com
设计	figma.com, dribbble.com, behance.net
通讯	slack.com, discord.com, telegram.org

为更多站点匹配图标

你可以在 src/utils/icon.ts 中分别为主域名或专门域名（优先级高）添加匹配规则：

// 主域名图标映射
const mainDomainIcons: Record<string, string> = {
  'example.com': 'ri:example-fill',
  // ...
};

// 专门域名图标映射（优先级更高）
export const domainIcons: Record<string, string> = {
  'docs.example.com': 'ri:example-docs-fill',
  // ...
};

结语

ProseA 组件让博客中的链接更加美观和实用，读者可以一眼看出链接指向的平台类型，外部链接也会安全地在新标签页打开。

如果你有想要添加的域名图标，欢迎修改 src/utils/icon.ts 文件来扩展支持！