ƝⱲƲzʍҽժ's աօɾƖժ ƝⱲƲzʍҽժ's աօɾƖժ
首页
DAC导航
  • 碳索

    • 碳源-探本溯源
    • 碳路-负碳之路
    • 碳望-三零六零
  • DAC

    • 技术概览
    • 基础研究
    • 工程案例
  • 风轻扬

    • 风
    • 氢
    • 阳
  • 基础科学
  • 网络技术
  • 趣味知识
  • 技术文档
  • 软件教程
  • 教育考试
  • 文理知识
  • 兴趣技能
  • 影音娱乐
  • 其他资源
  • 学习
  • 工作
  • 分类
  • 标签
  • 归档
  • 我
  • 友链
GitHub (opens new window)

NWUzmed

A computer💻 hobbyist majoring in chemical engineering👨‍🔬.
首页
DAC导航
  • 碳索

    • 碳源-探本溯源
    • 碳路-负碳之路
    • 碳望-三零六零
  • DAC

    • 技术概览
    • 基础研究
    • 工程案例
  • 风轻扬

    • 风
    • 氢
    • 阳
  • 基础科学
  • 网络技术
  • 趣味知识
  • 技术文档
  • 软件教程
  • 教育考试
  • 文理知识
  • 兴趣技能
  • 影音娱乐
  • 其他资源
  • 学习
  • 工作
  • 分类
  • 标签
  • 归档
  • 我
  • 友链
GitHub (opens new window)
  • 基础科学

  • 网络技术

    • 关于DAC导航建立过程的一些记录
    • 使用jsDelivr + Github搭建免费CDN
    • Hexo教程和常用命令
    • Freenom免费域名注册
    • Markdown语法初次尝试
    • MongoDB+Vercel+Github+Freenom搭建Twikoo评论系统
    • TOP公告
    • 快速申请GitHub Student Developer Pack
    • 简洁的多引擎搜索主页 DAC-Search
    • ChatGPT试玩,真有那么厉害吗?
    • 体验微软刚推出的新一代AI驱动搜索引擎New Bing
    • New Bing申请通过,赶快来正式体验一下
    • 网易云音乐
    • 每日60秒早报
    • 在Vercel上如何部署Github某个项目的其他分支
    • 使用Shields.io建立几个彩色小徽章
      • Github项目主页的Examples
      • 静态(Static)徽章制作
        • 在线自动生成
        • 修改固定短链
        • 使用"-"分隔符
        • 使用query字符串参数
      • 动态(Dynamic)徽章制作
        • 修改固定短链
        • 在线自动生成
        • 修改固定长链
      • 添加logo
      • 其他样式更改
      • HTML 引入
        • 静态无logo示例
        • 静态有logo示例
        • 动态无logo示例
        • 动态有logo示例
        • 完整示例
      • 类似Shields.io的网站
      • 参考:
    • Freenom免费域名提供商要倒闭了吗
  • 趣味知识

  • 奇趣
  • 网络技术
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

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

# 添加logo

对于上述任意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

← 在Vercel上如何部署Github某个项目的其他分支 Freenom免费域名提供商要倒闭了吗→

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