徽章生成工具 Shields 简单使用指南

Shields.io 是一个用于生成徽章（Badge）的工具，能够为项目/仓库生成可视化的徽章标识。

Shields 官网地址：https://shields.io/badges

如何用

Sheilds 根据 URL 参数生成徽章图片，html 使用：

<img src="https://img.shields.io/badge/hello-world-blue" /> 

<object 
    type="image/svg+xml" 
    data="https://img.shields.io/badge/hello-world-blue">
</object>

两种方式最终的视觉效果上没有差别，不同的是 img标签渲染的是一张图片，而 object则是一个 svg

基础格式

徽章主体由左侧标签 label部分和右侧消息Message部分组成

URL 的基础格式为 https://img.shields.io/badge/:badgeContent，其中 :badgeContent 是关键的路径参数部分，这部分主要用于定义徽章的主体内容。

路径参数

路径参数用于指定徽章主体左右两侧的文字内容以及右侧 message 部分的背景颜色

• 格式：标签Label-消息Message-Message背景颜色

示例1：https://img.shields.io/badge/标签Label-消息Message-yellow

简化形式

示例1：https://img.shields.io/badge/-只有Message-green

示例2：https://img.shields.io/badge/也是只有Message-yellow

查询参数

在基路径参数后面，还可以通过添加查询参数来进一步定制徽章的各种属性，格式为在 URL 后添加 “?”，接着跟上参数名和对应的值，多个参数之间用 “&” 连接。

• style
  用于指定徽章的样式风格，“style” 的可选值有 “flat”（默认）、“flat-square”、“plastic”、“for-the-badge”、“social” 。示例：https://img.shields.io/badge/example-style=flat-blue?style=flat

• logo
  如果要添加图标，图标标识（slug）从 simple-icons 的图标标题复制获取，或者在相关仓库的 slugs.md 文件中查找。示例：https://img.shields.io/badge/example-logo=baidu-blue?logo=baidu ，simple-icon：https://simpleicons.org/

自定义logo：logo=后接图片的base64编码即可

示例：https://img.shields.io/badge/custom_logo=halo-white?logo=data:image/png;base64,iV.......CYII=

• logoColor
  用来设置图标颜色（仅针对 simple-icons 图标有效），示例：https://img.shields.io/badge/example-logo=baidu-blue?logo=baidu&logoColor=c6f7a3

• logoSize
  设置图标大小，当设置为 “auto” 时可使图标自适应缩放（同样仅适用于 simple-icons 图标），例如 https://img.shields.io/badge/...?logoSize=auto。

• label
  用于覆盖徽章左侧的文本内容，优先级高于路径参数。

示例：https://img.shields.io/badge/example-logo=baidu-blue?logo=baidu&label=示例

• labelColor
  设定徽章左侧部分的背景颜色，示例：https://img.shields.io/badge/example-baidu-blue?logo=baidu&labelColor=5cdbd3

• color
  用来设置徽章右侧部分的背景颜色，优先级高于路径参数，示例：https://img.shields.io/badge/example-baidu-blue?logo=baidu&labelColor=5cdbd3&color=f74f8a

• cacheSeconds
  用于规定 HTTP 缓存时长，格式为 https://img.shields.io/badge/...?cacheSeconds=时长数值，每个徽章本身有默认的缓存时长设置，若设置的时长数值低于默认值，该设置会被忽略。

• link
  指定点击徽章左右两侧的跳转操作，不过要通过<object> HTML 标签集成时才有效，在<img>标签或其他标记语言中是无效的，

示例：

<object type="image/svg+xml"
   data="https://img.shields.io/badge/点击跳转百度-blue?link=https://www.baidu.com">
 </object>

两边设置不同跳转示例：

<object type="image/svg+xml"
   data="https://img.shields.io/badge/左边跳转百度-右边跳转bing-blue?link=https://www.baidu.com&link=https://bing.com">
 </object>