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 |