有趣的Shields.io 徽章

目录

1. 1. 静态徽章
2. 2. 进阶
3. 3. 使用AI

很多项目都有很漂亮的徽章。这些徽章可以用来显示项目版本、进度条、star 数量、fork 数量….，那么这些徽章是如何生成的呢？

https://shields.io/
在这里，可以生成最基本的徽章样式。只需简单的几行代码，就能让项目页面瞬间生动起来。

静态徽章

https://img.shields.io/badge/:badgeContent
:badgeContent 的内容是 label-message-color?Query Parameters
lablel：左侧字符
message：右侧字符（可选）
color：颜色
Query Parameters：查询参数
示例：
https://img.shields.io/badge/label-red

https://img.shields.io/badge/label-message-red

https://img.shields.io/badge/label-message-fdfesf

进阶

• labelColor
  类型：字符串
  内容：颜色值（支持 hex、rgb、rgba、hsl、hsla 和 css 颜色名）
  左侧部分的背景颜色
  示例：
  https://img.shields.io/badge/label-message-red?labelColor=green
  

• style
  类型：字符串
  内容：flat, flat-square, plastic, for-the-badge, social
  默认为 flat 样式
  示例：
  flat：https://img.shields.io/badge/label-message-red?style=flat
  
  flat-square：https://img.shields.io/badge/label-message-red?style=flat-square
  
  plastic：https://img.shields.io/badge/label-message-red?style=plastic
  
  for-the-badge：https://img.shields.io/badge/label-message-red?style=for-the-badge
  
  social：https://img.shields.io/badge/label-message-red?style=social
  

• logo
  类型：字符串
  内容：bitcoin、dependabot、gitlab、npm、paypal、serverfault、stackexchange、superuser、telegram
  示例：
  https://img.shields.io/badge/label-指定图标-red?logo=dependabot
  
  https://img.shields.io/badge/label-simple%20icon图标-red?logo=creativecommons
  

• logoColor
  类型：字符串
  内容：颜色值（支持 hex、rgb、rgba、hsl、hsla 和 css 颜色名）
  支持 Simple-Icon 图标和 Shields 图标。
  示例：
  https://img.shields.io/badge/label-message-red?logo=dependabot&logoColor=blue
  

其实很简单，地址https://img.shields.io/badge/a-b-color，其中字段a，字段b和颜色都可以用代码生成，连接起来作为图片地址，从而实现动态效果。还有其它类型的动态徽章，比如微博关注数，github Star等就复杂一些，暂时没有研究，因为用不上。

使用AI

比如：deepseek
问：生成一个徽章，左文本是今天，右文本吃什么，左颜色为蓝色，右颜色为橙色
答：你可以使用 Shields.io 动态生成一个徽章，左文本显示 “今天”（蓝色），右文本显示 “吃什么”（橙色）。以下是实现方式：

方法 1：直接使用 Shields.io URL

![今天吃什么](https://img.shields.io/badge/今天-吃什么-blue?logoColor=orange&colorA=blue&colorB=orange)

方法 2：动态生成（JavaScript）
如果想每天自动换文案（如随机推荐食物）：

const foods = ["拉面", "饺子", "汉堡", "沙拉"];
const randomFood = foods[Math.floor(Math.random() * foods.length)];
document.getElementById('food-badge').src = 
  `https://img.shields.io/badge/今天-吃${randomFood}-blue?colorA=blue&colorB=orange`;
<img id="food-badge" src="" alt="今天吃什么">