自定义 README Badges
寻找图标
要制作你自己的徽章,你需要做的第一件事是确认你需要的图标是否可用于 shields.io。而可用的图片通常可以在 Simple Icons 上寻找。该网站上基本涵盖了大部分的语言、框架、库和品牌的图标。
URL
如果你想要的图标是可用的,那就可以开始建立你的徽章了。Badges 的第一部分是 URL,如下:
1 | https://img.shields.io/badge/ |
然后,在第一部分之后,你要添加一个破折号和任何你希望出现在徽章上的写法(这部分是区分大小写的),所以你可以添加一种语言、框架、库、品牌,或者任何你可能想做的徽章。
1 | https://img.shields.io/badge/-ReactJS |
如果存在多个单词,你需要输入 %20 而不是空格。
1 | https://img.shields.io/badge/-React%20Router |
颜色
在名称之后,你需要为你的徽章背景添加一种颜色。shields.io 的网址接受命名的颜色,也接受十六进制代码。
要将命名的颜色或十六进制代码添加到链接中,你只需要再次添加一个破折号 - 和颜色。
1 | https://img.shields.io/badge/-ReactJS-lightblue |
Simple icons 上已经提示了每个图标应该用什么颜色。
图标
在明确了需要的图标之后,将其添加到 URL 中可能很简单,也可能更复杂一些。如果图标有一个单一的名字,如 React、Git 或 JavaScript 的情况下,这很简单,只需添加 ?logo=<name_of_the_icon_lowercased>。
1 | https://img.shields.io/badge/-ReactJs-61DAFB?logo=react |
对于像有一个以上单词的图标,你必须在单词之间添加一个破折号 -。
1 | https://img.shields.io/badge/-React%20Router-CA4245?logo=react-router |
图标颜色
你也可以为你的标志定义一个颜色,要做到这一点,只需在 URL 的最后加上 &logoColor=<color>。徽标也接受命名的颜色以及十六进制代码。
1 | https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white |
风格
shields.io 还允许对徽章进行一些更多的风格设计。
The flat style
这是这些徽章的默认样式,但如果由于任何原因,默认样式从一个浏览器到另一个浏览器发生了变化,或在将来发生了变化,要获得这种样式,你只需要在 URL 的末尾添加 &style=flat。
1 | https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=flat |
The plastic button style
这将使你的徽章变成一个 3D 按钮一样的徽章。要使用它,只需将 &style=plastic 添加到 URL 末尾。
1 | https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=plastic |
Squared Bold Style
这将使你的徽章成为一个长方形的平面徽章,上面的文字都是大写字母和粗体字。要使用它,只需将 &style=for-the-badge 添加到你的 URL 的末尾。
1 | https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=for-the-badge |
Squared Style
这使你的徽章成为一个矩形的平面徽章。要使用它,只需将 &style=flat-square 添加到你的 URL 末尾。
1 | https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=flat-square |
宽度
你可以通过添加 &logoWidth=<amount_of_pixels> 定义一个更大的宽度。
1 | https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&logoWidth=30 |