github上常見的徽章標籤和進度條

平時在上github的時候看到別人寫的精美的README,我總是感到非常的羨慕.近來我也開始使用markdown寫部落格,看到之前有一些專案的README的開始部分總是會有例如

這樣的徽章樣式的標籤.

甚至還有些文章會有

這樣的進度條,簡直炫酷.這是怎麼做到的呢?

已有的標籤小程式

網上搜了一下,用shields.io就可以解決!
但是這個網站怎麼用?貌似寫的不太清楚,網上也沒有詳細一點的介紹微博,只能自己試驗了一下.

我的理解這個網站提供了一批”標籤小程式”,他們的作用是抓取一些動態的資料並自動生成標籤圖片.
比如抓取github上專案的最新的release版本號生成release標籤,抓取twitter的賬號關注人數生成關注標籤等等.
使用這種標籤能夠保證每次重新整理網頁都會重新抓取資料,並且重新更新標籤上的文字.這樣就實現了動態變化的徽章標籤.

舉例來說:

這一行的小程式功能就是用來展示某一個github專案最新的release版本號.

點開你可以看到如下介面

Image這一行就是小程式的URL,前面的

https://img.shields.io/github/release/

是小程式的位置,後面需要填寫要獲取的github使用者名稱和專案名.svg,例如著名的tinker專案

它的使用者名稱是Tencent,專案名是tinker,所以我們把上面的小程式的URL補全成

https://img.shields.io/github/release/Tencent/tinker.svg

這樣一個小勳章就做好了,我們可以把上面的URL貼上到瀏覽器位址列試一下

等等,這就生成好了?那上面的小程式介面其他的部分是做什麼的呢?
其實小程式只是為我們提供了一個便捷生成markdown圖片連結的方式:
Link後面可以填寫我們希望點選徽章跳轉到的URL,注意這個地址跟徽章上顯示什麼毫無關係.能夠影響徽章上的文字的只有Image後面的URL.

填寫了Link後,下方的Markdown後就會自動生成對應的markdown語法生成的徽章圖片連結.如果我們在寫github的README,就可以直接複製Markdown後面的文字,貼上到README裡面,是不是很方便.

最下方的

Documentation

If your GitHub badge errors, it might be because you hit GitHub's rate limits.
You can increase Shields.io's rate limit by going to this page to add Shields as a GitHub application on your GitHub account.

的意思是如果小程式無法自動獲得版本號,可能是由於github對小程式有限制,想要減少這種限制可以點選going to this page 去授權Shields訪問github.

生成自定義徽章標籤

那麼,如果我們想要生成的徽章字樣和顏色shields.io上面沒有怎麼辦?
例如我們想生成一個

的徽章我們應該怎麼做呢?

把shields的網站拉到最後,可以看見

對,就是這裡!像我這樣填,再點選Make Badge按鈕就可以生成我們想要的任何徽章了!
color的顏色如果不知道怎麼填,可以點選輸入框會有下拉項提供選擇哦

生成進度條標籤

最後,我們想生成進度條怎麼辦?

如圖

只要把URL中的數字換成自己想要的,就可以生成各種樣式和顏色的進度條了.

其他

• 如果我們在寫markdown的時候想為我們的徽章或者進度條新增點選跳轉的超連結,可以使用超連結和圖片的語法巢狀來寫,具體可以參照markdown標準語法.

[![](徽章/進度條URL)](點選超連結)

• 自定義徽章和進度條由於引數是寫死的,不會根據網路的資料自動變化上面的文字,所以,這些標籤是靜態的,修改的時候需要我們手動更改URL.