GitHub項目徽標

前言

GitHub徽標，GitHub Badge，你也能夠叫它徽章。就是在項目README中常常看到的那些代表構建狀態或者版本等信息的小圖標。就像這樣：這些好看的小圖標不只簡潔美觀，並且包含了清晰易讀的信息，在README中使用小徽標可以爲本身的項目說明增色很多！如何給本身的項目加上小徽標呢？

1、關於徽標

1. 徽標圖片分左右兩部分，左邊是標題，右邊是內容，就像是鍵值對。
2. GitHub徽標官網是 https://shields.io/
3. 圖標規範
   

2、如何添加動態徽標

動態徽標是指若是項目狀態發生變化，會自動更新狀態的徽標，它能保證用戶看到的信息就是項目當前的真實狀態。

經常使用的動態徽標有：

• 持續集成狀態
• 項目版本信息
• 代碼測試覆蓋率
• 項目下載量
• 貢獻者統計等等

這裏以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格式大概是這個樣子：

   [![Build Status](https://www.travis-ci.org/{your-name}/{your-repo-name}.svg?branch=master)](https://www.travis-ci.org/{your-name}/{your-repo-name})

4. 簡單起見，我選擇 markdown 格式。將內容複製後，打開項目的README文檔，在頂部位置粘貼。
5. 通過前4步，小徽章就搞定了。將README文檔push到遠程，刷新GitHub頁面，過一會，就會看到README上面已經有了持續集成狀態圖標了:
   之因此要過一會才加載出來，是由於它要動態從 Travis CI 平臺獲取狀態。

3、如何自定義徽標

shields.io 提供了自定義徽標的功能。

徽標圖標格式

https://img.shields.io/badge/{徽標標題}-{徽標內容}-{徽標顏色}.svg

帶連接的徽標

[![](https://img.shields.io/badge/{徽標標題}-{徽標內容}-{徽標顏色}.svg)]({linkUrl})

變量說明

• 徽標標題：徽標左邊的文字
• 徽標內容：徽標右邊的文字
• 徽標顏色：徽標右邊的背景顏色，能夠是顏色的16進制值，也能夠是顏色英文。支持的顏色英文以下：
  

變量之間用 - 鏈接。將這3個變量替換爲你須要的內容便可生成一個自定義的徽標。

舉個栗子

例以下面這個是個人博客的徽標：

[![](/img/remote/1460000020600529)](https://champyin.com)

效果：

點擊該徽標會打開對應的linkUrl地址，即直接跳到個人博客。

進階

除了上面所說的3個參數，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 立體效果：

![](/img/remote/1460000020600530)

flat 扁平化效果，也是默認效果：

![](/img/remote/1460000020600531)

flat-square 扁平 + 去圓角效果：

![](/img/remote/1460000020600532)

social 社交樣式效果：

![](/img/remote/1460000020600533)

還有不少參數，用法相似。更多信息能夠到shields.io查閱。

總結

徽標簡潔又不失內容，使用簡單又不失靈活。若是你的項目尚未使用過徽標，那麼不妨試試給你的項目中添加一個，你會愛上它。

PS：剛發現segmentfault會對代碼引用裏的markdown圖片源碼作轉換...致使看不到markdown源碼。被轉換的源碼能夠在這裏查看。

--

歡迎轉載，轉載請註明出處：https://champyin.com/2019/10/...

本文同步發表於：
GitHub項目徽標 | 掘金