测试 Badge.astro 组件

这是一篇用来测试 Badge.astro 组件效果的文章

钟神秀大学牛马

2026年01月22日

更新于 01月22日

预计阅读 2 分钟

401 字

测试 Badge.astro 组件

这篇文章用来测试我新创建的 Badge.astro 组件，该组件复刻了 Vue 博客中的 Badge 组件功能。

测试基本用法

基本徽章圆形徽章

测试链接功能

https://www.google.com/s2/favicons?domain=github.com&sz=32

测试带图标的徽章

GitHub 用户徽章

https://github.com/L33Z22L11.png

https://github.com/vercel.png

网站徽章

https://www.google.com/s2/favicons?domain=astro.build&sz=32

https://www.google.com/s2/favicons?domain=vuejs.org&sz=32

https://www.google.com/s2/favicons?domain=react.dev&sz=32

自定义图片

https://github.com/mcyzsx.png

自定义图片

测试圆形和方形样式

有图默认圆形

https://www.google.com/s2/favicons?domain=github.com&sz=32

有图强制方形

https://www.google.com/s2/favicons?domain=github.com&sz=32

无图默认方形

无图强制圆形

测试效果说明

基本徽章：显示文本，无链接
链接徽章：显示文本和链接，悬停显示域名
GitHub 用户徽章：自动获取 GitHub 头像
网站徽章：自动获取网站 favicon
自定义图片：显示自定义图片
圆形样式：根据图片自动调整，也可手动指定
响应式设计：适配不同屏幕尺寸

结论

Badge.astro 组件已经成功实现了预期功能，完全适配了博客的布局和样式。组件支持多种使用方式，可以根据需要灵活配置，提升了博客内容的表现力和视觉效果。

觉得这篇文章怎么样？

点个赞，让更多人看到！

分享这篇文章

知识因分享而增值

Twitter Telegram 微博 QQ Facebook LinkedIn