在github写个人介绍的时候，我们可能会想要一些标签就像这个。那它是怎么实现的呢，怎么样调整它的颜色的呢。

shields.io

本质上，我们是用了这个来自于https://shields.io/的网站的api，它可以提供各种风格的“徽章(badage)”， 例如这样的，详细的内容你可以访问这个网站来了解更多。

语言的badage

显示的文字

不过今天我们的重点不在这里，而是在个人介绍中关于语言的badage的构建方法，以c++为例：

![C++](https://img.shields.io/badge/c++-%2300599C.svg?style=for-the-badge&logo=c%2B%2B&logoColor=white)

首先应该是正常的链接前缀https://img.shields.io/badage/c++，这样徽章上显示的文字就是c++了，例如我也可以改成banned:

![C++](https://img.shields.io/badge/banned-%2300599C.svg?style=for-the-badge&logo=c%2B%2B&logoColor=white)

这样便可以得到文字显示banned的标签：

显示的颜色

在显示的文字之后，用-连接后面接的是颜色，如果使用的是hex代码，举个例子，#EF2D5E，那我们只需要#号后面的值即可。例如

![C++](https://img.shields.io/badge/c++-EF2D5E?style=for-the-badge&logo=c%2B%2B&logoColor=white)

便可以得到这样的红色的徽章。如果想要各种语言的标注的颜色的参考，可以看这个网站，里面有大部分你想要的语言、编辑器、甚至是像steam这样的游戏启动器的颜色和icon

logo

既然提到了https://simpleicons.org/，那我们就先讲下这个logo，因为有些语言或者说软件可能有很多种叫法，举个例子unity，也可能是unity3d；还有c#，英文的叫法应该是c sharp。由于有些字符是不会出现在网址的，或者说它的有些叫法在shields.io里就是没有的(会出现404)。所以这里我们就参考https://simpleicons.org/的命名方式即可。

在/badage/文字-颜色之后，添加?，?后面的内容就是各种参数了，例如这里的logo，和它相关的就是logo=c%2B%2B，例如这里我把logo改成星巴克的标志

![C++](https://img.shields.io/badge/c++-%2300599C.svg?style=for-the-badge&logo=Starbucks&logoColor=white)

便可以得到一个印有星巴克标志的徽章

logo的颜色

使用logoColor这个参数来调整logo的颜色，例如把logo改成红色的:

![C++](https://img.shields.io/badge/c++-%2300599C.svg?style=for-the-badge&logo=c%2B%2B&logoColor=red)

徽章的风格

徽章的风格也是可以修改的，参数是style，例如

![C++](https://img.shields.io/badge/c++-%2300599C.svg?style=social&logo=c%2B%2B&logoColor=white)

或者是

![C++](https://img.shields.io/badge/c++-%2300599C.svg?style=flat&logo=c%2B%2B&logoColor=white)

大致内容就是这么多，更多风格化的内容，请自行转往这个网站