小徽章 shields.io Badges 用法

如 Percent Encoding 所指定，本文所有 URL 路径应使用 uri 转义。
（例：c++ 应该是 c%2B%2B，let's go 应该是 let%27s%20go，诸如此类）

静态 Static

短横线 dash - => 分隔符
双短横线 -- => 短横线 -
双下划线 __ => 下划线 _
_ 或 (转义后为 %20) => 空格

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

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

颜色 Colors

节点 Endpoint

官网详细介绍

https://img.shields.io/endpoint?url=<URL>

其他参数同静态标签，一样可以生效，如覆写 style、label、message、color、logoColor 等。

<URL> 返回的响应应该是如下格式的 json：

1
2
3
4
5
6
{
  "schemaVersion": 1,
  "label": "is it monday",
  "message": "no",
  "color": "orange"
}

举例：https://shields.redsparr0w.com/2473/monday

动态 Dynamic

访问接口获取响应后按照写好的路径读取指定数据，不如 endpoint 用法省心，但胜在灵活，不必专门写固定格式的接口。
注意 query 字段取得的结果会且只会显示在右侧标签。
JSON 路径验证

支持三种格式 json、xml、yaml 依次为（注意路径区别）：

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

整活

新建一个 Repo，push 一个 .json 文件，可以把仓库当成简陋的接口用。比如：

https://github.com/<用户名>/<仓库名>/raw/main/<文件名>.json

访问这个地址，响应就是 JSON 文件的内容。剩下不用我多说了 8。

配合 shields.io 的 dynamic 用法：

当然直接用 gist 也可以。

样式 Styles

Parameters	Styles
`?style=plastic&logo=appveyor`
`?style=flat&logo=appveyor`
`?style=flat-square&logo=appveyor`
`?style=for-the-badge&logo=appveyor`
`?style=social&logo=appveyor`

其他参数

Parameters	Styles	Description
`?label=healthinesses`		覆写左边的文本注意转义URL-Encoding
`?logo=appveyor`		添加 LOGO 支持列表参考simple-icons
`?logo=data:image/png;base64,…`		图片需要高大于 14 像素并小于 8192 bytes
`?logoColor=violet`		自定义 LOGO 的颜色（支持 `hex`/`rgb`/`rgba`/`hsl`/`hsla`/`css` 格式）
`?logoWidth=40`		自定义 LOGO 区域宽度
`?link=http://left&link=http://right`		自定义左右标签不同链接注意需要在 `<object>` 标签中才生效 `<img>` 不行
`?labelColor=abcdef`		自定义左边标签的背景色
`?color=fedcba`		自定义右边标签的背景色
`?cacheSeconds=3600`		自定义缓存时间最小 300 更小会被忽略

其他玩法

监控网站状态

https://img.shields.io/website?up_color=brightgreen&up_message=Online&down_color=lightgrey&down_message=Offline&label=<LABEL>&url=<URL>&logo=nginx

小徽章 shields.io Badges 用法

相关文章：