github 上各式各样的小徽章从何而来?

前言

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

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

小结:

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

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

什么是徽章

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

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

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

• 在线链接

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

• 浏览器效果

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

• svg VS png

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

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

如何使用徽章

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

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

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

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

• 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

<a href="https://github.com/snowdreams1006"><img src="https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg" alt="github"></a>

• 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 两类.

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

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

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

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

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

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

徽章来源

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

• https://shields.io/

• https://badgen.net/

• https://forthebadge.com/

• https://badge.fury.io/

• https://github.com/boennemann/badges

抛砖引玉

• 社交化徽章

![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)

• 自定义徽章

[![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)

• 进度条徽章

[![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/