Github 上的小徽章制作与应用指南
本文转载于:
作者: 雪之梦技术驿站
1. 前言
平时大家在在逛 github
时或多或少都看到过项目首页各式各样的小徽章,不知道你是否和我一样好奇这些小徽章都是哪来的呢?
首先我们先来一睹为快目前前端开发的三大主流框架: var
,看一看他们的 github
项目首页有哪些小徽章吧!
- Vue` : https://github.com/vuejs/vue
Angular
: https://github.com/angular/angular
小结:
前端三大框架的徽章均不相同,由此可见,这应该不是 github
统一分发而是自定义行为!
虽然不是统一分配的,但也不是毫无规律可寻,想要制作专属的小徽章,其实真的很简单!
2. 什么是徽章?
徽章是一种小巧精美的小图标,一般配有相关文字进行辅助说明,富有表现力.
不仅出现于 github
项目主页,凡是能够表现图片的地方都可以出现徽章,本质上是一种 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]
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 来源
徽章有不同的分类,不管是哪种分类,在线徽章最为简单便捷,下面就简单介绍下提供在线生成徽章的网站.
- https://shields.io/
- https://badgen.net/
- https://forthebadge.com/
- https://badge.fury.io/
- https://github.com/boennemann/badges
5.1 https://shields.io/
适用于绝大多数情况,默认按照徽章内容分类,
Build
,Code Coverage
,Analysis
等多主题,同时支持自定义徽章和动态徽章.如果徽章的主题明确,那么根据网站提供的主题对号入座即可在线生成徽章,下面以
gitbook-plugin-mygitalk
为例,简要说明如何获得相应徽章链接.
gitbook-plugin-mygitalk 是
gitbook
的一款评论插件.
打开网站后按照分类,选择其中一个主题,点击进去后填写目标信息,即可在线生成徽章.
- 浏览已支持的
License
许可证列表,选择NPM
许可证.
- 填写好正确的
npm
包信息并实时预览,然后点击按钮复制徽章链接或者或者特定格式的徽章.
![NPM](https://www.jb51.cc/res/2022/09-07/05/9e213257fd7c429623f983bcf6b8cbce.svg)
如果默认提供的徽章主题没有适合自己的徽章,或者想要自定义徽章效果,那么也可以在线制作私人订制徽章.
- 打开网站后往下拉,找到
Your 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 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>
](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. 参考文献
- 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/
作者: 雪之梦技术驿站