在Markdown中使用 Shields.io 生成的徽章
Shields.io 是一个用于生成项目状态徽章（Badges）的在线服务，广泛用于 GitHub、GitLab、Gitee 等代码托管平台的 README 文件中。
这些徽章美观、信息清晰，可用于展示版本号、构建状态、许可证、下载量等。
官方网站：https://shields.io/
静态徽标（Static Badges）
静态徽标适用于固定内容，比如项目标签、作者信息等。
所有信息都是写死的
两种常用 URL 格式：
格式 1（推荐）：
https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>
示例：
格式 2（简洁写法）：
https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>
示例：
注意：如果
LABEL或MESSAGE中包含空格或特殊字符，需进行 URL 编码（如空格 →%20）。
动态徽标（Dynamic Badges）
动态徽标可从远程 JSON/XML/YAML 接口获取数据并实时显示。
支持的数据格式与 URL 模板：
JSON
https://shields.io/badges/dynamic-json-badge
https://img.shields.io/badge/dynamic/json?url=<URL>&label=<LABEL>&query=<$.DATA.SUBDATA>&color=<COLOR>&prefix=<PREFIX>&suffix=<SUFFIX>
参数
url：获取json文档的链接，例如 https://github.com/badges/shields/raw/master/package.json
query：用于查询文档的JSONPath表达式 例如$.name
prefix / suffix：在显示值前后添加文本（如单位）
style：徽章的类型 可选值： [ flat , flat-square , plastic , for-the-badge , social ] 如果未指定，则此徽章的默认样式为“flat(扁平)”
logo：图标 图标别名来自 simple-icons 图标库。您可以点击simple-icons 图标库中的图标标题复制别名，也可以在 simple-icons 图标库的slugs.md 文件中找到。更多信息。
logoColor：徽标颜色（支持十六进制、RGB、RGBA、HSL、HSLA 和 CSS 命名颜色）。支持简单图标徽标，不支持自定义徽标。
logoSize：通过设置使图标自适应调整大小auto。这对于一些较宽的徽标（例如amd和）非常有用amg。支持简单图标徽标，但不支持自定义徽标。
label：覆盖默认的左侧文本（空格或特殊字符需要进行URL 编码！)
labelColor：左侧部分的背景颜色（支持 hex、rgb、rgba、hsl、hsla 和 css 命名颜色）
color：右侧部分的背景颜色（支持 hex、rgb、rgba、hsl、hsla 和 css 命名颜色）。
cacheSeconds：HTTP 缓存生命周期（规则用于根据每个徽章推断默认值，任何低于默认值的值都将被忽略）。 例如3600
案例
获取license
获取数据的url https://github.com/badges/shields/raw/master/package.json
jsonpath $.license
获取gitee仓库的最新tag名称
jsonpath $[0].name
这里还使用了图标、图标颜色、颜色
正则表达式
https://shields.io/badges/dynamic-regex-badge
https://img.shields.io/badge/dynamic/regex?url=<URL>&label=<LABEL>&search=<Every (.*?) it serves (?<amount>.*?) images>&color=<COLOR>
参数
url：获取文档的链接，例如 https://raw.githubusercontent.com/badges/shields/refs/heads/master/README.md
search：用于从文档中提取数据的 RE2 表达式。仅返回第一个匹配的文本。 例如Every (.*?) it serves (?<amount>.*?) images
replace：替换字符串，用于替换搜索正则表达式。使用$$转义$符号， $n指定第 n 个匹配组， $<name>指定命名组，以此类推。如果为空（默认值），则不进行替换，并显示完整的匹配文本。例如$<amount>/$1
flags：创建正则表达式时要使用的标志： i = 不区分大小写， m = 多行模式， s = 点号匹配换行符。默认值为无。例如 ims
style：徽章的类型 可选值： [ flat , flat-square , plastic , for-the-badge , social ] 如果未指定，则此徽章的默认样式为“flat(扁平)”
logo：图标 图标别名来自 simple-icons 图标库。您可以点击simple-icons 图标库中的图标标题复制别名，也可以在 simple-icons 图标库的slugs.md 文件中找到。更多信息。
logoColor：徽标颜色（支持十六进制、RGB、RGBA、HSL、HSLA 和 CSS 命名颜色）。支持简单图标徽标，不支持自定义徽标。
logoSize：通过设置使图标自适应调整大小auto。这对于一些较宽的徽标（例如amd和）非常有用amg。支持简单图标徽标，但不支持自定义徽标。
label：覆盖默认的左侧文本（空格或特殊字符需要进行URL 编码！)
labelColor：左侧部分的背景颜色（支持 hex、rgb、rgba、hsl、hsla 和 css 命名颜色）
color：右侧部分的背景颜色（支持 hex、rgb、rgba、hsl、hsla 和 css 命名颜色）。
cacheSeconds：HTTP 缓存生命周期（规则用于根据每个徽章推断默认值，任何低于默认值的值都将被忽略）。 例如3600
案例
%20it%20serves%20(?%3Camount%3E.*?)%20images&replace=$%3Camount%3E&color=brightgreen&style=for-the-badge&logo=github){kind=icon}
获取数据的url是https://raw.githubusercontent.com/badges/shields/refs/heads/master/README.md
正则表达式是 Every (.*?) it serves (?<amount>.*?) images
替换是 $<amount>
属于是把 amount 命名组匹配到的值取出来使用
%20it%20serves%20(?%3Camount%3E.*?)%20images&replace=$%3Camount%3E--$1&color=brightgreen&style=for-the-badge&logo=github){kind=icon}
也可以多个拼接
正则表达式是 Every (.*?) it serves (?<amount>.*?) images
替换是 $<amount>--$1
也可以使用后向引用和命名组拼接使用
TOML
https://shields.io/badges/dynamic-toml-badge
https://img.shields.io/badge/dynamic/toml?url=<URL>&label=<LABEL>&query=%24.title&color=<COLOR>&prefix=<PREFIX>&suffix=<SUFFIX>
参数
url：获取 TOML 文档的链接，例如 https://raw.githubusercontent.com/squirrelchat/smol-toml/mistress/bench/testfiles/toml-spec-example.toml
query：用于查询文档的JSONPath表达式 例如$.title
prefix / suffix：在显示值前后添加文本（如单位）
style：徽章的类型 可选值： [ flat , flat-square , plastic , for-the-badge , social ] 如果未指定，则此徽章的默认样式为“flat(扁平)”
logo：图标 图标别名来自 simple-icons 图标库。您可以点击simple-icons 图标库中的图标标题复制别名，也可以在 simple-icons 图标库的slugs.md 文件中找到。更多信息。
logoColor：徽标颜色（支持十六进制、RGB、RGBA、HSL、HSLA 和 CSS 命名颜色）。支持简单图标徽标，不支持自定义徽标。
logoSize：通过设置使图标自适应调整大小auto。这对于一些较宽的徽标（例如amd和）非常有用amg。支持简单图标徽标，但不支持自定义徽标。
label：覆盖默认的左侧文本（空格或特殊字符需要进行URL 编码！)
labelColor：左侧部分的背景颜色（支持 hex、rgb、rgba、hsl、hsla 和 css 命名颜色）
color：右侧部分的背景颜色（支持 hex、rgb、rgba、hsl、hsla 和 css 命名颜色）。
cacheSeconds：HTTP 缓存生命周期（规则用于根据每个徽章推断默认值，任何低于默认值的值都将被忽略）。 例如3600
案例
获取cpu的值
获取数据的url是https://raw.githubusercontent.com/squirrelchat/smol-toml/mistress/bench/testfiles/toml-spec-example.toml
然后jsonpath是 $.database.temp_targets.cpu
也可以获取alpha的ip值
jsonpath 是 $.servers.alpha.ip
XML
https://shields.io/badges/dynamic-xml-badge
支持 XPath 查询
https://img.shields.io/badge/dynamic/xml?url=<URL>&label=<LABEL>&query=//data/subdata&color=<COLOR>&prefix=<PREFIX>&suffix=<SUFFIX>
参数
url：获取xml文档的链接，例如 https://httpbin.org/xml
query：用于查询文档的 XPath 表达式 例如//slideshow/slide[1]/title
prefix / suffix：在显示值前后添加文本（如单位）
style：徽章的类型 可选值： [ flat , flat-square , plastic , for-the-badge , social ] 如果未指定，则此徽章的默认样式为“flat(扁平)”
logo：图标 图标别名来自 simple-icons 图标库。您可以点击simple-icons 图标库中的图标标题复制别名，也可以在 simple-icons 图标库的slugs.md 文件中找到。更多信息。
logoColor：徽标颜色（支持十六进制、RGB、RGBA、HSL、HSLA 和 CSS 命名颜色）。支持简单图标徽标，不支持自定义徽标。
logoSize：通过设置使图标自适应调整大小auto。这对于一些较宽的徽标（例如amd和）非常有用amg。支持简单图标徽标，但不支持自定义徽标。
label：覆盖默认的左侧文本（空格或特殊字符需要进行URL 编码！)
labelColor：左侧部分的背景颜色（支持 hex、rgb、rgba、hsl、hsla 和 css 命名颜色）
color：右侧部分的背景颜色（支持 hex、rgb、rgba、hsl、hsla 和 css 命名颜色）。
cacheSeconds：HTTP 缓存生命周期（规则用于根据每个徽章推断默认值，任何低于默认值的值都将被忽略）。 例如3600
案例
统计 CSDN 博主的总浏览量
所访问的url是 https://blog.csdn.net/muyao987
所使用的xpath是 (//div[@class='user-profile-statistics-num']/text())[1]
YAML
https://img.shields.io/badge/dynamic/yaml?url=<URL>&label=<LABEL>&query=<$.DATA.SUBDATA>&color=<COLOR>&prefix=<PREFIX>&suffix=<SUFFIX>
参数
url：获取YAML文档的链接，例如 https://raw.githubusercontent.com/badges/shields/master/.github/dependabot.yml
query：用于查询文档的 XPath 表达式 例如$.version
prefix / suffix：在显示值前后添加文本（如单位）
style：徽章的类型 可选值： [ flat , flat-square , plastic , for-the-badge , social ] 如果未指定，则此徽章的默认样式为“flat(扁平)”
logo：图标 图标别名来自 simple-icons 图标库。您可以点击simple-icons 图标库中的图标标题复制别名，也可以在 simple-icons 图标库的slugs.md 文件中找到。更多信息。
logoColor：徽标颜色（支持十六进制、RGB、RGBA、HSL、HSLA 和 CSS 命名颜色）。支持简单图标徽标，不支持自定义徽标。
logoSize：通过设置使图标自适应调整大小auto。这对于一些较宽的徽标（例如amd和）非常有用amg。支持简单图标徽标，但不支持自定义徽标。
label：覆盖默认的左侧文本（空格或特殊字符需要进行URL 编码！)
labelColor：左侧部分的背景颜色（支持 hex、rgb、rgba、hsl、hsla 和 css 命名颜色）
color：右侧部分的背景颜色（支持 hex、rgb、rgba、hsl、hsla 和 css 命名颜色）。
cacheSeconds：HTTP 缓存生命周期（规则用于根据每个徽章推断默认值，任何低于默认值的值都将被忽略）。 例如3600
案例
获取package-ecosystem为github-actions的open-pull-requests-limit值
所访问的url是 https://raw.githubusercontent.com/badges/shields/master/.github/dependabot.yml
所使用的jsonpath是 $.updates[3].open-pull-requests-limit
注意
⚠️ 注意：目标网站需允许跨域访问（CORS），否则无法获取数据。
样式与 Logo 自定义
Shields.io 支持丰富的样式和图标（Logo）定制。
添加 Logo 示例
logo：使用 Simple Icons 中的图标名称（如github,python,docker等）logoColor：设置 logo 颜色link：点击徽章跳转的链接（仅在 Markdown 中有效）
支持的样式
?style= 参数
flatflat-squareplasticfor-the-badgesocial
示例
| 样式 | 示例 |
|---|---|
?style=flat |
 |
?style=flat-square |
 |
?style=plastic |
 |
?style=for-the-badge |
 |
?style=social |
 |
常用颜色参考
| 颜色名 | 效果 |
|---|---|
brightgreen |
亮绿色（常用于“通过”） |
green |
绿色 |
yellow |
黄色 |
orange |
橙色 |
red |
红色（常用于“失败”） |
blue |
蓝色 |
lightgrey |
浅灰色 |
也可以使用十六进制颜色（如 &color=ff69b4）。
在 Markdown 中使用
直接将徽章 URL 嵌入  即可：
[](https://github.com/user/repo)
加上外层
[ ]可实现点击跳转。
其他资源
- Simple Icons 图标列表：https://github.com/simple-icons/simple-icons/blob/develop/slugs.md
- Simple Icons 图标库：https://simpleicons.org/
- 动态徽章调试建议：先确保目标 API 返回结构清晰且 CORS 开放
✅ 提示：所有徽章均为 SVG 格式，清晰且体积小，适合嵌入文档。
注意
做为url的请求参数，一定是要编码后再携带的
常用字符
需要编码的特殊字符有：':'、'/'、'?'、'#'、'['，']'、'@'、'!'、'$'、'&'、"'"、'('、')'、'*'、'+'、','、';'、'='，以及 '%' 本身。其他的字符虽然可以进行编码但是并不需要。
| 字符 | 编码 |
|---|---|
':' |
%3A |
'/' |
%2F |
'?' |
%3F |
'#' |
%23 |
'[' |
%5B |
']' |
%5D |
'@' |
%40 |
'!' |
%21 |
'$' |
%24 |
'&' |
%26 |
"'" |
%27 |
'(' |
%28 |
')' |
%29 |
'*' |
%2A |
'+' |
%2B |
',' |
%2C |
';' |
%3B |
'=' |
%3D |
'%' |
%25 |
' ' |
%20 或 + |
本文来自博客园，作者：厚礼蝎，转载请注明原文链接：https://www.cnblogs.com/guangdelw/p/19213253
浙公网安备 33010602011771号