GitHub徽標,GitHub Badge,你也能夠叫它徽章。就是在項目README中常常看到的那些代表構建狀態或者版本等信息的小圖標。就像這樣:git
這些好看的小圖標不只簡潔美觀,並且包含了清晰易讀的信息,在README中使用小徽標可以爲本身的項目說明增色很多!如何給本身的項目加上小徽標呢?動態徽標是指若是項目狀態發生變化,會自動更新狀態的徽標,它能保證用戶看到的信息就是項目當前的真實狀態。github
經常使用的動態徽標有:bash
這裏以Travis CI
的持續集成狀態爲例。沒有接觸過 Travis CI
的能夠看個人上一篇文章 利用Travis CI+GitHub實現持續集成和自動部署markdown
登陸 Travis CI
,進入配置過構建的項目,在項目名稱的右邊有個 build passing
或者 build failing
徽標。svg
點擊它,在彈出框中,就能夠看到 Travis CI
爲你提供的各類格式的徽章地址了。測試
你能夠根據須要選擇格式,imageUrl格式大概是這個樣子:ui
https://www.travis-ci.org/{your-name}/{your-repo-name}.svg?branch=master
複製代碼
markdown格式大概是這個樣子:spa
[![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})
複製代碼
簡單起見,我選擇 markdown
格式。將內容複製後,打開項目的README文檔,在頂部位置粘貼。code
通過前4步,小徽章就搞定了。將README文檔push到遠程,刷新GitHub頁面,過一會,就會看到README上面已經有了持續集成狀態圖標了。之因此要過一會才加載出來,是由於它要動態從 Travis CI
平臺獲取狀態。 cdn
shields.io 提供了自定義徽標的功能。
https://img.shields.io/badge/{徽標標題}-{徽標內容}-{徽標顏色}.svg
複製代碼
[![](https://img.shields.io/badge/{徽標標題}-{徽標內容}-{徽標顏色}.svg)]({linkUrl})
複製代碼
變量之間用 -
鏈接。將這3個變量替換爲你須要的內容便可生成一個自定義的徽標。
例以下面這個是個人博客的徽標:
[![](https://img.shields.io/badge/blog-@champyin-red.svg)](https://champyin.com)
複製代碼
點擊該徽標會打開對應的linkUrl地址,即直接跳到個人博客。
除了上面所說的3個參數,shields.io 還提供了一些 query string
來控制徽標樣式。使用方式跟URL的query string一致:徽標圖標地址?{參數名}={參數值},多個參數用 &
鏈接:
https://img.shields.io/badge/{徽標標題}-{徽標內容}-{徽標顏色}.svg?{參數名1}={參數值1}&{參數名2}={參數值2}
複製代碼
經常使用的 query string
參數有:
plastic
| flat
| flat-square
| social
。以style參數爲例
plastic
立體效果:
![](https://img.shields.io/badge/blog-@champyin-orange.svg?style=plastic)
複製代碼
flat
扁平化效果,也是默認效果:
![](https://img.shields.io/badge/blog-@champyin-yellow.svg?style=flat)
複製代碼
flat-square
扁平 + 去圓角效果:
![](https://img.shields.io/badge/blog-@champyin-success.svg?style=flat-square)
複製代碼
social
社交樣式效果:
![](https://img.shields.io/badge/blog-@champyin-blue.svg?style=social)
複製代碼
還有不少參數,用法相似。更多信息能夠到shields.io查閱。
徽標簡潔又不失內容,使用簡單又不失靈活。若是你的項目尚未使用過徽標,那麼不妨試試給你的項目中添加一個,你會愛上它。
--
歡迎轉載,轉載請註明出處:champyin.com/2019/10/05/…