前言
GitHub徽標(biāo)舱馅，GitHub Badge，你也可以叫它徽章刀荒。就是在項(xiàng)目README中經(jīng)炒停看到的那些表明構(gòu)建狀態(tài)或者版本等信息的小圖標(biāo)。就像這樣：這些好看的小圖標(biāo)不僅簡(jiǎn)潔美觀(guān)缠借，而且包含了清晰易讀的信息干毅，在README中使用小徽標(biāo)能夠?yàn)樽约旱捻?xiàng)目說(shuō)明增色不少！如何給自己的項(xiàng)目加上小徽標(biāo)呢泼返？
一硝逢、關(guān)于徽標(biāo)
- 徽標(biāo)圖片分左右兩部分，左邊是標(biāo)題绅喉，右邊是內(nèi)容渠鸽，就像是鍵值對(duì)。
- GitHub徽標(biāo)官網(wǎng)是 https://shields.io/
-
圖標(biāo)規(guī)范
badge-rule2.png
二柴罐、如何添加動(dòng)態(tài)徽標(biāo)
動(dòng)態(tài)徽標(biāo)是指如果項(xiàng)目狀態(tài)發(fā)生變化拱绑，會(huì)自動(dòng)更新?tīng)顟B(tài)的徽標(biāo)，它能保證用戶(hù)看到的信息就是項(xiàng)目當(dāng)前的真實(shí)狀態(tài)丽蝎。
常用的動(dòng)態(tài)徽標(biāo)有：
- 持續(xù)集成狀態(tài)
- 項(xiàng)目版本信息
- 代碼測(cè)試覆蓋率
- 項(xiàng)目下載量
- 貢獻(xiàn)者統(tǒng)計(jì)等等
這里以Travis CI 的持續(xù)集成狀態(tài)為例。沒(méi)有接觸過(guò) Travis CI的可以看我的上一篇文章 利用Travis CI+GitHub實(shí)現(xiàn)持續(xù)集成和自動(dòng)部署
登錄
Travis CI，進(jìn)入配置過(guò)構(gòu)建的項(xiàng)目屠阻，在項(xiàng)目名稱(chēng)的右邊有個(gè)build passing或者build failing徽標(biāo)红省。點(diǎn)擊它，在彈出框中国觉，就可以看到
Travis CI為你提供的各種格式的徽章地址了吧恃。-
你可以根據(jù)需要選擇格式，imageUrl格式大概是這個(gè)樣子：
https://www.travis-ci.org/{your-name}/{your-repo-name}.svg?branch=mastermarkdown格式大概是這個(gè)樣子：
[](https://www.travis-ci.org/{your-name}/{your-repo-name}) 簡(jiǎn)單起見(jiàn)麻诀，我選擇
markdown格式痕寓。將內(nèi)容復(fù)制后，打開(kāi)項(xiàng)目的README文檔蝇闭，在頂部位置粘貼呻率。-
經(jīng)過(guò)前4步，小徽章就搞定了呻引。將README文檔push到遠(yuǎn)程礼仗，刷新GitHub頁(yè)面，過(guò)一會(huì)逻悠，就會(huì)看到README上面已經(jīng)有了持續(xù)集成狀態(tài)圖標(biāo)了元践。之所以要過(guò)一會(huì)才加載出來(lái)，是因?yàn)樗獎(jiǎng)討B(tài)從
Travis CI平臺(tái)獲取狀態(tài)童谒。
build-passing.png
三单旁、如何自定義徽標(biāo)
shields.io 提供了自定義徽標(biāo)的功能。
徽標(biāo)圖標(biāo)格式
https://img.shields.io/badge/{徽標(biāo)標(biāo)題}-{徽標(biāo)內(nèi)容}-{徽標(biāo)顏色}.svg
帶鏈接的徽標(biāo)
[標(biāo)題}-{徽標(biāo)內(nèi)容}-{徽標(biāo)顏色}.svg)]({linkUrl})
變量說(shuō)明
- 徽標(biāo)標(biāo)題：徽標(biāo)左邊的文字
- 徽標(biāo)內(nèi)容：徽標(biāo)右邊的文字
-
徽標(biāo)顏色：徽標(biāo)右邊的背景顏色饥伊，可以是顏色的16進(jìn)制值象浑，也可以是顏色英文。支持的顏色英文如下：
shields.io-color.jpg
變量之間用 - 連接撵渡。將這3個(gè)變量替換為你需要的內(nèi)容即可生成一個(gè)自定義的徽標(biāo)融柬。
舉個(gè)栗子
例如下面這個(gè)是我的博客的徽標(biāo)：
[](https://champyin.com)
效果：
點(diǎn)擊該徽標(biāo)會(huì)打開(kāi)對(duì)應(yīng)的linkUrl地址，即直接跳到我的博客趋距。
PS：簡(jiǎn)書(shū)不支持圖片鏈接粒氧，所以沒(méi)法看到效果，在其他支持md解析的地方是可以的
進(jìn)階
除了上面所說(shuō)的3個(gè)參數(shù)节腐，shields.io 還提供了一些 query string 來(lái)控制徽標(biāo)樣式外盯。使用方式跟URL的query string一致：徽標(biāo)圖標(biāo)地址?{參數(shù)名}={參數(shù)值}，多個(gè)參數(shù)用 & 連接：
https://img.shields.io/badge/{徽標(biāo)標(biāo)題}-{徽標(biāo)內(nèi)容}-{徽標(biāo)顏色}.svg?{參數(shù)名1}={參數(shù)值1}&{參數(shù)名2}={參數(shù)值2}
常用的 query string 參數(shù)有：
- style：控制徽標(biāo)主題樣式翼雀，style的值可以是：
plastic|flat|flat-square|social饱苟。 - label：用來(lái)強(qiáng)制覆蓋原有徽標(biāo)的標(biāo)題文字。
- colorA：控制左半部分背景顏色狼渊，只能用16進(jìn)制顏色值作為參數(shù)箱熬，不能使用顏色英文类垦。
- colorB：控制右半部分背景顏色。
以style參數(shù)為例
plastic 立體效果：
flat 扁平化效果城须，也是默認(rèn)效果：
flat-square 扁平 + 去圓角效果：
social 社交樣式效果：
還有很多參數(shù)蚤认，用法類(lèi)似。更多信息可以到shields.io查閱糕伐。
總結(jié)
徽標(biāo)簡(jiǎn)潔又不失內(nèi)容砰琢，使用簡(jiǎn)單又不失靈活。如果你的項(xiàng)目還沒(méi)有使用過(guò)徽標(biāo)良瞧，那么不妨試試給你的項(xiàng)目中添加一個(gè)陪汽，你會(huì)愛(ài)上它。
--
歡迎轉(zhuǎn)載褥蚯，轉(zhuǎn)載請(qǐng)注明出處：https://champyin.com/2019/10/05/github%E9%A1%B9%E7%9B%AE%E5%BE%BD%E6%A0%87/
本文同步發(fā)表于：
GitHub項(xiàng)目徽標(biāo) | 掘金
