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

綁定域名