ƝⱲƲzʍҽժ's աօɾƖժ
NWUzmed
2023-02-03
目录

使用Shields.io建立几个彩色小徽章

想知道下面这些彩色小徽章是怎么制作的吗？快来Shields.io (opens new window)

提示

官网：Shields.io: Quality metadata badges for open source projects https://shields.io/ (opens new window)

Github项目：badges/shields: Concise, consistent, and legible badges in SVG and raster format https://github.com/badges/shields (opens new window)

# Github项目主页的Examples

  • code coverage percentage: coverage
  • stable release version: version
  • package manager release: gem
  • status of third-party dependencies: dependencies
  • static code analysis grade: codacy
  • SemVer version observance: semver
  • amount of Liberapay donations per week: receives
  • Python package downloads: downloads
  • Chrome Web Store extension rating: rating
  • Uptime Robot percentage: uptime
  • follow on Twitter: follow on Twitter

以上这些徽章都是通过Shields.io完成的，我们来看看制作方法吧

# 静态（Static）徽章制作

# 在线自动生成

可以直接在官网输入自定义的label、messege、color文本，然后点击Make Badge，浏览器会在新标签页打开小徽章，复制相应网址即可使用

默认color对应右侧messege信息底色，不填写color则底色为亮绿色brightgreen，左侧label标签底色默认灰色grey。color除了可填写英文单词外，也可以是16进制的颜色代码，可从颜色表大全 (opens new window)查找。

# 修改固定短链

直接手动改写官网提供的两种模板链接

# 使用"-"分隔符

https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>
1

例如将LABEL改为Github，MESSAGE改为真不错，COLOR改为blue（记得去除括号< >），则链接变为

https://img.shields.io/badge/Github-真不错-blue
1

对应的徽章为

# 使用query字符串参数

https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>
1

同样修改可得链接，对应徽章也是不变的 

https://img.shields.io/static/v1?label=Github&message=真不错&color=blue
1

# 动态（Dynamic）徽章制作

# 修改固定短链

动态徽章并不是指徽章本身像.gif图片那样变化，而是指右侧数据（对应静态徽章就是messege部分）可动态更新，常用来展示某个平台的粉丝、关注者数量、RSS 订阅者数量……

动态数据的获取需要调用API服务，而Shields.io本身就支持很多第三方API数据服务，以下是关于Github的followers、stars、forks、issues等徽章的直接写法

  • Github账户的followers数量 
https://img.shields.io/github/followers/用户名
1
  • Github项目的Contributors数量 
https://img.shields.io/github/contributors/用户名/仓库名
1
  • Github项目的当月/年的commit数量 
https://img.shields.io/github/commit-activity/m/用户名/仓库名
https://img.shields.io/github/commit-activity/y/用户名/仓库名
1
2
  • Github项目的release版本号 
https://img.shields.io/github/release/用户名/仓库名
1
  • Github项目的stars数量 
https://img.shields.io/github/stars/用户名/仓库名
1
  • Github项目的forks数量 
https://img.shields.io/github/forks/用户名/仓库名
1
  • Github项目的open issue数量 
https://img.shields.io/github/issues/用户名/仓库名
1

还有这些Shields.io的官方动态徽章

build status service-test status coverage chat on Discord 
<img src="https://img.shields.io/opencollective/backers/shields" />
<img src="https://img.shields.io/opencollective/sponsors/shields" />
<img src="https://img.shields.io/circleci/project/github/badges/shields/master" alt="build status">
<img src="https://img.shields.io/circleci/project/github/badges/daily-tests?label=service%20tests" alt="service-test status">
<img src="https://img.shields.io/coveralls/github/badges/shields" alt="coverage">
<img src="https://img.shields.io/discord/308323056592486420?logo=discord" alt="chat on Discord">
1
2
3
4
5
6

# 在线自动生成

在线生成的data type支持json、xml和yaml三种

直接在线填写，例如我要生成我的B站粉丝数徽章，可将label写为B站，将data url写为https://api.spencerwoo.com/substats/?source=bilibili&queryKey=327638134，将query写为$.data.totalSubs，将color写为ff69b4，将prefix写为粉丝数，将suffix写为位，然后点击Make Badge即可生成如下徽章

可能有人要问上述data url填写的链接从何而来？query字段又为何写成$.data.totalSubs？

其实，这是由于Shields.io暂不支持一些第三方数据服务，例如网易云、微博、B站等国内平台的粉丝量，这就需要我们自建API数据接口，不过有大佬已经帮我们做好了，那就是Home | Substats Docs (opens new window)，项目开源在：GitHub - spencerwooo/Substats (opens new window)，直接拿过来用就好。

Substats API 的语法非常简单，简单拼接URL即可进行数据请求，我们只需关注并提供如下的两个字段：

  • 目标服务名称 source：要请求的服务、网站和平台名（比如：bilibili、weibo、neteaseMusic……）
  • 请求数据标签 queryKey：要查询的数据对应的标签或名称（例如B站取个人空间页链接的最后一串数字）
https://api.spencerwoo.com/substats/?source={目标服务名称}&queryKey={请求数据标签}
1

准确的source和queryKey写法可以从这里API details | Substats Docs (opens new window)查阅

例如请求我个人B站粉丝量的data url可写成

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

粘贴到浏览器，回车，即可返回如下数据

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

其中"status":200表示数据请求成功，"totalSubs":150表示请求到的总粉丝量，"subsInEachSource"包含每个服务请求到的数据量（😎同时请求多个服务可参考这里 (opens new window)），我们这里只有"bilibili":150这一个服务的数据，最后的"failedSources"表示请求失败的数据源

至此，动态徽章在线生成所需要的两个重要数据我们就可以填写了，点击Make Badge后生成如下链接和徽章 

https://img.shields.io/badge/dynamic/json?color=ff69b4&label=B%E7%AB%99&prefix=%E7%B2%89%E4%B8%9D%E6%95%B0&query=%24.data.totalSubs&suffix=%E4%BD%8D&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dbilibili%26queryKey%3D327638134
1

在前面，我们已经讲过通过修改Shields.io的固定短链来展示Github账户的followers数量，那么这里我们还可以通过Substats API进行在线生成，其中queryKey取个人账号名称

https://api.spencerwoo.com/substats/?source=github&queryKey=nwuzmedoutlook
1

返回数据

{"status":200,"data":{"totalSubs":21,"subsInEachSource":{"github":21},"failedSources":{}}}
1

在线生成Shields.io链接和徽章

https://img.shields.io/badge/dynamic/json?color=green&label=Github&prefix=followers%E6%9C%89&query=%24.data.totalSubs&suffix=%E4%BD%8D&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dgithub%26queryKey%3Dnwuzmedoutlook
1

# 修改固定长链

手动修改官方提供的链接

https://img.shields.io/badge/dynamic/json?url=<URL>&label=<LABEL>&query=<$.DATA.SUBDATA>&color=<COLOR>&prefix=<PREFIX>&suffix=<SUFFIX>
1

此时需要注意，我们根据Substats API拼接的url地址不能直接粘贴进去，否则无法识别，推荐使用URL编码/解码工具 (opens new window)进行转义

至此，同样是B站粉丝数徽章，我们可以直接写出链接

https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dbilibili%26queryKey%3D327638134&label=B站&query=$.data.totalSubs&color=ff69b4&prefix=粉丝数&suffix=位
1

粘贴到浏览器地址栏，可见

对于上述任意Shields.io徽章链接，按照如下两个小规律即可快速添加logo

  • Shields.io链接里没有?时，在链接末尾添加?logo=logo名称

  • Shields.io链接里有?时，在链接末尾添加&logo=logo名称

还是以B站粉丝量徽章为例，可以看到链接中json后面有?，所以只需在末尾加上&logo=bilibili即可得

具体的logo名称字段写法可在如下两个网站查询，常见平台的logo都有

Simple Icons (opens new window)

simple-icons/slugs.md at develop · simple-icons/simple-icons (opens new window)

# 其他样式更改

按照添加logo的两个规律，我们还可以修改logo颜色（对应字段写为logoColor=）、修改label标签默认的grey底色（对应字段写为labelColor=）

例如将这个徽章的label底色换为粉色ff69b4、logo颜色换为绿色green、右侧底色换为灰色grey，变成这样

可直接修改链接为

https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dbilibili%26queryKey%3D327638134&label=B站&query=$.data.totalSubs&color=grey&prefix=粉丝数&suffix=位&logo=bilibili&labelColor=ff69b4&logoColor=green
1

# HTML 引入

# 静态无logo示例

<a href="https://qq-group.cf/" target="_blank">
  <img src="https://img.shields.io/badge/Group-help-red">
</a>
1
2
3

# 静态有logo示例

<a href="https://github.com/" target="_blank">
  <img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub">
</a>
1
2
3

# 动态无logo示例

<a href="https://github.com/"  target="_blank">
  <img src="https://img.shields.io/badge/dynamic/json?color=blue&label=B%E7%AB%99&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dbilibili%26queryKey%3D327638134">
</a>
1
2
3

# 动态有logo示例

<a href="https://github.com/"  target="_blank">
  <img src="https://img.shields.io/badge/dynamic/json?color=blue&label=B%E7%AB%99&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dbilibili%26queryKey%3D327638134&logo=bilibili">
</a>
1
2
3

# 完整示例



<a style="margin-inline:5px" target="_blank" href="https://github.com/">
  <img title="本站项目由Gtihub托管" class="entered loading" src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" height="120" align="left" data-ll-status="loading">
</a>
1
2
3

# 类似Shields.io的网站

Badgen - Fast badge generating service (opens new window)

For the Badge (opens new window)

Version Badge for npm, RubyGems, PyPI, Bower and other packages (opens new window)

boennemann/badges: Readme Badges – Gotta catch 'em all (opens new window)

alexandresanlim/Badges4-README.md-Profile: Improve your README.md profile with these amazing badges. (opens new window)

List of Badges, For Your Profile | badges (opens new window)

# 参考：

用 Substats 和 Shields.io 为你的个人主页定制动态数据小牌子 - 少数派 (opens new window)

Query format | Substats Docs (opens new window)

使用"shields.io"创建静态和动态的github项目徽章 - 二柒席地而坐 - 博客园 (opens new window)

Git小徽章：Shields.io与Substats | Lazy_V's Blog (opens new window)

编辑此页 (opens new window)
#shields#Github
上次更新: 2023/02/25, 05:52:41

← Freenom免费域名提供商要倒闭了吗→

最近更新
01
城市街区-Emoji
02-27
02
免费阅读一些知乎盐选内容
02-27
03
New Bing申请通过，赶快来正式体验一下
02-24
更多文章>
Theme by Vdoing | Copyright © 2016-2023 NWUzmed | MIT License | 萌ICP备20232425号