自定义 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
2
https://img.shields.io/badge/-ReactJS-lightblue
https://img.shields.io/badge/-ReactJs-61DAFB

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

参考