前言

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

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

小结:

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

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

什么是徽章

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

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

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

在线链接

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

svg VS png

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

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

如何使用徽章

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

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

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

Badge URLMarkdownHTML

徽章分类

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

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

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

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

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

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

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

徽章来源

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

排版布局

默认 markdown 实现的图片是依次排开的,无法自定义样式,而 markdown 语法同时也兼容 html 语法,因此我们可以用 html 语法实现居中对齐.

参考文档

GitHub 项目徽章的添加和设置玩转 Github 徽章为你的Github README生成漂亮的徽章和进度条给python项目在github贴上build和pypi小徽章