![1a4593b414f1b176bcc7eff5f2cc8b02.png](https://i-blog.csdnimg.cn/blog_migrate/258511dc68db57224a28ce25544927a4.jpeg)
前言
平时大家在在逛 github 时或多或少都看到过项目首页各式各样的小徽章,不知道你是否和我一样好奇这些小徽章都是哪来的呢?
首先我们先来一睹为快目前前端开发的三大主流框架: var ,看一看他们的 github 项目首页有哪些小徽章吧!
![859b60f20a8c4aca33ef7018e77fbc27.png](https://i-blog.csdnimg.cn/blog_migrate/06badcdec72ed93e5efa625014643b88.jpeg)
小结:
前端三大框架的徽章均不相同,由此可见,这应该不是 github 统一分发而是自定义行为!
虽然不是统一分配的,但也不是毫无规律可寻,想要制作专属的小徽章,其实真的很简单!
什么是徽章
徽章是一种小巧精美的小图标,一般配有相关文字进行辅助说明,富有表现力.
不仅出现于 github 项目主页,凡是能够表现图片的地方都可以出现徽章,本质上是一种 svg 格式的矢量图标.
下面以自定义 github-snowdreams1006-brightgreen.svg 徽章为例,简单认识一下徽章.
- 在线链接
https://img.shields.io/badge/github-snowdreams1006-brightgreen.svg
- 浏览器效果
打开在线链接,并检查当前网页,豁然开朗,徽章是一种 svg 实现的矢量图标.
![01005dc2738e7d066055b1cc1939a3ce.png](https://i-blog.csdnimg.cn/blog_migrate/fb30154e13c3f901e1651840419f668d.jpeg)
- svg VS png
如果说 svg 是矢量图形而 png 却不是,所以不妨将 png 姑且称之为标量图形.
svg 是矢量图形,png 是标量图形,两者均能实现类似效果,只不过矢量图形不论怎么方法都能保持原样,并不会像 png 那样会失真而已.
如何使用徽章
大多数徽章都是 svg 格式,当然也不排除某些徽章是 png 格式,不论怎么说,一律当成图标使用就可以了.
如果你和我一样,希望在 markdown 文件中使用徽章,那么建议使用在线链接,或者引入本地 svg 相关文件.
![c440a9e3bf87b765a98343813b2e8950.png](https://i-blog.csdnimg.cn/blog_migrate/ac2665da62c3ac72918dc938a75514b7.jpeg)
不论是什么语法,最核心最根本的获得到徽章链接,至于不同语言有着各自的语法,按照语言规则手动拼接就好.
- Badge URL
![d72c151c965ea818990bb2e23267571d.png](https://i-blog.csdnimg.cn/blog_migrate/2372b5ec8b76db1731460cd1f1f483e0.jpeg)
- Markdown
![190418142ffbd57d1ae5d11e0ef045d2.png](https://i-blog.csdnimg.cn/blog_migrate/128d60892cbe441cf11b47e811e1d16b.jpeg)
- HTML
![6aa4d7866dd04fe0d551cc01b8c32467.png](https://i-blog.csdnimg.cn/blog_migrate/59328669135b5f004d9ea536f4a696ae.jpeg)
徽章分类
如果以徽章的格式为标准,那么可以分为svg 和 png 两类.
![37b0d51a95a8431da7f5ec8e05961408.png](https://i-blog.csdnimg.cn/blog_migrate/7b9efd29a6607881220661b53e06662b.jpeg)
如果以徽章的样式为标准,那么可以分为默认样式和自定义样式两类.
![5b1ae82c9db98ce4bcdd146936bf966d.png](https://i-blog.csdnimg.cn/blog_migrate/04f91f2ee04a1e8ccc40939f5c9aa782.jpeg)
如果以徽章的内容数据是否动态为标准,那么可以分为静态数据和动态数据两类.
静态数据意味着数据本身是不变的,只要在线链接不变,那么生成的徽章永远不会改变,而动态数据意味着生成徽章的数据是动态变化的,即使在线链接不变,当数据本身发现变化时,徽章自然随之更新.
![df4dd10d4572fc007c8b0f4f1dea33d7.png](https://i-blog.csdnimg.cn/blog_migrate/e0f42edc10a5ca45afa3edbf95fd64c8.jpeg)
静态数据示例中 github-snowdreams1006-brightgreen.svg 数据不会更改,自然生成的徽章也不会变.动态数据示例中 gitbook-plugin-mygitalk.svg是 npm 的版本号,当项目升级后,版本号会发生更改,那么生成的徽章也会随之更新.
如果以徽章的内容数据来源为标准,那么可以有无数多的分类.
![7bf8de715eb701a2ba3b8f90521f45dd.png](https://i-blog.csdnimg.cn/blog_migrate/c74ae176d82eb6c0edc132fcfc2ec8de.jpeg)
如果以徽章的内容数据用途为标准,那么也可以有无数多的分类.
![53d9dae85cf2ddf0cd14abdefcdd911b.png](https://i-blog.csdnimg.cn/blog_migrate/7178ae138fc16cda3f1cbaa66d3af1b4.jpeg)
徽章来源
徽章有不同的分类,不管是哪种分类,在线徽章最为简单便捷,下面就简单介绍下提供在线生成徽章的网站.
- https://shields.io/
- https://badgen.net/
- https://forthebadge.com/
- https://badge.fury.io/
- https://github.com/boennemann/badges
排版布局
默认 markdown 实现的图片是依次排开的,无法自定义样式,而 markdown 语法同时也兼容 html 语法,因此我们可以用 html 语法实现居中对齐.
![df42abc97ddd03837a361c462c09cffb.png](https://i-blog.csdnimg.cn/blog_migrate/f3ac758d0ed26b45e48d1c6ca751cd0e.jpeg)
![f69ff839666d17558b9c91e721169afb.png](https://i-blog.csdnimg.cn/blog_migrate/25430ddc487bd6276e4c46f6f476be0e.jpeg)
参考文档
- 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/