徽章生成网站 shields.io

1、前言

在 GitHub 许多开源项目都有很漂亮的徽章（徽标），它们可以用来显示项目的进度，访问人数，版本信息以及 GitHub stars 数量等等，这是怎么做到的呢

Shields.io 可以完成我们的这个需求，它其实就是一个「牌子渲染服务」。里面分为静态展示数据牌和动态展示数据牌。

访问官网 https://www.shields.io/ 制作徽章，找到 Your BADGE 自定义定制徽章，输入标签和信息，点击生成：

或者使用 url 生成

1
2
3

https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>.svg
// # 或者
https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>

参数：

label 写要展示的名字，比如：CSDN。
message 可以写展示数据，比如：全国前 4K 名。
color 选择一个颜色（当然，也可以到这里找喜欢的颜色，输入对应的十六进制代码）。
有以下几种颜色可以选择：brightgreen、green、yellow、green、yellow、orange、red、blue、lightgrey、success、important、critical、informational、inactive、blueviolet、ff69b4、9cf

除了上面所说的3个参数，http://shields.io 还提供了一些 query string 来控制徽标样式。使用方式跟 URL 的 query string 一致：徽标图标地址?{参数名}={参数值}，多个参数用 & 连接：

常用的 query string 参数有：

style：控制徽标主题样式，style的值可以是：plastic（立体）、flat（扁平化）、flat-square（扁平 + 去圆角）、for-the-badge（社交样式）和 social
- 示例：https://img.shields.io/badge/aaa-bbb-green?style=social&logo=github
- 展示：
label：用来强制覆盖原有徽标的标题文字。
colorA：控制左半部分背景颜色，只能用16进制颜色值作为参数，不能使用颜色英文。
colorB：控制右半部分背景颜色。
logo 参数：logo 可以选择 Simple Icons：https://simpleicons.org 上提供的图标，
- 比如微信的图标：logo=WeChat
- 展示：