Fork me on GitHub

GitHub项目徽章的添加和设置

Github上经常看到各类项目添加的各类小图标表述项目相关信息,让人眼前一亮,无形中增加了项目的关注度和热度,那么如何给自己的GitHub开源项目添加类似图标呢,让我们娓娓道来。

徽标简介

GitHub项目的README.md中可以添加徽章(Badge)对项目进行标记和说明,这些好看的小图标不仅简洁美观,而且还包含了清晰易读的信息。
徽标主要由图片和对应的链接组成,徽标图片的话一般由左半部分的名称和右半部分的值组成。

GitHub徽标的官网地址,可以在官网预览绝大部分的徽标样式,然后选择自己喜欢的徽标,添加到自己的项目文档中去。
徽标分类如下:

  • Build
  • Downloads
  • Version
  • Social
  • Funding
  • Miscellaneous
  • Longer Miscellaneous
  • 自定义(Static\Dynamic)
  • Styles

找了几个案例供大家参考:



也有徽标使用超多的案例,建议大家理性使用徽标。

全凭个人喜好添加,你开心就好。

常见徽标添加

常用的徽标主要有持续集成状态、项目版本信息、代码测试覆盖率、项目支持平台、项目语言、代码分析等,下面我们依次熟悉下这些徽标。

持续集成状态

持续集成的话推荐Travis CI,针对开源项目免费。其他还有CircleCI、Jenkins和Codeship等,大家可以在shields.io/的Build分类查找。
登录Travis CI,直接使用GitHub账户登录即可。
参考官方文档,添加.travis.yml 配置文件,告诉Travis CI怎样对你的项目进行编译或测试。
Build Status
根据需要将GitHub用户及项目名称替换掉即可

如果你的编译没跑过或者发生错误之类的,会出现其他的状态,比如:


项目下载量

项目被下载的次数各个平台的统计都是独立的,比如发布在npm的项目下载量徽标图片地址如下,以cesarferreira/drone为例:
总下载量:https://img.shields.io/npm/dt/{项目名称}.svg
月下载量:https://img.shields.io/npm/dm/{项目名称}.svg
周下载量:https://img.shields.io/npm/dw/{项目名称}.svg
效果如下:

项目版本信息

语法:
https://img.shields.io/npm/v/{项目名称}.svg
同样以cesarferreira/drone为例:
HTML语法

1
<a href="https://www.npmjs.com/package/drone"><img src="https://img.shields.io/npm/v/drone.svg" alt="npm"></a>

Markdown语法

1
![](https://img.shields.io/npm/v/drone.svg)

代码测试覆盖率

代码测试覆盖率的话推荐Codecov.同样的,Codecov可以直接使用GitHub账号登陆.
更多信息参考官网文档

项目支持平台

略,有需要的同学自行研究

项目语言

该徽标是通过自定义徽标实现的,具体可参考下文自定义徽标一节,这里给出徽标代码:
https://img.shields.io/badge/language-{项目语言}-{背景色}.svg
将 {项目语言} 和 {背景色} 替换为你的项目目前的语言和你想要的背景色即可,这里以 Swift 为例,我们用上 Swift 官方橘色:

代码质量分析

略,有需要的同学自行研究

开源协议类型

https://img.shields.io/npm/l/express.svg
https://img.shields.io/apm/l/vim-mode.svg

自定义徽标

标题/内容/颜色/链接

以上这些徽标没有满足你的需求,还可以定制自己的个性化徽标,shields.io提供了添加自定义徽标的功能,通过修改如下URL即可获取自定义徽标图片:
https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg
{徽标标题}:徽标左半部分的文本(短线:–,下划线:_,空格: 或);
{徽标内容}:徽标右半部分的文本,同上;
{徽标颜色}:徽标右半部分背景颜色,可以是 red、green、blue 等颜色英文单词,也可以直接写十六进制的颜色值,如 ff69b4

附加参数

在徽标图片URL后面带上一些参数来控制徽标的样式。使用方法就是在徽标图片 URL 后面跟上 ?{参数名}={参数值},多个参数联用的话就是 ?{参数名1}={参数值1}&{参数名2}={参数值2}…
有需要可以自行研究,附加参数类型如下:

  • style
  • label
  • logo
  • logoWidth
  • link
  • colorA
  • colorB
  • maxAge

其他小知识点

默认的徽标是居左排列的,如果需要居中排列需要使用 HTML 的方式来插入徽标,可参考 Kingfisher,代码和效果如下:

1
2
3
4
5
6
7
8
9
<p align="center">
<a href="https://travis-ci.org/onevcat/Kingfisher">![](https://img.shields.io/travis/onevcat/Kingfisher/master.svg)</a>
<a href="https://github.com/Carthage/Carthage/">![](https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat)</a>
<a href="https://swift.org/package-manager/">![](https://img.shields.io/badge/SPM-ready-orange.svg)</a>
<a href="http://onevcat.github.io/Kingfisher/">![](https://img.shields.io/cocoapods/v/Kingfisher.svg?style=flat)</a>
<a href="https://raw.githubusercontent.com/onevcat/Kingfisher/master/LICENSE">![](https://img.shields.io/cocoapods/l/Kingfisher.svg?style=flat)</a>
<a href="http://onevcat.github.io/Kingfisher/">![](https://img.shields.io/cocoapods/p/Kingfisher.svg?style=flat)</a>
<a href="https://codebeat.co/projects/github-com-onevcat-kingfisher">![codebeat badge](https://codebeat.co/assets/svg/badges/A-398b39-669406e9e1b136187b91af587d4092b0160370f271f66a651f444b990c2730e9.svg)</a>
</p>

优秀徽标

Gitter

这是对issue功能的一个补充。正常情况下,当你给某个项目提出问题时,需要新建一个issue提出,并且需要等待开发者的回复(短则一两天,长则大半年),效率不是很高。而Gitter就提供了一个实时的聊天室,项目的开发者可以用github账号登陆之,为某个项目创建一个聊天室,然后再项目的Readme中加入如下代码:
Gitter
就可以显示聊天室的徽章啦:
Gitter
单击即可进入聊天室,与开发者进行实时沟通。

Version Stability

亲,点我有惊喜

Licences

开源软件协议的种类非常多,具体可以参考阮一峰的如何选择开源许可证?

参考资料

awesome

如果你是awesome系列的项目,那可以添加awesome徽章

Google Analytics

参考资料

参考资料

GitHub 项目徽章的添加和设置
Github 徽章整理

======================================================
希望各位朋友支持一下

本文作者:dongsheng
本文地址https://mds1455975151.github.io/archives/b687dd8f.html
版权声明:转载请注明出处!

坚持技术分享,您的支持将鼓励我继续创作!