如题，比如这样：

你可以在你的项目的介绍文档上添加一些可爱的徽章（至少我觉得挺可爱）。

这个要怎么做呢？首先，我们需要使用到一个徽章制作网站：https://shields.io/。

这个网站可以帮助你直接制作所有类型的可爱图标。

Part 1 基本图标制作

先来看看基本的图标如何制作。

众所周知，图标都是绑定上一些提示信息的，比如说 GitHub 仓库代码的服部平次更新频次啊、代码的 star 数量、代码的 fork 数量以及代码开源协议使用等等。

既然绑定上的这些概念都和 GitHub 仓库本身的性质设置有关，那么我们就必须要给出我们要使用图标的对应仓库链接。

打开网页，我们可以看到上面有一排比较小的字：“search / project URL”（搜索/仓库 URL 地址）。在这里我们是可以输入东西的。这里我们要填入的是我们绑定的仓库地址。比如我演示给大家看的地址是：

https://github.com/SunnieShine/Sudoku

就把这个链接填上去就可以了。接着，我们点击它下面挨着的按钮：Suggest badges（推荐的徽章），然后，你就可以看到一系列的图标了。

其中，最后一个是推特的发推地址因为老外很喜欢用这个平台发一些 bia bia 言。我们用不上，所以这个可以不管。前面的几个分别对应的是：

• 仓库的 issue（问题列表）数；

• 仓库的 fork（被多少个人克隆了一份代码）数；

• 仓库的 star（点赞）数；

• 仓库代码使用的开源协议。

当然，暂时只支持英语，你改成中文的话可是可以，不过标准功能就到这里了，要改设置高级编辑操作，这个我们一会儿来说。

拿着这些徽章后，不是直接复制过去的，而是需要复制徽章的对应链接。操作很简单，点击这些徽章旁边的地址，会弹出一个框，提示你需不需要微调里面的内容。

一般来说，不用改。如果你要改也可以。

最上面的这一排是仓库地址解析后的文本框，这一排不要动。然后是下面这一排。这一排对应了 5 行，第一行是下拉框，选择的是徽章本身的样式。这个就自己试一下了，每一个都展示一下就太啰嗦了。

然后剩下的 4 行都是改变里面的内容和属性。其中：

• override label（覆盖文字）：表示徽章的黑色部分显示的文字修改成什么；

• override color（覆盖颜色）：表示徽章右边的数值部分显示成什么底色（填入的数值必须是十六进制的六个数位，代表 RGB 颜色码）；

• named logo（网站图标）：表示徽章黑色部分给出的提示文字可以配什么网站的图标；

• override logo color（覆盖网站图标颜色）：表示上一个内容（图标）的颜色是什么。

比如改变其中的一些数值可以立马看到对应的效果：

改好之后，点击下面的蓝色按钮的下拉部分，选择 Copy Markdown（复制 Markdown 文本）。

因为我们要显示的文字信息是在仓库的文档上，文档多以 Markdown 语法来书写，所以这里我们要用的就是这个地方的 Copy Markdown。别的（比如 Copy HTML）也可以。看你自己。

最后，咱已经复制好了，粘贴到文档的某个你想放上去的位置上，就 OK 了。

顺带一说，这里的 named logo 是可以输入 bilibili 的，输入上去图标直接就变成小电视了，然后换成 B 站自己的姨妈红，那酸爽（bushi）。

这就是改变办法。

Part 2 高级徽章生成

要说高级其实也没那么高级，只不过可以动态变动你想要的信息罢了。

第一个要说的是这部分：自定义文案。

这部分可以插入一些静态的、你自己定义的信息。这部分信息是没有前面给的那种带有固定含义的超链接支持的，但至少可以自定义嘛。

在 static（静态文本）下面的三个文本框里分别对应输入“标签名称”、“对应信息”以及“信息部分的背景色”就可以了。典型用法就是 B 站链接。

点击旁边的 Make Badge（生成徽章）：

效果就有了。这个怎么复制过去呢？生成之后会直接弹出一个新页面显示，而上面的网址就对应了这个图标的图片地址。你只需要按照 Markdown 语法，把它当成图片的地址输入到合适的代码里就可以了：

接着是第二部分：带有动态数值变更的徽章。

像是上面那样，带有 B 站粉丝个数的动态数据也可以用这样的徽章显示出来，而且徽章也是随着数值动态变动的（我真的没有凡尔赛的意思……

翻到 Dynamic（动态文案）部分。

这里我们需要填写的东西就比较多了，因为动态控制的信息也比较多。

一共有 7 个要变动的数据，第一个是下拉框，选择的是我们动态变动的数值是什么格式的。这里可能需要你有一丢丢的编程基础。倒不是说让你写代码，是至少要知道这些文件都是拿来干嘛的。下拉框拉下来有这样一些选项：

第一个是 JSON（JavaScript Object Notation，JavaScript 对象记法），这个写 JavaScript 前台代码的同学肯定不陌生。这也是现代程序经常用到的数据收发文本的固定标准了，都已经不限于只在 JavaScript 里才会使用了。

第二个是 XML（Extensible Markup Language，可扩展标记语言），这个写起来跟 HTML 长得比较像，实际上也确实是包含的关系。

第三个是 YAML（Another Markup Language，另外一个标记语言），这个写起来就不太像是 XML 了，不过这个也经常被用到过。

既然是拿 B 站粉丝数量来演示的话，自然用的是 B 站的数据。查看 B 站粉丝数量的话，我们大家都知道，打开网页就行了，对吧。不过这样显然不是很“科学”。这里的“科学”指的是有逻辑性、严谨性、正确性、唯一性以及便利性。换句话说，我们要查询这个数据显然不是单纯的开个网页这样，毕竟别人这个徽章的数据显示不会跟人一样也去开个网页，点开了然后识别一下用户的粉丝数，然后关掉网页，对吧，徽章又不是人。

这怎么做到呢？这里用到的是 B 站提供的 API。API 是啥我就不介绍了，也没必要去啰嗦，你只需要知道，B 站有一个机制，输入一个指定的网址信息，它会只显示出基本的数据信息，比如你的用户粉丝数量啊，投稿个数之类的，别的（视频啊这些）都不显示。这个网址是

https://api.bilibili.com/x/relation/stat?vmid=你的B站的UID（那串数字）

我的 UID 是 23736703，因此可以通过这个网址去查询到结果：

你看，输入这串地址之后，结果就是一个很清纯的数据信息了，虽然不是很懂，但至少你可以看到比如 follower 这样的单词，可以猜想到对应的意思是什么，对吧。

接着，这个网址信息我们一会儿会用到，所以先不要关掉网页。

然后，返回刚才的页面，我们对应这个图输入对应的信息即可：

输入结果参考：

其中的“查询表达式”部分，是看我们刚才的格式里给定的 follower 是怎么个层级关系而定的。比如刚才的网址的数据里，要找到 follower 的数值，它的外层套了一个 data 的部分，所以这个查询表达式的语法写成“$.data.follower”。其中美元符号 $ 不可少，因为这个查询表达式的语法要求就是以这个符号开头。

最后点击 Make Badge（生成徽章）就可以了：

可以看到，生成的结果的链接较长，是因为我们设置的参数信息特别多。这个徽章的复制方式和刚才介绍的那个是一样的，把地址信息复制粘贴到你的文档上去就可以了。

嗯，没了。