Github 上的小徽章制作与应用指南

本文转载于：

作者：雪之梦技术驿站

出处：https://www.cnblogs.com/snowdreams1006/p/11068107.html

1. 前言

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

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

Vue` : https://github.com/vuejs/vue

[

Chat

](https://img.shields.io/badge/chat-on discord-7289da.svg)

Angular : https://github.com/angular/angular

[

Chat

](https://badges.gitter.im/Join Chat.svg)

React : https://github.com/facebook/react

小结:

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

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

2. 什么是徽章？

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

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

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

在线链接

在线链接: github-snowdreams1006-brightgreen.svg

copyhttps://www.jb51.cc/res/2022/09-07/05/15bea72c6d7f61035d1c30d45ee4b029.svg

浏览器效果

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

svg 无论放大多少倍,依然保持原样,清晰度保持不变

3. 如何使用徽章？

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

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

3.1 Markdown的徽章格式

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

[![github](https://www.jb51.cc/res/2022/09-07/05/15bea72c6d7f61035d1c30d45ee4b029.svg)](https://github.com/sNowdreams1006)

3.5 HTML的徽章格式

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

copy<a href="https://github.com/sNowdreams1006">
	<img src="https://www.jb51.cc/res/2022/09-07/05/15bea72c6d7f61035d1c30d45ee4b029.svg" alt="github">
</a>

3.3 其他的徽章格式

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

Badge URL

https://www.jb51.cc/res/2022/09-07/05/15bea72c6d7f61035d1c30d45ee4b029.svg

Markdown

[![github](https://www.jb51.cc/res/2022/09-07/05/15bea72c6d7f61035d1c30d45ee4b029.svg)](https://github.com/sNowdreams1006)

HTML

<a href="https://github.com/sNowdreams1006"><img src="https://www.jb51.cc/res/2022/09-07/05/15bea72c6d7f61035d1c30d45ee4b029.svg" alt="github"></a>

Textile

!https://www.jb51.cc/res/2022/09-07/05/15bea72c6d7f61035d1c30d45ee4b029.svg!:https://github.com/sNowdreams1006

RDOC

{<img src="https://www.jb51.cc/res/2022/09-07/05/15bea72c6d7f61035d1c30d45ee4b029.svg" alt="github" />}[https://github.com/sNowdreams1006]

asciidoc

image:https://www.jb51.cc/res/2022/09-07/05/15bea72c6d7f61035d1c30d45ee4b029.svg["github", link="https://github.com/sNowdreams1006"]

RST

.. image:: https://www.jb51.cc/res/2022/09-07/05/15bea72c6d7f61035d1c30d45ee4b029.svg
    :target: https://github.com/sNowdreams1006

4. 徽章分类

4.1以格式分类

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

svg

https://www.jb51.cc/res/2022/09-07/05/29a0333d4e29a6f902c9a9d0b42669ea.svg

png

https://www.jb51.cc/res/2022/09-07/05/21d67e924ff822c0bc44db3de05e2167.png

4.2 以样式分类

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

默认样式

https://www.jb51.cc/res/2022/09-07/05/5816e7638655c8a54d08c65b4aa0f988.svg

自定义样式

https://www.jb51.cc/res/2022/09-07/05/f42b9d5e036ee3c515d46fbec8ebdea6.svg

4.3 以徽章的内容数据标准分类

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

静态数据

https://www.jb51.cc/res/2022/09-07/05/15bea72c6d7f61035d1c30d45ee4b029.svg

动态数据

https://www.jb51.cc/res/2022/09-07/05/29a0333d4e29a6f902c9a9d0b42669ea.svg

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

4.4 以徽章的内容数据标准分类

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

GitHub

https://www.jb51.cc/res/2022/09-07/05/25326c844cf2f960beecd67e9585ebcd.jpg

Npm

https://www.jb51.cc/res/2022/09-07/05/a4952cbd42dc937f69bec08f640249ab.jpg

Docker

https://www.jb51.cc/res/2022/09-07/05/3e7fa8825d5c135998cd2115d2630d5f.jpg

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

构建状态

https://www.jb51.cc/res/2021/03-14/20/49246af043766ad6d48be6ce6b4058a7.svg

代码覆盖率

https://www.jb51.cc/res/2022/09-07/05/5eefacff2891a336eca365bcdcf98acc.svg

代码分析

https://www.jb51.cc/res/2022/09-07/05/036f04563648579b65159859fc7786a4.svg

5. 徽章来源与制作

5.1 来源

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

5.1 https://shields.io/

适用于绝大多数情况,默认按照徽章内容分类,Build,Code Coverage,Analysis 等多主题,同时支持自定义徽章和动态徽章.

如果徽章的主题明确,那么根据网站提供的主题对号入座即可在线生成徽章,下面以 gitbook-plugin-mygitalk 为例,简要说明如何获得相应徽章链接.

gitbook-plugin-mygitalk 是 gitbook 的一款评论插件.

打开网站后按照分类,选择其中一个主题,点击进去后填写目标信息,即可在线生成徽章.

浏览已支持的主体,选择 License 许可证主题.

浏览已支持的 License 许可证列表,选择 NPM 许可证.

填写好正确的 npm 包信息并实时预览,然后点击按钮复制徽章链接或者或者特定格式的徽章.

![NPM](https://www.jb51.cc/res/2022/09-07/05/9e213257fd7c429623f983bcf6b8cbce.svg)

按照主题生成徽章真的很简单,首先对号入座,然后按需生成相应徽章即可,唯一的要求就是对号入座!

如果默认提供的徽章主题没有适合自己的徽章,或者想要自定义徽章效果,那么也可以在线制作私人订制徽章.

打开网站后往下拉,找到 Your Badge 区域,准备制作专属徽章.

填写(Label)标签-(Message)信息-(Color)颜色等信息后,点击(Make Badge)生成徽章.

点击生成徽章后默认会在当前标签页面打开该链接,手动复制链接并调整成目标格式即可.

![微信公众号-雪之梦技术驿站-brightgreen.svg](https://www.jb51.cc/res/2022/09-07/05/f42b9d5e036ee3c515d46fbec8ebdea6.svg)

5.2 https://badgen.net/

徽章内容来源种类较多,默认按照平台分类,按照特定规则生成徽章,需要手动拼接在线链接,略显繁琐.

https://badgen.net/badge/:subject/:status/:color?icon=github
                   ──┬──  ───┬───  ──┬───  ──┬── ────┬──────
                     │       │       │       │       └─ Extra Options (label, list, icon, color)
                     │       │       │       │
                     │      TEXT    TEXT    RGB / COLOR_NAME ( optional )
                     │
                  "badge" - default (static) badge generator

虽然支持颜色,图标以及查询参数等高级用法,但是还是习惯性采用默认设置,下面动手开始制作徽章吧!

切换到默认动态徽章选项卡,选择 GitHUb 徽章.

选择 stars 徽章,将 micromatch 替换成目标信息.

/github/stars/micromatch/micromatch` 替换成 `/stars/sNowdreams1006/sNowdreams1006.github.io

预览徽章效果并手动修改成目标格式.

![sNowdreams1006.github.io](https://www.jb51.cc/res/2022/09-07/05/863fffbc060e81d4c19e4b1077b69fa9.jpg)

除了支持动态徽章,同样也支持静态徽章,切换到 STATIC BADGES 选项卡,一起来生成静态徽章吧!

![★★★★☆](https://www.jb51.cc/res/2022/09-07/05/bc6ac74d58a6515dddbcf3d13b899dcd.jpg)

按照徽章的在线链接规则,应该也支持自定义徽章,再次回顾一下链接规则:

规则 : https://badgen.net/badge/:subject/:status/:color ,如果是自定义动态链接,估计不支持吧!

![微信公众号-雪之梦技术驿站](https://www.jb51.cc/res/2022/09-07/05/9eb8f68b8e7331231a66b875d1f478a8.jpg)

5.3 https://forthebadge.com/

扁平化的徽章,支持的徽章数量有限,不支持自定义徽章.

网站首页默认提供了一些预览徽章,左侧是复制 image 链接,右侧是复制 markdown 链接.

[![forthebadge](https://www.jb51.cc/res/2022/09-07/05/17c054ec97e5abfab18529232350ea59.svg)](https://forthebadge.com)

网站首页默认展示的徽章毕竟有限,如果找不到理想徽章,岂不是白介绍了这个网站,当然不能够!

VIEW ALL 查看目前支持的全部徽章,如果还是找不到徽章,那就真的没有.

5.4 https://badge.fury.io/

版本徽章,支持各类平台版本,包括 npm ,Ruby,Python,Go 等平台.

选择目标平台并输入包管理信息,即可在线生成各个类型的徽章版本.

[![npm version](https://www.jb51.cc/res/2022/09-07/05/29a0333d4e29a6f902c9a9d0b42669ea.svg)](https://badge.fury.io/js/gitbook-plugin-mygitalk)

6. 排版布局

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

<p align="center">
	<a href="https://circleci.com/gh/vuejs/vue/tree/dev">
		<img src="https://www.jb51.cc/res/2021/03-07/22/9bbd07f1b4e428e3c7487c6030d6b017.svg" alt="Build Status">
	</a>
	<a href="https://codecov.io/github/vuejs/vue?branch=dev">
		<img src="https://www.jb51.cc/res/2022/09-07/05/5eefacff2891a336eca365bcdcf98acc.svg" alt="Coverage Status">
	</a>
	<a href="https://www.npmjs.com/package/vue">
		<img src="https://www.jb51.cc/res/2022/09-07/05/5ebf338a1f707e672fe09dbfb686c7a0.svg" alt="Downloads">
	</a>
	<a href="https://www.npmjs.com/package/vue">
		<img src="https://www.jb51.cc/res/2021/03-07/00/9958189c6e543b2492781097c47b635a.jpg" alt="License">
	</a>
	<a href="https://chat.vuejs.org/">
		<img src="https://www.jb51.cc/res/2022/09-07/05/6d16592c636fab5d4af4f7d0e19249d8.svg" alt="License">
	</a>
</p>

[

License

](https://img.shields.io/badge/chat-on discord-7289da.svg)

7. 抛砖引玉

社交化徽章

![GitHub followers](https://www.jb51.cc/res/2022/09-07/05/362e30b9212972aeec6bb81257fcdb01.svg)
![GitHub forks](https://www.jb51.cc/res/2022/09-07/05/a834f963473b9c10e8e38ad647a242b8.svg)
![GitHub stars](https://www.jb51.cc/res/2022/09-07/05/5816e7638655c8a54d08c65b4aa0f988.svg)
![GitHub watchers](https://www.jb51.cc/res/2022/09-07/05/52c04c27f9691520f4e8430f4aa7d1bb.svg)

自定义徽章

[![github](https://www.jb51.cc/res/2022/09-07/05/15bea72c6d7f61035d1c30d45ee4b029.svg)](https://github.com/sNowdreams1006)
[![wechat](https://www.jb51.cc/res/2022/09-07/05/f42b9d5e036ee3c515d46fbec8ebdea6.svg)](http://weixin.qq.com/r/cy5CWvvE5Kabrb8593th)
[![慕课网](https://www.jb51.cc/res/2022/09-07/05/f5ed49fa8bd9a4a86ceb750af707bb3a.svg)](https://www.jb51.cc/u/5224488/articles)
[![简书](https://www.jb51.cc/res/2022/09-07/05/00ea59916b4eed199cbb61c121f1f89b.svg)](https://www.jianshu.com/u/577b0d76ab87)
[![csdn](https://www.jb51.cc/res/2022/09-07/05/918b07ca3c64a12745acca8f59039d08.svg)](https://blog.csdn.net/weixin_38171180)
[![博客园](https://www.jb51.cc/res/2022/09-07/05/8aa05c14f04e0dfe613a1722b71c8057.svg)](https://www.cnblogs.com/sNowdreams1006/)
[![掘金](https://www.jb51.cc/res/2022/09-07/05/d6eacd2b507d6aaa1b26954f0a0e8b34.svg)](https://juejin.im/user/582d5cb667f356006331e586)
[![思否](https://www.jb51.cc/res/2022/09-07/05/19987dad9fc38ea14ebb4ef3a094154d.svg)](https://segmentfault.com/u/sNowdreams1006)
[![开源中国](https://www.jb51.cc/res/2022/09-07/05/42e34eee58bfcb5bef56376b2e9b90fb.svg)](https://my.oschina.net/sNowdreams1006)
[![腾讯云社区](https://www.jb51.cc/res/2022/09-07/05/bfe52d86ee38b64a11b966e6c377b173.svg)](https://cloud.tencent.com/developer/user/2952369/activities)

8. 参考文献

作者：雪之梦技术驿站

出处：https://www.cnblogs.com/snowdreams1006/p/11068107.html

Github 上的小徽章制作与应用指南

Github 上的小徽章制作与应用指南

1. 前言

2. 什么是徽章？

3. 如何使用徽章？

3.1 Markdown的徽章格式

3.5 HTML的徽章格式

3.3 其他的徽章格式

4. 徽章分类

4.1以格式分类

4.2 以样式分类

4.3 以徽章的内容数据标准分类

4.4 以徽章的内容数据标准分类

5. 徽章来源与制作

5.1 来源

5.1 https://shields.io/

5.2 https://badgen.net/

5.3 https://forthebadge.com/

5.4 https://badge.fury.io/

6. 排版布局

7. 抛砖引玉

8. 参考文献

相关推荐