GitHub 項目徽章的添加和設置
許多同窗在 GitHub 上發佈了本身的開源項目，有辛苦開發的實用工具、構思巧妙的開源庫、別具一格的 App、精心整理的示例代碼等等。html
本身花了大把時間和精力構建的項目，固然是但願可以獲得更多人的關注，被更多的人知曉或者使用。如何更好滴向他人展現本身的項目，介紹項目相關信息呢？用一些通用的小圖標來描述項目相關信息不失爲一種很棒的選擇，幾個好看的徽標可以爲本身的項目說明增色很多！ios
提示：由於文中某些示例須要 GitHub 的 Markdown 環境支持，因此若是遇到閱讀問題，能夠在 GitHub 查看，地址爲 github.com/EyreFree/EF…。git
一. 徽標簡介
GitHub 項目的 README.md 中能夠添加徽章（Badge）對項目進行標記和說明，這些好看的小圖標不只簡潔美觀，並且還包含了清晰易讀的信息。github
徽標主要由圖片和對應的連接（固然，你能夠不填）組成，徽標圖片的話通常由左半部分的名稱和右半部分的值組成。npm
GitHub 徽標的官方網站是 shields.io/，我萌能夠在官網預覽絕大部分的徽標樣式，而後選擇本身喜歡的（固然首先須要適用於本身的目標項目）徽標，添加到本身的項目文檔中去。swift
下面貼出幾個例子以供參考：緩存
徽標並非添加的越多越好，合理地選擇適合項目的徽標作具備針對性地添加纔是理性的作法，像 EFQRCode 這樣堆積徽標的無腦行爲並非十分可取，在這裏提出這一點，但願你們不要盲目追求數量。bash
固然若是我的比較喜歡的話，請隨意添加。markdown
二. 經常使用徽標添加
經常使用的徽標主要有持續集成狀態、項目版本信息、代碼測試覆蓋率、項目支持平臺、項目語言、代碼分析等，下面我萌就來依次添加這些可愛的徽標！svg
1. 持續集成狀態
持續集成的話推薦 Travis CI，針對開源項目免費，因此你的私有項目沒法享受到免費的持續構建服務，不過咱們的目的貌似就是給開源項目添加徽標。
同類型的產品還有 CircleCI，不過目前跑 OS X 項目須要額外付費，免費版提供一個 Linux 項目隊列，做爲非付費用戶在這裏很少作評價，大佬們能夠本身試下。其餘還有諸如 Jenkins 和 Codeship 等，你們能夠在 shields.io/ 的 Build 這一欄自行翻閱。
接下來就是 Travis CI 的集成工做了，首先打開 travis-ci.org/ 註冊一個 Travis-CI 帳號，能夠經過 GitHub 帳戶直接登錄。
而後參考 官方文檔，根據你的項目語言或類型選擇具體的配置方式，主要就是在項目中添加一個 .travis.yml 配置文件，告訴 Travis CI 怎樣對你的項目進行編譯或測試。這裏有一個 Swift CocoaPods 庫的集成示例，能夠參考一下：www.jianshu.com/p/beaa9ec91…。
而後徽標圖片地址是這個樣子的：
http://img.shields.io/travis/{GitHub 用戶名}/{項目名稱}.svg
複製代碼
將上面 URL 中的 {GitHub 用戶名} 和 {項目名稱} 替換爲你的便可，再加上該項目在 Travis CI 上的地址，以 Alamofire 爲例，最後集成完成的 Markdown 代碼和效果大概是這個樣子：
[](https://travis-ci.org/Alamofire/Alamofire)
複製代碼
固然若是你的編譯沒跑過或者發生錯誤之類的，會出現其餘的狀態，好比醬紫的：
這裏須要指出的是，開源項目的 Travis CI 也是公開的，包括日誌和歷史記錄在內，都是針對全部人可見的，因此小夥伴們必定不要把密碼、私鑰等重要信息暴露了。
2. 項目下載量
項目被下載的次數，這個的話各個平臺的統計都是獨立的，好比發佈在 CocoaPods 的項目下載量徽標圖片地址以下，以 AFNetworking 爲例：
總下載量：https://img.shields.io/cocoapods/dt/AFNetworking.svg
月下載量：https://img.shields.io/cocoapods/dm/AFNetworking.svg
周下載量：https://img.shields.io/cocoapods/dw/AFNetworking.svg
複製代碼
效果以下：
若是你的庫已經發布到 CocoaPods 的話，咱們只要把上面的 AFNetworking 改成本身的項目名稱便可。更多其餘發佈方式如 apm、npm、Gem 等可查閱 shields.io/ 的 Downloads 一欄。
3. 項目版本信息
這個的話，由於個人 iOS 庫是發佈在 CocoaPods 的，我用的是 CocoaPods 提供的，URL 以下：
https://img.shields.io/cocoapods/v/{項目名稱}.svg?style=flat
複製代碼
以 Alamofire 爲例，Markdown 代碼和效果以下：
複製代碼
若是你的庫已經發布到 CocoaPods 的話，咱們只要把上面的 Alamofire 改成本身的項目名稱便可。更多其餘發佈方式如 apm、npm、Gem 等可查閱 shields.io/ 的 Version 一欄，這裏提供一個能夠查詢已發佈的各類包的版本號徽標地址的網站 badge.fury.io/，能夠輕鬆獲取對應包的徽標代碼，以下圖所示
若是你的發佈工具不提供項目版本信息的徽標的話，能夠用自定義徽標的方式實現，具體可參考下文自定義徽標一節，這裏給出徽標代碼：
https://img.shields.io/badge/{發佈方式}-{版本號}-519dd9.svg
複製代碼
將 {發佈方式} 和 {版本號} 替換爲你的項目目前的發佈方式和版本號便可，例如經過 360 應用商店發佈，發佈版本號爲 v1.2.3：
複製代碼
4. 代碼測試覆蓋率
代碼測試覆蓋率的話推薦 Codecov。同類產品有 Coveralls，不過網站風格略復古，文檔也不詳細，安裝過程也複雜，須要配置一大堆奇怪的東西，遂不推薦。
一樣的，Codecov 能夠直接使用 GitHub 帳號登錄，須要結合 Travis CI 使用，在 .travis.yml 文件中添加一個回調觸發 Codecov 的刷新，同時須要打開工程中的測試覆蓋信息收集，XCode 中的設置以下
而後，咱們就能夠在 Setting 中的 Badge 一欄找到添加圖標的代碼啦：
最終效果以下：
5. 項目支持平臺
這個的話，由於個人 iOS 庫是發佈在 CocoaPods 的，我用的是 CocoaPods 提供的，URL 以下：
https://img.shields.io/cocoapods/p/{項目名稱}.svg?style=flat
複製代碼
以 Alamofire 爲例，Markdown 代碼和效果以下：
複製代碼
若是你的庫已經發布到 CocoaPods 的話，咱們只要把上面的 Alamofire 改成本身的項目名稱便可。若是你的發佈工具不提供項目支持平臺的徽標的話，能夠用自定義徽標的方式實現，具體可參考下文自定義徽標一節，這裏給出徽標代碼：
https://img.shields.io/badge/platform-{項目支持平臺}-lightgrey.svg
複製代碼
將 {項目支持平臺} 替換爲你的項目目前的版本號便可，例如 ios：
複製代碼
6. 項目語言
嗯，這個徹底是用自定義徽標實現的，具體可參考下文自定義徽標一節，這裏給出徽標代碼：
https://img.shields.io/badge/language-{項目語言}-{背景色}.svg
複製代碼
將 {項目語言} 和 {背景色} 替換爲你的項目目前的語言和你想要的背景色便可，這裏以 Swift 爲例，咱們用上 Swift 官方橘色：
複製代碼
完美!
7. 代碼質量分析
Codebeat 能夠計算全局項目評分、GPA、和不一樣命名空間的等級來幫助您量化技術債務和發現重構機會，你惟一須要作的就是鏈接你的 Github 庫，得到反饋就行了。
嗯，上面是官方自述，大概意思就是每次 push 或者 merge 以後會對代碼進行分，給出評分，而後告訴你哪些地方複雜度太高須要進行重構之類的。用 GitHub 登錄後綁定項目便可，無需對原有項目進行修改（實際上是 codebeat 在你的項目設置里加了一個 Webhook，通知它從新計算評分）。
照着引導巴拉巴拉一頓操做以後就能夠獲取圖標啦，在項目的 Setting 中能夠獲取徽標代碼，本身複製出來就能夠。
最終效果以下：
更多信息可參考個人另外一篇博文 利用 CodeBeat 爲你在 GitHub 上的項目進行代碼質量管理。
8. 開源協議類型
這個的話，由於個人 iOS 庫是發佈在 CocoaPods 的，我用的是 CocoaPods 提供的，URL 以下：
https://img.shields.io/cocoapods/l/{項目名稱}.svg?style=flat
複製代碼
以 Alamofire 爲例，Markdown 代碼和效果以下：
複製代碼
若是你的庫已經發布到 CocoaPods 的話，咱們只要把上面的 Alamofire 改成本身的項目名稱便可。若是你的發佈工具不提供開源協議類型的徽標的話，能夠用自定義徽標的方式實現，具體可參考下文自定義徽標一節，這裏給出徽標代碼：
https://img.shields.io/badge/license-{協議名稱}-000000.svg
複製代碼
將 {協議名稱} 替換爲你的項目所使用的協議名稱便可，例如 MIT：
複製代碼
三. 自定義徽標
1. 標題／內容／顏色／連接
若是以上這些徽標沒有知足你的需求，咱們還能夠定製本身的個性化徽標，shields.io 提供了添加自定義徽標的功能，經過修改以下 URL 便可獲取自定義徽標圖片：
https://img.shields.io/badge/{徽標標題}-{徽標內容}-{徽標顏色}.svg
複製代碼
{徽標標題}：徽標左半部分的文本（短線：--，下劃線：__，空格： 或_）；
{徽標內容}：徽標右半部分的文本，同上；
{徽標顏色}：徽標右半部分背景顏色，能夠是 red、green、blue 等顏色英文單詞，也能夠直接寫十六進制的顏色值，如 ff69b4，示例以下：
將其中的 {徽標標題}、{徽標內容}、{徽標顏色} 分別替換爲須要的內容便可，例如個人微博徽標圖片地址以下：
https://img.shields.io/badge/weibo-@EyreFree-red.svg
複製代碼
再結合個人微博地址 weibo.com/eyrefree777 後完整徽標代碼和效果以下（若是這段代碼用在 GitHub 的話，點擊該徽標會打開對應的 URL 地址，即直接跳到個人微博）：
[](http://weibo.com/eyrefree777)
複製代碼
同理個人推特徽標代碼和效果以下：
[](https://twitter.com/EyreFree777)
複製代碼
2. 附加參數
能夠在徽標圖片 URL 後面帶上一些參數來控制徽標的樣式，這一部分是可選的，不想折騰的話默認的樣式就挺好了，能夠不看這裏的。
使用方法就是在徽標圖片 URL 後面跟上 ?{參數名}={參數值}
多個參數聯用的話就是 ?{參數名1}={參數值1}&{參數名2}={參數值2}...
1. style
style 控制徽標的主體樣式，有四種，不設置的話默認是 flat 的，示例代碼和效果以下：
plastic
塑料？大概是指立體效果
複製代碼
flat
正常的樣子，扁平化
複製代碼
flat-square
扁平化 + 去除圓角
複製代碼
social
社交樣式
複製代碼
2. label
該參數能夠用來強制覆蓋原有的徽標標題文字，效果以下，原有的 pod 字樣已經被覆蓋了：
複製代碼
3. logo
該參數能夠用來爲徽標添加 logo，logo 圖片會出如今左半部分的徽標標題左邊，logo 圖片高度必須 ≥ 14px，logo 圖片須要先轉爲 base64 編碼而後直接插入到 URL 中（能夠用 b64.io/ 將圖片轉爲 base64 編碼的字符串），格式以下。
?logo={base64 編碼後的圖片數據}
複製代碼
示例代碼和效果以下：
複製代碼
4. logoWidth
該參數能夠設置在上一個參數 logo 中添加的圖標的寬度，設爲 0 的話即爲忽略該參數，示例代碼和效果以下：
複製代碼
5. link
聽說該參數是用來設置點擊後跳轉的 URL 的（嗯，俗稱超連接），官方描述以下：
- Specify what clicking on the left/right of a badge should do (esp. for social badge style)
不過試了一下好像沒啥效果（而且實在是沒想明白怎麼經過返回的圖片控制不一樣點擊區域的跳轉），若是有大佬知道的求指點，感謝！
6. colorA
該參數用來控制徽標左半部分的背景色，只能用十六進制的顏色做爲參數哦，不能直接寫 red、green、blue 之類的，這裏將左半部分的背景色改成 0xabcdef，代碼和效果以下：
複製代碼
7. colorB
該參數用來控制徽標右半部分的背景色，同上，只能用十六進制的顏色做爲參數哦，不能直接寫 red、green、blue 之類的，這裏將右半部分的背景色改成 0xabcdef，代碼和效果以下：
複製代碼
8. maxAge
該參數用來設置 HTTP 緩存時間，以秒爲單位，直接在 svg 地址後跟 ?maxAge={緩存秒數} 便可，好像沒啥好預覽的，不放效果圖了。
備註
這裏須要注意的是，若是你是引用的第三方 svg 而後添加本身的樣式，若是該樣式以前已經被第三方添加過，是不必定會覆蓋第三方的設置的，也就是說本身設置的屬性不必定會生效...例以下面的代碼設置 colorB 就沒生效：
複製代碼
右半部分應該變成黑色，可是毫無效果的說：
四. 其餘
默認的徽標是居左排列的，若是須要居中排列須要使用 HTML 的方式來插入徽標，可參考 Kingfisher，代碼和效果以下：
<p align="center">
<a href="https://travis-ci.org/onevcat/Kingfisher"></a>
<a href="https://github.com/Carthage/Carthage/"></a>
<a href="https://swift.org/package-manager/"></a>
<a href="http://onevcat.github.io/Kingfisher/"></a>
<a href="https://raw.githubusercontent.com/onevcat/Kingfisher/master/LICENSE"></a>
<a href="http://onevcat.github.io/Kingfisher/"></a>
<a href="https://codebeat.co/projects/github-com-onevcat-kingfisher"></a>
</p>
複製代碼
      
沒了，🙄
再次提示：由於文中某些示例須要 GitHub 的 Markdown 環境支持，因此若是遇到閱讀問題，好比某些 HTML 標籤露了出來之類的，能夠在 GitHub 查看，地址爲 github.com/EyreFree/EF…。
再讀一篇相似文章？
若有任何知識產權、版權問題或理論錯誤，還請指正。 https://juejin.im/post/5a32157c6fb9a0450b6667ac 轉載請註明原做者及以上信息。
- 1. GitHub 項目徽章的添加和設置
- 2. GitHub項目徽章的添加和設置
- 3. Github美化 添加徽章
- 4. GitHub項目徽標
- 5. GitHub Wiki 頁面的添加和設置
- 6. 給python項目在github貼上build和pypi小徽章
- 7. 徽章系列1： Top 30 android 開源項目徽章
- 8. Electron開發實戰之記帳軟件13——添加Github徽章
- 9. 好玩的github徽章
- 10. github設置添加ssh
- 更多相關文章...
- • Mozilla 項目 - 瀏覽器信息
- • Eclipse 添加書籤 - Eclipse 教程
- • IntelliJ IDEA代碼格式化設置
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
-
每一个你不满意的现在，都有一个你没有努力的曾经。