使用 Shields.io 制作 github 徽章

我们看 github 上的成熟项目，在 README 中都会有徽章。

我想在自己的开源项目里也加上这些徽章，看起来会专业点~~

Shields.io 就是一个主流的 徽章渲染服务器。

定制 徽章 的主要工作就是拼接符合 渲染服务器 规则的 URL，拼接好 URL 后，我们只要将 URL 嵌入 MD 文档即可。

Shields.io 的徽章主要分成两类，静态徽章和动态徽章。

https://shields.io/badges

静态徽章

静态徽章的规则就是：

https://img.shields.io/badge/是 url 前缀，后面跟的就是你自己需要显示的内容
内容用短横线-间隔。

1	https://img.shields.io/badge/{左半部分}-{右半部分}-{右半部分的颜色}

例如：

1	https://img.shields.io/badge/yunsheng-blog-blue

左右两部分不能同时指定颜色，只能指定右边

如果不需要两部分，那么规则变为

1	https://img.shields.io/badge/{内容}-{颜色}

1	https://img.shields.io/badge/hello_yunsheng-blue

单个_下划线会被渲染为空格。%20 也是渲染为空格。
双下划线__，才会渲染为一个下划线_
双横线–,会渲染为一个-

增加 logo

通过增加 query 参数设置

1	https://img.shields.io/badge/yunsheng-repo-green?logo=github

logo 从哪找呢？

https://simpleicons.org/

从这里直接使用 name 即可。

logo 也可以配置 color

1	https://img.shields.io/badge/yunsheng-repo-green?logo=go&logoColor=86328A

自定义 logo

支持通过 base64 格式的数据指定 logo

1	https://img.shields.io/badge/{左半部分}-{右半部分}-{右半部分颜色}?logo=data:image/svg+xml;base64,{base64数据}

比如我从 iconfont 上复制一个 icon，转为 base64 数据

可以用命令行，也可以用我这个网站工具。

https://zlib.miaoji360.top/tools/image-to-base64

点击展开/收起 base64数据

https://img.shields.io/badge/yunsheng-repo-green?logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzcwODYxNzY5NjAxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwNTQiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiPjxwYXRoIGQ9Ik05NDQuODM5NjggNjczLjIyODggMTE0LjUxMzkyIDY3My4yMjg4Yy0xNi4zNzg4OCAwLTI5LjY0OTkyLTEzLjM2ODMyLTI5LjY0OTkyLTI5Ljg4MDMyIDAtMTYuNTE3MTIgMTMuMjY1OTItMjkuOTA1OTIgMjkuNjQ5OTItMjkuOTA1OTJsODMwLjMyNTc2IDBjMTYuMzU4NCAwIDI5LjY0OTkyIDEzLjM4ODggMjkuNjQ5OTIgMjkuOTA1OTJDOTc0LjQ4OTYgNjU5Ljg2MDQ4IDk2MS4xOTgwOCA2NzMuMjI4OCA5NDQuODM5NjggNjczLjIyODh6TTg4NS41MjQ0OCAzMjYuODkxNTJjLTExLjU4MTQ0IDExLjY3ODcyLTMwLjM1MTM2IDExLjY3ODcyLTQxLjk0MzA0IDAtMTEuNTgxNDQtMTEuNjc4NzItMTEuNTgxNDQtMzAuNjAyMjQgMC00Mi4yODA5Nmw0MS45NDMwNC00Mi4yODA5NmMxMS41ODE0NC0xMS42Nzg3MiAzMC4zNTEzNi0xMS42Nzg3MiA0MS45Mjc2OCAwIDExLjU5NjggMTEuNjYzMzYgMTEuNTk2OCAzMC42MDIyNCAwIDQyLjI4MDk2TDg4NS41MjQ0OCAzMjYuODkxNTJ6TTgxOS43Mzc2IDU1My42NjY1NmMtMjcuNTA5NzYtMTM2LjM2MDk2LTE0Ni41ODA0OC0yMzkuMTUwMDgtMjkwLjA1ODI0LTIzOS4xNTAwOC0xNDMuNDk4MjQgMC0yNjIuNTYzODQgMTAyLjc5NDI0LTI5MC4wNjg0OCAyMzkuMTUwMDhMMTc3LjE4Nzg0IDU1My42NjY1NmMyMi44MDQ0OC0xNjguNjE2OTYgMTcxLjcyOTkyLTI5OC45NTE2OCAzNTIuNDkxNTItMjk4Ljk1MTY4IDE4MC43NTEzNiAwIDMyOS42ODcwNCAxMzAuMzM0NzIgMzUyLjQ2NTkyIDI5OC45NTE2OEw4MTkuNzM3NiA1NTMuNjY2NTZ6TTUyOS42NjQgMTk0LjkxMzI4Yy0xNi4zNjM1MiAwLTI5LjY0NDgtMTMuMzgzNjgtMjkuNjQ0OC0yOS44ODAzMmwwLTU5LjgwMTZjMC0xNi41MTIgMTMuMjgxMjgtMjkuODk1NjggMjkuNjQ0OC0yOS44OTU2OCAxNi4zODQgMCAyOS42NzA0IDEzLjM4ODggMjkuNjcwNCAyOS44OTU2OGwwIDU5LjgwMTZDNTU5LjMzNDQgMTgxLjUyOTYgNTQ2LjA0OCAxOTQuOTEzMjggNTI5LjY2NCAxOTQuOTEzMjh6TTE3My44MjQgMzI2Ljg5MTUybC00MS45NDMwNC00Mi4yODA5NmMtMTEuNTc2MzItMTEuNjc4NzItMTEuNTc2MzItMzAuNjE3NiAwLTQyLjI4MDk2IDExLjU5NjgtMTEuNjc4NzIgMzAuMzY2NzItMTEuNjc4NzIgNDEuOTQzMDQgMGw0MS45Mjc2OCA0Mi4yODA5NmMxMS41OTY4IDExLjY3ODcyIDExLjU5NjggMzAuNjAyMjQgMCA0Mi4yODA5NkMyMDQuMTc1MzYgMzM4LjU2NTEyIDE4NS40MDU0NCAzMzguNTY1MTIgMTczLjgyNCAzMjYuODkxNTJ6TTE0NC4xNzkyIDczMy4wMjUyOGw3NzEuMDAwMzIgMGMxNi4zNzM3NiAwIDI5LjY2MDE2IDEzLjM4MzY4IDI5LjY2MDE2IDI5LjkwNTkyIDAgMTYuNTEyLTEzLjI4NjQgMjkuODk1NjgtMjkuNjYwMTYgMjkuODk1NjhMMTQ0LjE3OTIgNzkyLjgyNjg4Yy0xNi4zODQgMC0yOS42NjUyOC0xMy4zODM2OC0yOS42NjUyOC0yOS44OTU2OEMxMTQuNTEzOTIgNzQ2LjQwODk2IDEyNy43OTUyIDczMy4wMjUyOCAxNDQuMTc5MiA3MzMuMDI1Mjh6TTIzMy4xMzkyIDg1Mi42MDggODI2LjIxNDQgODUyLjYwOGMxNi4zNzM3NiAwIDI5LjY2NTI4IDEzLjM4MzY4IDI5LjY2NTI4IDI5Ljg5NTY4IDAgMTYuNTE3MTItMTMuMjkxNTIgMjkuOTAwOC0yOS42NjUyOCAyOS45MDA4TDIzMy4xMzkyIDkxMi40MDQ0OGMtMTYuMzc4ODggMC0yOS42NjAxNi0xMy4zODM2OC0yOS42NjAxNi0yOS45MDA4QzIwMy40NzM5MiA4NjUuOTk2OCAyMTYuNzU1MiA4NTIuNjA4IDIzMy4xMzkyIDg1Mi42MDh6IiBmaWxsPSIjRTgzODI4IiBwLWlkPSI2MDU1Ij48L3BhdGg+PC9zdmc+

注意自定义 logo，不能指定 color。你的 base64 应该直接就是你需要的颜色

动态徽章

动态徽章就是数据需要从另一个接口取。

可以看到支持多种格式。我只研究了 JSON。

最重要的是 3 个参数

url：我们提供的后台接口，返回格式需要使 json

比如这里我们用他提供的 https://github.com/badges/shields/raw/master/package.json

query

使用 JSONPath 表达式获取一个值

右边的值就是我们能用 query 取的。

但是左边的值是默认的。要修改的话就需要我们的第三个参数

label。不是必填的，但是很重要

其他非必填参数，用来设置颜色，logo 等

1	https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fgithub.com%2Fbadges%2Fshields%2Fraw%2Fmaster%2Fpackage.json&query=%24.name&logo=github&logoColor=green&label=yunsheng&color=red