GitHub 上的小徽章从何而来?

￡神魔★判官ぃ 2021-08-19 14:16 336阅读 0赞

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

## **前言**    ##

技术博文征文比赛进行中，人人都可以参与，具体参与方式点击此链接：

**正文**

平时大家在在逛 github 时或多或少都看到过项目首页各式各样的小徽章,不知道你是否和我一样好奇这些小徽章都是哪来的呢?

首先我们先来一睹为快目前前端开发的三大主流框架: var ,看一看他们的 github 项目首页有哪些小徽章吧!

![640?wx\_fmt=png][640_wx_fmt_png]

前端三大框架的徽章均不相同,由此可见,这应该不是 github 统一分发而是自定义行为!

> 虽然不是统一分配的,但也不是毫无规律可寻,想要制作专属的小徽章,其实真的很简单!

## **什么是徽章** ##

徽章是一种小巧精美的小图标,一般配有相关文字进行辅助说明,富有表现力。

不仅出现于 github 项目主页,凡是能够表现图片的地方都可以出现徽章,本质上是一种 svg 格式的矢量图标。

下面以自定义 github-snowdreams1006-brightgreen.svg 徽章为例,简单认识一下徽章.

在线链接：

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

浏览器效果

> 打开在线链接,并检查当前网页,豁然开朗,徽章是一种 svg 实现的矢量图标.

![640?wx\_fmt=png][640_wx_fmt_png 1]

svg VS png

> 如果说 svg 是矢量图形而 png 却不是,所以不妨将 png 姑且称之为标量图形.

svg 是矢量图形, png 是标量图形,两者均能实现类似效果,只不过矢量图形不论怎么方法都能保持原样,并不会像 png 那样会失真而已.

## **如何使用徽章** ##

大多数徽章都是 svg 格式,当然也不排除某些徽章是 png 格式,不论怎么说,一律当成图标使用就可以了.

如果你和我一样,希望在 markdown 文件中使用徽章,那么建议使用在线链接,或者引入本地 svg 相关文件.

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

![640?wx\_fmt=png][640_wx_fmt_png 2]

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

*  BadgeURL

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

*  Markdown

[![github](https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg)](https://github.com/snowdreams1006)

*  HTML

*  Textile

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

*  RDOC

{<img src="https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg" alt="github" />}[https://github.com/snowdreams1006]

*  AsciiDoc

image:https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg["github", link="https://github.com/snowdreams1006"]

*  RST

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

## **徽章分类** ##

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

![640?wx\_fmt=png][640_wx_fmt_png 3]

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

![640?wx\_fmt=png][640_wx_fmt_png 4]

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

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

![640?wx\_fmt=png][640_wx_fmt_png 5]

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

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

![640?wx\_fmt=png][640_wx_fmt_png 6]

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

![640?wx\_fmt=png][640_wx_fmt_png 7]

## **徽章来源** ##

徽章有不同的分类,不管是哪种分类,在线徽章最为简单便捷,下面就简单介绍下提供在线生成徽章的网站.

*  https://shields.io/
 *  https://badgen.net/
 *  https://forthebadge.com/
 *  https://badge.fury.io/
 *  https://github.com/boennemann/badges

## **抛砖引玉** ##

*  社交化徽章

![640?wx\_fmt=png][640_wx_fmt_png 8]

![GitHub followers](https://img.shields.io/github/followers/snowdreams1006.svg?style=social)	
    ![GitHub forks](https://img.shields.io/github/forks/snowdreams1006/snowdreams1006.github.io.svg?style=social)	
    ![GitHub stars](https://img.shields.io/github/stars/snowdreams1006/snowdreams1006.github.io.svg?style=social)	
    ![GitHub watchers](https://img.shields.io/github/watchers/snowdreams1006/snowdreams1006.github.io.svg?style=social)

*  自定义徽章

![640?wx\_fmt=png][640_wx_fmt_png 9]

[![github](https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg)](https://github.com/snowdreams1006)	
    [![wechat](https://img.shields.io/badge/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](http://weixin.qq.com/r/cy5CWvvE5Kabrb8593th)	
    [![慕课网](https://img.shields.io/badge/%E6%85%95%E8%AF%BE%E7%BD%91-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://www.imooc.com/u/5224488/articles)	
    [![简书](https://img.shields.io/badge/%E7%AE%80%E4%B9%A6-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://www.jianshu.com/u/577b0d76ab87)	
    [![csdn](https://img.shields.io/badge/csdn-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://blog.csdn.net/weixin_38171180)	
    [![博客园](https://img.shields.io/badge/%E5%8D%9A%E5%AE%A2%E5%9B%AD-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://www.cnblogs.com/snowdreams1006/)	
    [![掘金](https://img.shields.io/badge/%E6%8E%98%E9%87%91-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://juejin.im/user/582d5cb667f356006331e586)	
    [![思否](https://img.shields.io/badge/%E6%80%9D%E5%90%A6-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://segmentfault.com/u/snowdreams1006)	
    [![开源中国](https://img.shields.io/badge/%E5%BC%80%E6%BA%90%E4%B8%AD%E5%9B%BD-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://my.oschina.net/snowdreams1006)	
    [![腾讯云社区](https://img.shields.io/badge/%E8%85%BE%E8%AE%AF%E4%BA%91%E7%A4%BE%E5%8C%BA-%E9%9B%AA%E4%B9%8B%E6%A2%A6%E6%8A%80%E6%9C%AF%E9%A9%BF%E7%AB%99-brightgreen.svg)](https://cloud.tencent.com/developer/user/2952369/activities)

*  进度条徽章

![640?wx\_fmt=png][640_wx_fmt_png 10]

[![progress](https://user-gold-cdn.xitu.io/2019/6/22/16b7d258ff8a48fe?w=118&h=20&f=svg&s=1107)](https://github.com/fehmicansaglam/progressed.io)	
    [![progress](https://user-gold-cdn.xitu.io/2019/6/22/16b7d258f75c9f1f?w=118&h=20&f=svg&s=1107)](https://github.com/fehmicansaglam/progressed.io)	
    [![completed](https://user-gold-cdn.xitu.io/2019/6/22/16b7d2598815373d?w=124&h=20&f=svg&s=1109)](https://github.com/fehmicansaglam/progressed.io)	
    [![done](https://user-gold-cdn.xitu.io/2019/6/22/16b7d25997ab3b36?w=94&h=20&f=svg&s=1098)](https://github.com/fehmicansaglam/progressed.io)

## **参考文档** ##

*  GitHub 项目徽章的添加和设置
 *  玩转 Github 徽章
 *  为你的Github README生成漂亮的徽章和进度条
 *  给python项目在github贴上build和pypi小徽章
 *  https://github.com/igrigorik/ga-beacon
 *  https://github.com/boennemann/badges
 *  https://ellerbrock.github.io/open-source-badges/
 *  http://githubbadges.com/

**推****荐****阅****读**

***1.***

***2.***

***3.***

***4.***

![640?][640]

[640_wx_fmt_jpeg]: /images/20210731/b0e573e50a6249748d17af4cd3bfe332.png?wx_fmt=jpeg
[640_wx_fmt_png]: /images/20210731/ff0163b911bb4dac959ce92e0f108e41.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210731/55b6f35614794279838fd17d411aeb23.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210731/323c723aa0d940be9d7c887464f954dd.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210731/df86feb1f6e74f98ace51f785948d8d2.png?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210731/7dc0a5d6e1f24a6f9952fb8165860fc7.png?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210731/e0e0a9b61e7b4d2fb78f993df11a4b8b.png?wx_fmt=png
[640_wx_fmt_png 6]: /images/20210731/9579e5c5b62d4b5a9c4ed657e902b5f3.png?wx_fmt=png
[640_wx_fmt_png 7]: /images/20210731/6a018c3b9ffd48d6bcb457b8f3b7195f.png?wx_fmt=png
[640_wx_fmt_png 8]: /images/20210731/44dfdcd9aee941b5ac25c0e2b8de5c4e.png?wx_fmt=png
[640_wx_fmt_png 9]: /images/20210731/5df66168dd5948b687a1eb64a3b2e432.png?wx_fmt=png
[640_wx_fmt_png 10]: /images/20210731/4a11a7ef3748435983e5db7a02dc828c.png?wx_fmt=png
[640]: /images/20210731/72e4a6d4d6404da2a76f717348eec9f1.png?