⚠️⚠️⚠️本文图片较多，样式加载比较慢，建议直接访问我的博客原文。
经常逛 GitHub 的同学会发现，很多优秀的开源框架里都会出现这样的小徽标。
它的实现其实非常简单，借助一些小工具即可，比如：shield.io、Badgen、Open Source Badges、Version Badge、FOR THE BADGE 等。这里推荐最经典全面的 shield.io。
静态徽标
一个简单的静态徽标链接的标准格式为：
https://img.shields.io/badge/${label}-${message}-${color}.svg
复制代码label 表示徽标左半部分信息，可选填，message 表示徽标右半部分信息，color 表示徽标右半部分的背景颜色。.svg 可以省略。
如果徽标里的文字包含 -，需要写成 --，比如：
那么
// 加上 .svg
// 省略 .svg
复制代码
[](https://blog.fiteen.top)
复制代码color
关于 color，你可以直接填入颜色英文，比如：
也可以用这些特殊词汇来代替颜色：
或者直接通过十六进制颜色码，比如：
样式
目前支持五种徽标样式，具体实现就是在 svg 路径后面拼接参数。flat 是默认样式。
?style=plastic
?style=flat
?style=flat-square
?style=for-the-badge
?style=social
除此之外，还有一些 query string 参数：
label- 覆盖原有的 label 文本内容。labelColor或labelA- 覆盖原有的 label 背景颜色，默认颜色是grey。注意这里不能用特殊词汇表示颜色。logo- 可以插入以下名称之一的徽标（bitcoin、dependabot、discord、gitlab、npm、paypal、serverfault、stackexchange、superuser、telegram、travis）或简单图标。使用简单图标站点上显示的名称来引用简单图标。如果名称中包含空格，用短划线-代替(例如:?logo=visual-studio-code)logoColor- 设置徽标 logo 的颜色。logoWidth- 设置徽标 logo 的水平宽度。link- 指定徽标左/右侧部分的点击操作，格式为：?link=${label-url}&link=${message-url}。color或colorB- 覆盖原有的 message 背景颜色。cacheSeconds- 设置 HTTP 缓存生存期（规则适用于根据每个徽章推断默认值，低于默认值的任何指定值都将被忽略）。还支持传统名称“ maxAge”。
动态徽标
动态徽标是指会随着项目状态变化，自动更新状态的徽标。GitHub 项目中常用的动态徽标有：
build 状态
-
Travis（.org）：
https://travis-ci.org/:user/:repo -
Travis（.org）branch：
https://travis-ci.org/:user/:repo/:branch -
GitHub Workflow Status：
/github/workflow/build/:user/:repo/:workflow -
GitHub Workflow Status (branch)：
https://github.com/:user/:repo/workflows/build/badge.svg?branch=${branch}
例如 AFNetworking 的 build 状态为：
[](https://travis-ci.org/AFNetworking/AFNetworking)
复制代码而 Kingfisher-master 分支的 build 状态为：
[](https://github.com/onevcat/Kingfisher/actions?query=workflow%3Abuild)
复制代码要知道项目在其它平台的持续集成状态，具体参照 shields.io - build
许可协议
-
Cocoapods：
/cocoapods/l/:spec -
GitHub：
/github/license/:user/:repo -
NPM：
/npm/l/:packageName
比如 Kingfisher 许可协议支持 Cocoapods 和 GitHub 两种写法：
debug 的许可协议为
// Kingfisher Cocoapods License：
[](https://raw.githubusercontent.com/onevcat/Kingfisher/master/LICENSE)
// Kingfisher GitHub License
[](https://raw.githubusercontent.com/onevcat/Kingfisher/master/LICENSE)
// debug NPM Licese
[](https://github.com/visionmedia/debug/blob/master/LICENSE)
复制代码要知道项目在其他平台的许可协议，具体参照 shields-license。
平台&版本支持
-
Cocoapods Platform：
/cocoapods/p/:repo -
Cocoapods Compatible：
/cocoapods/v/:repo
比如 Kingfisher 当前支持的平台有:
pod 版本号为:
// Platform Support
// Version Support
复制代码要知道相关的其它信息，具体参照 shields.io - platform & version support
代码测试覆盖率
针对不同的代码测试平台，有不同的获取方法，例如：
-
Codecov：
https://codecov.io/github/:user/:repo/coverage.svg?token=${token} -
Codecov Branch：
https://codecov.io/github/:user/:repo/coverage.svg?branch=${branch}&token=${token}
以 AFNetworking-master 分支为例：
[](https://codecov.io/github/AFNetworking/AFNetworking?branch=master)
复制代码要知道项目在其它平台的测试覆盖率，具体参照 shields.io - coverage。
项目信息
-
GitHub Followers：
/github/followers/:user?label=Follow -
GitHub Forks：
/github/forks/:user/:repo?label=Fork -
GitHub Stars：
/github/stars/:user/:repo?style=social -
GitHub Watchers：
/github/watchers/:user/:repo?label=Watch
// Followers
// Forks
// Stars
// Watchers
复制代码下载量
-
GitHub All Releases：
/github/downloads/:user/:repo/total -
GitHub Releases：
/github/downloads/:user/:repo/:tag/total
以 PicGo 为例：
// 总下载量
// v1.7.1 的下载量
复制代码其他
当然，可支持动态的徽标还有很多，本文就不一一列举，有兴趣的可以直接在官网查询。
