使用GitHub等在线代码托管服务的时候,你是否经常见到这样的小徽章?

你想拥有自己的小徽章吗?

或许你也想拥有动态显示的小徽章?(粉丝数少不要紧,说不定以后就多了呢^_^)

本篇文章教你如何制作这样的小徽章并显示在网页里!

Shields.io

Shield.io提供了制作小徽章的服务,分为静态徽章和动态徽章两种。静态徽章,即固定文字值,徽章的标签和文本都不会变化。动态徽章,是Shields.io通过你提供的请求URL和对应的query字段,帮你请求URL得到JSON数据后,把你需要展示的数据展示在文本中的服务。

静态徽章

一般徽章的格式为:https://img.shields.io/badge/{左标签文本}-{右消息文本}-{右消息背景颜色}

消息的背景颜色,Shields.io默认提供了一些英文单词构成的备选项,你也可以用颜色的HEX值:

brightgreengreenyellowgreenyelloworangeredbluelightgrey
successimportantcriticalinformationalinactive
bluevioletff69b49cf

例如我要显示左标签文本为Language,右消息文本为C++,右消息背景颜色为blue

https://img.shields.io/badge/Language-C++-blue

中文也是可以的,看起来非常专业(迫真):

https://img.shields.io/badge/语言-C加加-blue

动态徽章

动态徽章的原理就是:首先你得有个API服务,填入相关参数,请求该服务以后,返回JSON数据,里面包含你需要的动态数据。说实话,我可以自己造轮子,写API服务。因为这个轮子非常好造。但是既然非常好造,又有人做好了,那轮子可以放着以后造嘛哈哈哈,先用别人的呗。(说实话Substats有点慢,我真的有打算造轮子)

Substats

Substats就是这样一款服务,它主要的请求是各个社交平台,返回的是粉丝数或者订阅数。实际上原理也不难,通过请求社交平台的主页URL,获取HTML对应标签的值,返回的时候用JSON封装一下就行了。感兴趣的可以参考我之前的那篇关于服务器通过Python搭建API服务来动手试试。

那么Substats怎么用呢,看个例子:

https://api.spencerwoo.com/substats/?source=bilibili&queryKey=33320940

source的值填对应社交网站的名字,具体支持的名字值,需要参考Substats API

queryKey对应id之类体现唯一性标志的值,在这里是bilibili主页url里的uid。

https://space.bilibili.com/33320940

queryKey在这里就是33320930

先直接访问,看看返回的JSON:

1
{"status":200,"data":{"totalSubs":467,"subsInEachSource":{"bilibili":467},"failedSources":{}}}

status是Substats设计的状态码,200代表请求成功。

data是Substats设计的json对象,我们需要的是totalSubs键对应的值。这里是467。

现在,就可以通过固定的API服务URL和固定的JSON对象需要得到值所对应的键,告诉Shields.io让它替你完成任务了。

Shields的动态徽章API

格式为:

https://img.shields.io/badge/dynamic/json?url=<API请求网址>&label=<左标签文本>&query=<JSON的键>&color=<右消息背景颜色>&prefix=<前缀>&suffix=<后缀>

前缀和后缀一般用不上。

这里还是以显示我的bilibili粉丝数为例子:

https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dbilibili%26queryKey%3D33320940&label=bilibili%20fans&query=%24.data.totalSubs&color=282c34

上面的URL是经过转义了的,实际上就是API请求网址https://api.spencerwoo.com/substats/?source=bilibili&queryKey=33320940左标签文本bilibili fansJSON的键$.data.totalSubs右消息背景颜色282c34,前缀后缀直接不管,不加&prefix=<..>&suffix=<..>

你也可以访问Shields.io填入相应字段,点击Make Badge

shields-dynamic-badge

到这里,静态徽章和动态徽章就讲解完了,你可能发现,不对啊,前面的例子还有粉色标签和bilibili小电视的logo呢!没错,接下来还剩大家都非常关注的“美化”功能。

美化

图标的显示

可以在以上URL中加入&logo=bilibili,效果如下:

图标需要去simpleicons去按名称搜索,如果有,就可以直接用图标的名字。

例如我可以改成&logo=baidu

效果则变成这样:

如果simpleicons没有你想要的图标,你可以用自定义图标

自定义图标需要传入图标的base64编码,例如simpleicons没有网易云音乐的图标,我就必须自己找一张网易云的svg图标,转成base64格式,可以在这个网上进行转换:https://www.css-js.com/tools/base64.html

图标可以在easyicon.net找:https://www.easyicon.net

也有其他很多的SVG图标搜索网都可以看看。

这里我在easyicon搜索网易云音乐

拖入网易云音乐logo的svg格式图片文件到上面说的转换网址,取消勾选“使用在css中”,点击”Copy code”,得到base64编码到剪切板:

tobase64

1
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjMxLjAzMSIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDMxLjAzMSAzNCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzAwMDsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGQ9Ik0yMS4yNzksLTAuMDE1IEMyMS42MzAsMC4wNDEgMjEuOTg1LDAuMDgxIDIyLjMzMywwLjE1NiBDMjMuNTUzLDAuNDE5IDI0LjY0NiwwLjk0OCAyNS42MTEsMS43MjMgQzI2LjI0NCwyLjIzMSAyNi41MDIsMi44OTQgMjYuMzE5LDMuNjc5IEMyNi4xNTQsNC4zODUgMjUuNjkzLDQuODYxIDI0Ljk4MSw1LjA2NCBDMjQuMzA3LDUuMjU2IDIzLjY5OSw1LjExMCAyMy4xNDYsNC42NzcgQzIyLjQ0NSw0LjEyNyAyMS42NjcsMy43NDcgMjAuNzM1LDMuODI4IEMxOS45NDUsMy44OTcgMTkuMTkwLDQuNzEwIDE5LjI1OCw1LjQzNiBDMTkuMjg4LDUuNzYxIDE5LjQwNyw2LjA3OCAxOS40OTEsNi4zOTggQzE5LjY0MCw2Ljk2MiAxOS43OTQsNy41MjUgMTkuOTQ1LDguMDg5IEMxOS45NzEsOC4xODYgMTkuOTk2LDguMjYzIDIwLjEzNSw4LjI3MSBDMjIuMjU4LDguMzg0IDI0LjE3MSw5LjA2MCAyNS44NzYsMTAuMzEzIEMyNy41NTIsMTEuNTQ1IDI4LjkyNCwxMy4wMjQgMjkuODQ0LDE0Ljg4MiBDMzAuNTE5LDE2LjI0NiAzMC44OTcsMTcuNjg2IDMwLjk5NywxOS4xOTcgQzMxLjEzMCwyMS4yMDYgMzAuODg5LDIzLjE3MSAzMC4wOTAsMjUuMDI2IEMyOC4yMzIsMjkuMzM4IDI0Ljk2NSwzMi4xMTkgMjAuMzcxLDMzLjM5NyBDMTguNjIzLDMzLjg4NCAxNi44MzIsMzQuMDc0IDE1LjAxOSwzMy45NzMgQzExLjI1MCwzMy43NjMgNy45ODUsMzIuMzcwIDUuMjM1LDI5Ljg1MSBDMi41MjEsMjcuMzY3IDAuODI5LDI0LjMxMiAwLjI0MSwyMC43MjYgQy0wLjU2MCwxNS44NDggMC42NjgsMTEuNDc1IDMuOTE3LDcuNjgyIEM1LjcwMSw1LjU5OCA3LjkyOCw0LjA5NyAxMC41MjUsMy4xMjggQzExLjQyMCwyLjc5MyAxMi4zOTksMy4xMDUgMTIuODkwLDMuODY5IEMxMy4zOTIsNC42NTAgMTMuMjc0LDUuNjU1IDEyLjU3OSw2LjI3NiBDMTIuMzgzLDYuNDUyIDEyLjEzNSw2LjU5MSAxMS44ODcsNi42OTAgQzcuOTI4LDguMjcxIDUuMzEzLDExLjA1NiA0LjI3NCwxNS4xMTggQzMuMjY2LDE5LjA1OCA0LjE1NywyMi42NjUgNi43MzAsMjUuODQzIEM4LjM0MywyNy44MzUgMTAuNDI3LDI5LjE3MyAxMi45NDksMjkuODMwIEMxNC41NzksMzAuMjU1IDE2LjIyNiwzMC4yODIgMTcuODg2LDMwLjAzMSBDMTkuNTk5LDI5Ljc3MiAyMS4xOTksMjkuMjIxIDIyLjYzNCwyOC4yNjAgQzI0LjYwOCwyNi45MzcgMjYuMDE1LDI1LjE3NCAyNi43MTgsMjIuOTMwIEMyNy4zMjUsMjAuOTkzIDI3LjM0NiwxOS4wMzcgMjYuNTk2LDE3LjExNSBDMjUuOTkyLDE1LjU2OCAyNC45MjQsMTQuMzc4IDIzLjU4NSwxMy4zOTYgQzIyLjg3MCwxMi44NzEgMjIuMTAyLDEyLjQ2MiAyMS4yMjYsMTIuMjYxIEMyMS4xODYsMTIuMjUyIDIxLjE0NSwxMi4yNDcgMjEuMDczLDEyLjIzNiBDMjEuMTkzLDEyLjY4NCAyMS4zMDQsMTMuMTEwIDIxLjQxOSwxMy41MzUgQzIxLjY5NywxNC41NTkgMjEuOTgxLDE1LjU4MiAyMi4yNTQsMTYuNjA4IEMyMi44NDcsMTguODM4IDIyLjI3MywyMC43OTEgMjAuNzA0LDIyLjQ1NSBDMTkuMjUyLDIzLjk5NSAxNy40MDQsMjQuNjY1IDE1LjI4NSwyNC40NjQgQzEyLjkyNSwyNC4yNDAgMTEuMjQwLDIyLjk4NyAxMC4xNDEsMjAuOTU4IEM5LjU2NSwxOS44OTYgOS4zMTcsMTguNzUxIDkuMjcxLDE3LjU1MyBDOS4xOTgsMTUuNjQ1IDkuNjUzLDEzLjg4NCAxMC43NzAsMTIuMzA5IEMxMS45NzAsMTAuNjE4IDEzLjYzMSw5LjUzMyAxNS41OTUsOC44NTkgQzE1Ljc0OSw4LjgwNiAxNS45MDYsOC43NTggMTYuMDg3LDguNjk5IEMxNS45ODEsOC4zMDYgMTUuODcxLDcuOTIzIDE1Ljc3Niw3LjUzNyBDMTUuNjQ1LDcuMDA1IDE1LjQ3Nyw2LjQ3NiAxNS40MTEsNS45MzYgQzE1LjIxNyw0LjMzOCAxNS43MTgsMi45NDkgMTYuODQ2LDEuNzg1IEMxNy43NzAsMC44MzMgMTguODkwLDAuMjI5IDIwLjIzMiwwLjA0OCBDMjAuMzgwLDAuMDI4IDIwLjUyNywwLjAwNiAyMC42NzUsLTAuMDE1IEMyMC44NzYsLTAuMDE1IDIxLjA3NywtMC4wMTUgMjEuMjc5LC0wLjAxNSBaTTE3LjA4OCwxMi4zODcgQzE1LjkyNSwxMi43NDkgMTQuOTIxLDEzLjMwMSAxNC4xNjgsMTQuMjE5IEMxMy4xNjEsMTUuNDQ5IDEyLjk2MCwxNi44NjIgMTMuMjgxLDE4LjM2MyBDMTMuNDQ4LDE5LjE0MyAxMy44MzgsMTkuODEwIDE0LjUyMiwyMC4yNzYgQzE1LjM3NywyMC44NTggMTYuNTQyLDIwLjgzMyAxNy40MzYsMjAuMjI4IEMxOC4zNTAsMTkuNjA4IDE4Ljc1NywxOC42MDkgMTguNDkwLDE3LjU4NSBDMTguMTk4LDE2LjQ2MyAxNy44ODcsMTUuMzQ1IDE3LjU4NCwxNC4yMjUgQzE3LjQyMSwxMy42MjMgMTcuMjU4LDEzLjAxOSAxNy4wODgsMTIuMzg3IFoiIGNsYXNzPSJjbHMtMSIvPgo8L3N2Zz4K

然后就可以传入

1
&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjMxLjAzMSIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDMxLjAzMSAzNCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzAwMDsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGQ9Ik0yMS4yNzksLTAuMDE1IEMyMS42MzAsMC4wNDEgMjEuOTg1LDAuMDgxIDIyLjMzMywwLjE1NiBDMjMuNTUzLDAuNDE5IDI0LjY0NiwwLjk0OCAyNS42MTEsMS43MjMgQzI2LjI0NCwyLjIzMSAyNi41MDIsMi44OTQgMjYuMzE5LDMuNjc5IEMyNi4xNTQsNC4zODUgMjUuNjkzLDQuODYxIDI0Ljk4MSw1LjA2NCBDMjQuMzA3LDUuMjU2IDIzLjY5OSw1LjExMCAyMy4xNDYsNC42NzcgQzIyLjQ0NSw0LjEyNyAyMS42NjcsMy43NDcgMjAuNzM1LDMuODI4IEMxOS45NDUsMy44OTcgMTkuMTkwLDQuNzEwIDE5LjI1OCw1LjQzNiBDMTkuMjg4LDUuNzYxIDE5LjQwNyw2LjA3OCAxOS40OTEsNi4zOTggQzE5LjY0MCw2Ljk2MiAxOS43OTQsNy41MjUgMTkuOTQ1LDguMDg5IEMxOS45NzEsOC4xODYgMTkuOTk2LDguMjYzIDIwLjEzNSw4LjI3MSBDMjIuMjU4LDguMzg0IDI0LjE3MSw5LjA2MCAyNS44NzYsMTAuMzEzIEMyNy41NTIsMTEuNTQ1IDI4LjkyNCwxMy4wMjQgMjkuODQ0LDE0Ljg4MiBDMzAuNTE5LDE2LjI0NiAzMC44OTcsMTcuNjg2IDMwLjk5NywxOS4xOTcgQzMxLjEzMCwyMS4yMDYgMzAuODg5LDIzLjE3MSAzMC4wOTAsMjUuMDI2IEMyOC4yMzIsMjkuMzM4IDI0Ljk2NSwzMi4xMTkgMjAuMzcxLDMzLjM5NyBDMTguNjIzLDMzLjg4NCAxNi44MzIsMzQuMDc0IDE1LjAxOSwzMy45NzMgQzExLjI1MCwzMy43NjMgNy45ODUsMzIuMzcwIDUuMjM1LDI5Ljg1MSBDMi41MjEsMjcuMzY3IDAuODI5LDI0LjMxMiAwLjI0MSwyMC43MjYgQy0wLjU2MCwxNS44NDggMC42NjgsMTEuNDc1IDMuOTE3LDcuNjgyIEM1LjcwMSw1LjU5OCA3LjkyOCw0LjA5NyAxMC41MjUsMy4xMjggQzExLjQyMCwyLjc5MyAxMi4zOTksMy4xMDUgMTIuODkwLDMuODY5IEMxMy4zOTIsNC42NTAgMTMuMjc0LDUuNjU1IDEyLjU3OSw2LjI3NiBDMTIuMzgzLDYuNDUyIDEyLjEzNSw2LjU5MSAxMS44ODcsNi42OTAgQzcuOTI4LDguMjcxIDUuMzEzLDExLjA1NiA0LjI3NCwxNS4xMTggQzMuMjY2LDE5LjA1OCA0LjE1NywyMi42NjUgNi43MzAsMjUuODQzIEM4LjM0MywyNy44MzUgMTAuNDI3LDI5LjE3MyAxMi45NDksMjkuODMwIEMxNC41NzksMzAuMjU1IDE2LjIyNiwzMC4yODIgMTcuODg2LDMwLjAzMSBDMTkuNTk5LDI5Ljc3MiAyMS4xOTksMjkuMjIxIDIyLjYzNCwyOC4yNjAgQzI0LjYwOCwyNi45MzcgMjYuMDE1LDI1LjE3NCAyNi43MTgsMjIuOTMwIEMyNy4zMjUsMjAuOTkzIDI3LjM0NiwxOS4wMzcgMjYuNTk2LDE3LjExNSBDMjUuOTkyLDE1LjU2OCAyNC45MjQsMTQuMzc4IDIzLjU4NSwxMy4zOTYgQzIyLjg3MCwxMi44NzEgMjIuMTAyLDEyLjQ2MiAyMS4yMjYsMTIuMjYxIEMyMS4xODYsMTIuMjUyIDIxLjE0NSwxMi4yNDcgMjEuMDczLDEyLjIzNiBDMjEuMTkzLDEyLjY4NCAyMS4zMDQsMTMuMTEwIDIxLjQxOSwxMy41MzUgQzIxLjY5NywxNC41NTkgMjEuOTgxLDE1LjU4MiAyMi4yNTQsMTYuNjA4IEMyMi44NDcsMTguODM4IDIyLjI3MywyMC43OTEgMjAuNzA0LDIyLjQ1NSBDMTkuMjUyLDIzLjk5NSAxNy40MDQsMjQuNjY1IDE1LjI4NSwyNC40NjQgQzEyLjkyNSwyNC4yNDAgMTEuMjQwLDIyLjk4NyAxMC4xNDEsMjAuOTU4IEM5LjU2NSwxOS44OTYgOS4zMTcsMTguNzUxIDkuMjcxLDE3LjU1MyBDOS4xOTgsMTUuNjQ1IDkuNjUzLDEzLjg4NCAxMC43NzAsMTIuMzA5IEMxMS45NzAsMTAuNjE4IDEzLjYzMSw5LjUzMyAxNS41OTUsOC44NTkgQzE1Ljc0OSw4LjgwNiAxNS45MDYsOC43NTggMTYuMDg3LDguNjk5IEMxNS45ODEsOC4zMDYgMTUuODcxLDcuOTIzIDE1Ljc3Niw3LjUzNyBDMTUuNjQ1LDcuMDA1IDE1LjQ3Nyw2LjQ3NiAxNS40MTEsNS45MzYgQzE1LjIxNyw0LjMzOCAxNS43MTgsMi45NDkgMTYuODQ2LDEuNzg1IEMxNy43NzAsMC44MzMgMTguODkwLDAuMjI5IDIwLjIzMiwwLjA0OCBDMjAuMzgwLDAuMDI4IDIwLjUyNywwLjAwNiAyMC42NzUsLTAuMDE1IEMyMC44NzYsLTAuMDE1IDIxLjA3NywtMC4wMTUgMjEuMjc5LC0wLjAxNSBaTTE3LjA4OCwxMi4zODcgQzE1LjkyNSwxMi43NDkgMTQuOTIxLDEzLjMwMSAxNC4xNjgsMTQuMjE5IEMxMy4xNjEsMTUuNDQ5IDEyLjk2MCwxNi44NjIgMTMuMjgxLDE4LjM2MyBDMTMuNDQ4LDE5LjE0MyAxMy44MzgsMTkuODEwIDE0LjUyMiwyMC4yNzYgQzE1LjM3NywyMC44NTggMTYuNTQyLDIwLjgzMyAxNy40MzYsMjAuMjI4IEMxOC4zNTAsMTkuNjA4IDE4Ljc1NywxOC42MDkgMTguNDkwLDE3LjU4NSBDMTguMTk4LDE2LjQ2MyAxNy44ODcsMTUuMzQ1IDE3LjU4NCwxNC4yMjUgQzE3LjQyMSwxMy42MjMgMTcuMjU4LDEzLjAxOSAxNy4wODgsMTIuMzg3IFoiIGNsYXNzPSJjbHMtMSIvPgo8L3N2Zz4K

效果:

可以看到,成功显示网易云音乐的logo。

标签的颜色

可以再加参数&labelColor={颜色值}

例如之前的bilibili例子,我想让标签是粉色FE7398

那么我加上一个参数&labelColor=FE7398

效果为:

当然,和之前一样,支持已有的英文备选值。填入pink估计效果不会差太远。

但是现在图标的颜色是蓝色,又有点和白色的文字不太协调,和粉色的对比度也不高,我觉得白色更合适,怎么办呢

图标的颜色

加上参数&logoColor={颜色值}即可。

我这里加上&logoColor=white来看看效果:

看,效果非常好!

徽章的样式

徽章有5种样式,看看官网的例子:

badge-style

5种样式分别是plasticflatflat-squarefor-the-badge以及social

我们给之前的url再加上&style=for-the-badge,看看效果:

WOW!感觉还不错吼

到这里,图标的url为

1
https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dbilibili%26queryKey%3D33320940&label=bilibili%20fans&query=$.data.totalSubs&color=282c34&logo=bilibili&labelColor=FE7398&logoColor=white&style=for-the-badge

最后通过<img>标签或者markdown的![]()方法来显示徽章就行啦!

比如

1
<img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dbilibili%26queryKey%3D33320940&label=bilibili%20fans&query=$.data.totalSubs&color=282c34&logo=bilibili&labelColor=FE7398&logoColor=white&style=for-the-badge">

或者

1
![bilibili fans badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dbilibili%26queryKey%3D33320940&label=bilibili%20fans&query=$.data.totalSubs&color=282c34&logo=bilibili&labelColor=FE7398&logoColor=white&style=for-the-badge)

更多参数

更多参数详见Shields.io官网,官网提供了例子。

总结

折腾了这么久,总算是吧Shields.io和Substats的使用方法过了一遍。

徽章很好看,你学会怎么制作了吗?如果可以,你可以自己写个API服务试试(毕竟Substats速度一般)。

⬆︎TOP