小徽章 shields.io Badges 用法

Percent Encoding 所指定,本文所有 URL 路径应使用 uri 转义。
(例:c++ 应该是 c%2B%2Blet'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>

其他参数同静态标签,一样可以生效,如覆写 stylelabelmessagecolorlogoColor 等。

<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 路径验证

支持三种格式 jsonxmlyaml 依次为(注意路径区别):

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.iodynamic 用法:

当然直接用 gist 也可以。

样式 Styles

ParametersStyles
?style=plastic&logo=appveyor
?style=flat&logo=appveyor
?style=flat-square&logo=appveyor
?style=for-the-badge&logo=appveyor
?style=social&logo=appveyor

其他参数

ParametersStylesDescription
?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
updatedupdated2022-05-012022-05-01