GitHub項目徽標

前言

GitHub徽標,GitHub Badge,你也能夠叫它徽章。就是在項目README中常常看到的那些代表構建狀態或者版本等信息的小圖標。就像這樣:git

github-badge.jpg
這些好看的小圖標不只簡潔美觀,並且包含了清晰易讀的信息,在README中使用小徽標可以爲本身的項目說明增色很多!如何給本身的項目加上小徽標呢?

1、關於徽標

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

2、如何添加動態徽標

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

經常使用的動態徽標有:bash

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

這裏以Travis CI 的持續集成狀態爲例。沒有接觸過 Travis CI的能夠看個人上一篇文章 利用Travis CI+GitHub實現持續集成和自動部署markdown

  1. 登陸 Travis CI,進入配置過構建的項目,在項目名稱的右邊有個 build passing 或者 build failing 徽標。svg

  2. 點擊它,在彈出框中,就能夠看到 Travis CI 爲你提供的各類格式的徽章地址了。測試

  3. 你能夠根據須要選擇格式,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})
    複製代碼
  4. 簡單起見,我選擇 markdown 格式。將內容複製後,打開項目的README文檔,在頂部位置粘貼。code

  5. 通過前4步,小徽章就搞定了。將README文檔push到遠程,刷新GitHub頁面,過一會,就會看到README上面已經有了持續集成狀態圖標了。之因此要過一會才加載出來,是由於它要動態從 Travis CI 平臺獲取狀態。 cdn

    build-passing.png

3、如何自定義徽標

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

徽標圖標格式

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

帶連接的徽標

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

變量說明

  • 徽標標題:徽標左邊的文字
  • 徽標內容:徽標右邊的文字
  • 徽標顏色:徽標右邊的背景顏色,能夠是顏色的16進制值,也能夠是顏色英文。支持的顏色英文以下:
    shields.io-color.jpg

變量之間用 - 鏈接。將這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 參數有:

  • style:控制徽標主題樣式,style的值能夠是: plastic | flat | flat-square | social
  • label:用來強制覆蓋原有徽標的標題文字。
  • colorA:控制左半部分背景顏色,只能用16進制顏色值做爲參數,不能使用顏色英文。
  • colorB:控制右半部分背景顏色。

以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/…

相關文章
相關標籤/搜索