使用shields.io新增GitHub專案徽標
前言
GitHub徽標，GitHub Badge，你也可以叫它徽章。就是在專案README中經常看到的那些表明構建狀態或者版本等資訊的小圖示。就像這樣：
這些好看的小圖示不僅簡潔美觀，而且包含了清晰易讀的資訊，在README中使用小徽標能夠為自己的專案說明增色不少！如何給自己的專案加上小徽標呢？
一、關於徽標
- 徽標圖片分左右兩部分，左邊是標題，右邊是內容，就像是鍵值對。
- GitHub徽標官網是https://shields.io/
- 圖示規範
二、如何新增動態徽標
動態徽標是指如果專案狀態發生變化，會自動更新狀態的徽標，它能保證使用者看到的資訊就是專案當前的真實狀態。
常用的動態徽標有：
- 持續整合狀態
- 專案版本資訊
- 程式碼測試覆蓋率
- 專案下載量
- 貢獻者統計等等
這裡以`Travis CI` 的持續整合狀態為例。沒有接觸過 `Travis CI`的可以看我的上一篇文章利用Travis CI+GitHub實現持續整合和自動部署。
1. 登入 `Travis CI`，進入配置過構建的專案，在專案名稱的右邊有個 `build passing` 或者 `build failing` 徽標。
2. 點選它，在彈出框中，就可以看到 `Travis CI` 為你提供的各種格式的徽章地址了。
3. 你可以根據需要選擇格式，imageUrl格式大概是這個樣子：
https://www.travis-ci.org/{your-name}/{your-repo-name}.svg?branch=master markdown格式大概是這個樣子：
[]
(https://www.travis-ci.org/{your-name}/{your-repo-name})4. 簡單起見，我選擇 `markdown` 格式。將內容複製後，開啟專案的README文件，在頂部位置貼上。
5. 經過前4步，小徽章就搞定了。將README文件push到遠端，重新整理GitHub頁面，過一會，就會看到README上面已經有了持續整合狀態圖示了:
之所以要過一會才加載出來，是因為它要動態從 `Travis CI` 平臺獲取狀態。
三、如何自定義徽標
https://shields.io/提供了自定義徽標的功能。
徽標圖示格式
https://img.shields.io/badge/{徽標標題}-{徽標內容}-{徽標顏色}.svg帶連結的徽標
[]({linkUrl})變數說明
- 徽標標題：徽標左邊的文字
- 徽標內容：徽標右邊的文字
- 徽標顏色：徽標右邊的背景顏色，可以是顏色的16進位制值，也可以是顏色英文。支援的顏色英文如下：
變數之間用 `-` 連線。將這3個變數替換為你需要的內容即可生成一個自定義的徽標。
舉個栗子
例如下面這個是我的部落格的徽標：
[](https://champyin.com)效果：
點選該徽標會開啟對應的linkUrl地址，即直接跳到我的部落格。
PS：知乎不支援圖片連結，所以沒法看到效果，在其他支援md解析的地方是可以的
進階
除了上面所說的3個引數，http://shields.io還提供了一些 `query string` 來控制徽標樣式。使用方式跟URL的query string一致：徽標圖示地址?{引數名}={引數值}，多個引數用 `&` 連線：
https://img.shields.io/badge/{徽標標題}-{徽標內容}-{徽標顏色}.svg?{引數名1}={引數值1}&{引數名2}={引數值2}常用的 `query string` 引數有：
- style：控制徽標主題樣式，style的值可以是：`plastic` | `flat` | `flat-square` | `social` 。
- label：用來強制覆蓋原有徽標的標題文字。
- colorA：控制左半部分背景顏色，只能用16進位制顏色值作為引數，不能使用顏色英文。
- colorB：控制右半部分背景顏色。
以style引數為例
`plastic` 立體效果：
`flat` 扁平化效果，也是預設效果：
`flat-square` 扁平 + 去圓角效果：
`social` 社交樣式效果：
還有很多引數，用法類似。更多資訊可以到https://shields.io/查閱。
總結
徽標簡潔又不失內容，使用簡單又不失靈活。如果你的專案還沒有使用過徽標，那麼不妨試試給你的專案中新增一個，你會愛上它。
--
歡迎轉載，轉載請註明出處：
github專案徽標本文同步發表於：