DevOps - 版本控制 - GitHub

README

Badges 徽章

Shields.io: Quality metadata badges for open source projects  徽章

官网：https://shields.io

GitHub项目README，其中不乏用到一些很是好看的标签。好比下面这样：

Your BADGE 生成

1.在shields.io 生成本身的标签，注意：生成栏在网站的最下面，下面的图片就是我生成  须要在Your Badge下面填的内容。以后它会生成惟一连接。https://img.shields.io/badge/download-1K-brightgreen.svg

2.由于README默认支持MarkDown语法。因此咱们很容易插入图片和用图片作为连接跳转到别处。下面分别演示。继续以  为例。

a.只是显示图片

MarkDown语法显示图片: ![图片描述](图片连接)
![](https://img.shields.io/badge/download-1K-brightgreen.svg)

b.让图片作为连接

MarkDown语法建立连接: [连接名](网址)
[百度](https://www.baidu.com)

 百度

在此基础上，咱们把`连接名`换成`图片`不就行了:
[![图片描述](图片连接)]()
[![](https://img.shields.io/badge/download-1K-brightgreen.svg)](https://www.baidu.com)

(点击进入百度)

---

Downloads 下载量标签

以npm的下载量为例：

首先，咱们要保证咱们的库已经publish到npm上，而后，进入该网站配置你的npm仓库代码。

点击【666/month】的连接会看见以下界面：

Link，意思是点击该标签会跳转的地址，通常咱们就直接跳转到npm的地址便可；
Image，就是动态显示成你标签的关键。观察示例连接不难发现前面都是该域名的地址，从npm开始则是咱们标签配置的地方。
npm，指咱们须要获取npm的数据，
dm，就是月下载量，后面的[localeval].svg就是须要改为你的npm仓库名位置了。

因此好比将这个连接改成https://img.shields.io/npm/dm/v-tap.svg 就是我v-tap在npm上的数据下载量了。以下图：

同理，好比你要获取npm版本；示例连接以下是https://img.shields.io/npm/v/npm.svg
改为：https://img.shields.io/npm/v/v-tap.svg 就是我v-tap的了：

 

---

 

Build 标签

那关于集成测试的如何显示呢？以react的为例，他们使用的是circleCI来集成构建。

首先，须要在你的项目下编写circleCI的配置文件

machine:

node:

version: 6

test:

override:

- npm test

这是一个很是简单的circle.yml配置文件，当咱们提交代码的时候circle会自动帮咱们构建而且执行npm test进行测试。若是测试都经过了则build passing

而后，只须要咱们在：https://img.shields.io 找到 CircleCI的标签，跟下载量同样，修改下它的连接便可：

https://img.shields.io/circleci/project/github/[username]/[repo].svg

如我github的username是MeCKodo，一个配置了circle的repo为webpack-browser-log则标签的连接为https://img.shields.io/circleci/project/github/MeCKodo/webpack-browser-log.svg。显示以下

其余也都是大同小异！快去装饰你的repo吧！

---

 

GitHub Pages

绑定域名