GitHub项目小徽章badges图标制作使用

徽标简介

我们经常GitHub上看到一些好看的小徽标，一般配有相关文字进行辅助说明，富有表现力。
其本质是一种svg格式的矢量图标，不仅出现在GitHub项目主页，能够表现图片的地方都可以出现徽章。
我们的博客网站等也会用到这些小徽标。

徽章使用

大多数徽章都是svg格式,当然也不排除某些徽章是png格式,不论怎么说,一律当成图标使用就可以了.
如果你和我一样,希望在markdown文件中使用徽章,那么建议使用在线链接,或者引入本地svg相关文件.

徽章格式:![](图片源地址) 即超链接内部嵌套图片

![](https://img.shields.io/badge/低调阁-www.ddg.ink-success.svg)

如果你是在html文件使用徽章,同样先取得在线徽章地址,然后按照html语法插入图片即可.

徽章格式:<a href="超链接地址"><img src="图片源地址" alt="图片文字说明"></a>即超链接内部嵌套图片

<a href="https://www.ddg.ink">
<img src="https://img.shields.io/badge/html-演示-success.svg" alt="演示">
</a>

不论是什么语法,最核心最根本的获得到徽章链接,至于不同语言有着各自的语法,按照语言规则手动拼接就好.

徽章分类

如果以徽章的格式为标准,那么可以分为`svg`和`png`两类.

svg格式

https://badge.fury.io/js/gitbook-plugin-mygitalk.svg

png格式

https://badge.fury.io/js/gitbook-plugin-mygitalk.png

如果以徽章的样式为标准,那么可以分为默认样式和自定义样式两类.

默认样式

https://img.shields.io/github/stars/snowdreams1006/snowdreams1006.github.io.svg?style=social

自定义样式

https://img.shields.io/badge/低调阁-www.ddg.ink-success.svg

如果以徽章的内容数据是否动态为标准,那么可以分为静态数据和动态数据两类.

静态数据意味着数据本身是不变的,只要在线链接不变,那么生成的徽章永远不会改变,而动态数据意味着生成徽章的数据是动态变化的,即使在线链接不变,当数据本身发现变化时,徽章自然随之更新.
静态数据

https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg

动态数据

https://badge.fury.io/js/gitbook-plugin-mygitalk.svg

静态数据示例中 github-snowdreams1006-brightgreen.svg 数据不会更改,自然生成的徽章也不会变.动态数据示例中 gitbook-plugin-mygitalk.svg 是 npm 的版本号,当项目升级后,版本号会发生更改,那么生成的徽章也会随之更新.

如果以徽章的内容数据来源为标准,那么可以有无数多的分类.

GitHub

https://badgen.net/github/stars/snowdreams1006/gitbook-plugin-mygitalk

Npm

https://badgen.net/npm/dt/gitbook-plugin-mygitalk

Docker

https://badgen.net/docker/stars/library/centos

如果以徽章的内容数据用途为标准,那么也可以有无数多的分类.

构建状态

https://img.shields.io/travis/GitbookIO/gitbook.svg

代码覆盖率

https://img.shields.io/codecov/c/github/vuejs/vue.svg

代码分析

https://img.shields.io/github/languages/top/snowdreams1006/snowdreams1006.github.io.svg

徽章来源

徽章有不同的分类,不管是哪种分类,在线徽章最为简单便捷,下面就简单介绍下提供在线生成徽章的网站.
https://www.ddg.ink/svg.html
https://shields.io/
https://badgen.net/
https://forthebadge.com/
https://badge.fury.io/
https://github.com/boennemann/badges