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

綁定域名

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com