Github badge
在Github中仓库中，有很多大神的README.md看上去十分炫酷，在标题下方会有很多各种颜色的小图标，这些图标显示了这个仓库的一些基本信息，比如被Fork的次数、Pull requests的次数、使用的开原协议等。这些小图标在Github中被称为Shields。一开始我也只是简单的查看这些大神的README.md中的源代码，来照着在自己的仓库中添加一些类似的Shields。不过有很多参数并没有搞清楚，在这“Github Shields 相关设置”这个系列文章中，集中整理一下，给自己做个备忘。
首先是比较简单的，打开这个网页之后，在顶部直接输入自己仓库名字完整的URL，这样会帮你自动生成若干个badge。这些badge是根据你的仓库动态生成的。当然，你也可以自己自定义想要生成的内容。接下来我们慢慢研究badge中一些简单的参数。
1. 自定义静态内容
自定义静态内容的badge由4部分组成：默认连接 + Label + Message + Color。
- 默认连接为
https://img.shields.io/badge/ - Label为badge左侧的文字内容。
- Message为badge左侧的文字内容。
- Color为badge右侧文字的底色。
其中Label、Message、Color三个参数的顺序不可改变，三个参数之间使用英文“-”相连接。以下为一个自定义静态内容的badge示例：
1 | https://img.shields.io/badge/Lrft-Right-orange |
这里要注意输入的一些特殊字符的问题，列表如下：
| 特殊字符 | 输入内容 | 显示内容 | 示例 |
|---|---|---|---|
| 破折号“–” | – | - |  |
| 英文半角空格 | %20或“_” | 一个半角空格 |  |
| 下划线“_” | __(两个英文半角下划线) | _ |  |
2 文字背景色
你也可以自定义左右两边的颜色值，这里使用的是RGB16位色值。示例代码如下
1 | https://img.shields.io/badge/Left-Right-green.svg?colorA=ff00ff&colorB=daa357 |
这里的colorA=ff00ff表示左半边的背景色值，colorB=daa357表示右半边背景色值。参数之间使用英文&符号连接。
除了使用16位RGB值改变背景色之外，还可以使用Shields一些自带的默认样式，列表如下，其实还有很多其他颜色名称，这里就不一一列举了，都可以使用RGB来代替。
| 颜色名称 | 示例 | 代码 |
|---|---|---|
| brightgreen |  |
https://img.shields.io/badge/left-right-brightgreen |
| green |  |
ttps://img.shields.io/badge/left-right-green |
| yellowgreen |  |
https://img.shields.io/badge/left-right-yellowgreen |
| yellow |  |
https://img.shields.io/badge/left-right-yellow |
| orange |  |
ttps://img.shields.io/badge/left-right-orange |
| red |  |
https://img.shields.io/badge/left-right-red |
| lightgrey |  |
ttps://img.shields.io/badge/left-right-lightgrey |
| blue |  |
https://img.shields.io/badge/left-right-blue |
3 自定义样式
Shields还提供了很多外观样式，具体代码和样式如下：
| 名称 | 示例 | 代码 |
|---|---|---|
| plastic |  |
https://img.shields.io/badge/Left-Right-green.svg?style=plastic |
| flat |  |
https://img.shields.io/badge/Left-Right-green.svg?style=flat |
| flat-square |  |
https://img.shields.io/badge/Left-Right-green.svg?style=flat-square |
| for-the-badge |  |
https://img.shields.io/badge/Left-Right-green.svg?style=for-the-badge |
| social |  |
https://img.shields.io/badge/Left-Right-green.svg?style=social |
4 小图标
在badge的左侧，还可以加入一些小图标，示例代码如下。
1 | https://img.shields.io/badge/Left-Right-green.svg?logo=unity |
这里还需要注意一点，有些Logo的名字是带空格的，比如Adobe Lightroom Classic，要显示这个Logo，不能直接使用英文半角空格，而是要使用%20作为转译符号。示例如下：
1 | https://img.shields.io/badge/Left-Right-green.svg?logo=Adobe%20Lightroom%20Classic |
或者还可以使用半角英文减号“-”代替空格，也是一样的效果，示例代码如下：
1 | https://img.shields.io/badge/Left-Right-green.svg?logo=visual-studio-code |
如果对Logo的颜色不满意，还可以更改Logo的颜色，颜色值使用16位RGB颜色。示例代码如下：
1 | https://img.shields.io/badge/Left-Right-green.svg?logo=unreal-engine&logoColor=violet |
感觉Logo跟文字部分过于紧凑，还可以调整水平位置Logo所占宽度。不过这个宽度增加之后，Logo只会出现在剧中位置。示例代码如下：
1 | https://img.shields.io/badge/Left-Right-green.svg?logo=bilibili&logoWidth=40 |
5 加入emoji
emoji同样可以嵌入到徽章内，不过是以UTF‑8编码格式书写的。每2组数值之前，要加英文百分号%，代码示例如下：
1 | https://img.shields.io/badge/Left_emoji%20%F0%9F%98%9C-%E2%9C%A8%20Right_emoji-brightgreen.svg |
当然，也可以直接在网页上复制emoji，不过那样感觉就会很奇怪，在一堆代码里面出现了一个emoji的表情，感觉好像很不符合程序员的风格。
6 超级缝合怪！
一个badge有多个参数，这些参数之间使用&符号进行连接，没有先后顺序。所以依照这个特性，我们可以创建一个内容丰富、结构复杂的badge！
1 | https://img.shields.io/badge/Left%E2%AD%90-Right%F0%9F%92%9D-brightgreen.svg?style=for-the-badge&colorA=ff00ff&colorB=daa357&logo=Blender&logoWidth=20&logoColor=black |
