如題，比如這樣：

你可以在你的項(xiàng)目的介紹文檔上添加一些可愛(ài)的徽章（至少我覺(jué)得挺可愛(ài)）。

這個(gè)要怎么做呢？首先，我們需要使用到一個(gè)徽章制作網(wǎng)站：https://shields.io/。

這個(gè)網(wǎng)站可以幫助你直接制作所有類型的可愛(ài)圖標(biāo)。

Part 1 基本圖標(biāo)制作

先來(lái)看看基本的圖標(biāo)如何制作。

眾所周知，圖標(biāo)都是綁定上一些提示信息的，比如說(shuō) GitHub 倉(cāng)庫(kù)代碼的服部平次更新頻次啊、代碼的 star 數(shù)量、代碼的 fork 數(shù)量以及代碼開(kāi)源協(xié)議使用等等。

既然綁定上的這些概念都和 GitHub 倉(cāng)庫(kù)本身的性質(zhì)設(shè)置有關(guān)，那么我們就必須要給出我們要使用圖標(biāo)的對(duì)應(yīng)倉(cāng)庫(kù)鏈接。

打開(kāi)網(wǎng)頁(yè)，我們可以看到上面有一排比較小的字：“search / project URL”（搜索/倉(cāng)庫(kù) URL 地址）。在這里我們是可以輸入東西的。這里我們要填入的是我們綁定的倉(cāng)庫(kù)地址。比如我演示給大家看的地址是：

https://github.com/SunnieShine/Sudoku

就把這個(gè)鏈接填上去就可以了。接著，我們點(diǎn)擊它下面挨著的按鈕：Suggest badges（推薦的徽章），然后，你就可以看到一系列的圖標(biāo)了。

其中，最后一個(gè)是推特的發(fā)推地址因?yàn)槔贤夂芟矚g用這個(gè)平臺(tái)發(fā)一些 bia bia 言。我們用不上，所以這個(gè)可以不管。前面的幾個(gè)分別對(duì)應(yīng)的是：

• 倉(cāng)庫(kù)的 issue（問(wèn)題列表）數(shù)；

• 倉(cāng)庫(kù)的 fork（被多少個(gè)人克隆了一份代碼）數(shù)；

• 倉(cāng)庫(kù)的 star（點(diǎn)贊）數(shù)；

• 倉(cāng)庫(kù)代碼使用的開(kāi)源協(xié)議。

當(dāng)然，暫時(shí)只支持英語(yǔ)，你改成中文的話可是可以，不過(guò)標(biāo)準(zhǔn)功能就到這里了，要改設(shè)置高級(jí)編輯操作，這個(gè)我們一會(huì)兒來(lái)說(shuō)。

拿著這些徽章后，不是直接復(fù)制過(guò)去的，而是需要復(fù)制徽章的對(duì)應(yīng)鏈接。操作很簡(jiǎn)單，點(diǎn)擊這些徽章旁邊的地址，會(huì)彈出一個(gè)框，提示你需不需要微調(diào)里面的內(nèi)容。

一般來(lái)說(shuō)，不用改。如果你要改也可以。

最上面的這一排是倉(cāng)庫(kù)地址解析后的文本框，這一排不要?jiǎng)印Ｈ缓笫窍旅孢@一排。這一排對(duì)應(yīng)了 5 行，第一行是下拉框，選擇的是徽章本身的樣式。這個(gè)就自己試一下了，每一個(gè)都展示一下就太啰嗦了。

然后剩下的 4 行都是改變里面的內(nèi)容和屬性。其中：

• override label（覆蓋文字）：表示徽章的黑色部分顯示的文字修改成什么；

• override color（覆蓋顏色）：表示徽章右邊的數(shù)值部分顯示成什么底色（填入的數(shù)值必須是十六進(jìn)制的六個(gè)數(shù)位，代表 RGB 顏色碼）；

• named logo（網(wǎng)站圖標(biāo)）：表示徽章黑色部分給出的提示文字可以配什么網(wǎng)站的圖標(biāo)；

• override logo color（覆蓋網(wǎng)站圖標(biāo)顏色）：表示上一個(gè)內(nèi)容（圖標(biāo)）的顏色是什么。

比如改變其中的一些數(shù)值可以立馬看到對(duì)應(yīng)的效果：

改好之后，點(diǎn)擊下面的藍(lán)色按鈕的下拉部分，選擇 Copy Markdown（復(fù)制 Markdown 文本）。

因?yàn)槲覀円@示的文字信息是在倉(cāng)庫(kù)的文檔上，文檔多以 Markdown 語(yǔ)法來(lái)書(shū)寫(xiě)，所以這里我們要用的就是這個(gè)地方的 Copy Markdown。別的（比如 Copy HTML）也可以?？茨阕约?。

最后，咱已經(jīng)復(fù)制好了，粘貼到文檔的某個(gè)你想放上去的位置上，就 OK 了。

順帶一說(shuō)，這里的 named logo 是可以輸入 bilibili 的，輸入上去圖標(biāo)直接就變成小電視了，然后換成 B 站自己的姨媽紅，那酸爽（bushi）。

這就是改變辦法。

Part 2 高級(jí)徽章生成

要說(shuō)高級(jí)其實(shí)也沒(méi)那么高級(jí)，只不過(guò)可以動(dòng)態(tài)變動(dòng)你想要的信息罷了。

第一個(gè)要說(shuō)的是這部分：自定義文案。

這部分可以插入一些靜態(tài)的、你自己定義的信息。這部分信息是沒(méi)有前面給的那種帶有固定含義的超鏈接支持的，但至少可以自定義嘛。

在 static（靜態(tài)文本）下面的三個(gè)文本框里分別對(duì)應(yīng)輸入“標(biāo)簽名稱”、“對(duì)應(yīng)信息”以及“信息部分的背景色”就可以了。典型用法就是 B 站鏈接。

點(diǎn)擊旁邊的 Make Badge（生成徽章）：

效果就有了。這個(gè)怎么復(fù)制過(guò)去呢？生成之后會(huì)直接彈出一個(gè)新頁(yè)面顯示，而上面的網(wǎng)址就對(duì)應(yīng)了這個(gè)圖標(biāo)的圖片地址。你只需要按照 Markdown 語(yǔ)法，把它當(dāng)成圖片的地址輸入到合適的代碼里就可以了：

接著是第二部分：帶有動(dòng)態(tài)數(shù)值變更的徽章。

像是上面那樣，帶有 B 站粉絲個(gè)數(shù)的動(dòng)態(tài)數(shù)據(jù)也可以用這樣的徽章顯示出來(lái)，而且徽章也是隨著數(shù)值動(dòng)態(tài)變動(dòng)的（我真的沒(méi)有凡爾賽的意思……

翻到 Dynamic（動(dòng)態(tài)文案）部分。

這里我們需要填寫(xiě)的東西就比較多了，因?yàn)閯?dòng)態(tài)控制的信息也比較多。

一共有 7 個(gè)要變動(dòng)的數(shù)據(jù)，第一個(gè)是下拉框，選擇的是我們動(dòng)態(tài)變動(dòng)的數(shù)值是什么格式的。這里可能需要你有一丟丟的編程基礎(chǔ)。倒不是說(shuō)讓你寫(xiě)代碼，是至少要知道這些文件都是拿來(lái)干嘛的。下拉框拉下來(lái)有這樣一些選項(xiàng)：

第一個(gè)是 JSON（JavaScript Object Notation，JavaScript 對(duì)象記法），這個(gè)寫(xiě) JavaScript 前臺(tái)代碼的同學(xué)肯定不陌生。這也是現(xiàn)代程序經(jīng)常用到的數(shù)據(jù)收發(fā)文本的固定標(biāo)準(zhǔn)了，都已經(jīng)不限于只在 JavaScript 里才會(huì)使用了。

第二個(gè)是 XML（Extensible Markup Language，可擴(kuò)展標(biāo)記語(yǔ)言），這個(gè)寫(xiě)起來(lái)跟 HTML 長(zhǎng)得比較像，實(shí)際上也確實(shí)是包含的關(guān)系。

第三個(gè)是 YAML（Another Markup Language，另外一個(gè)標(biāo)記語(yǔ)言），這個(gè)寫(xiě)起來(lái)就不太像是 XML 了，不過(guò)這個(gè)也經(jīng)常被用到過(guò)。

既然是拿 B 站粉絲數(shù)量來(lái)演示的話，自然用的是 B 站的數(shù)據(jù)。查看 B 站粉絲數(shù)量的話，我們大家都知道，打開(kāi)網(wǎng)頁(yè)就行了，對(duì)吧。不過(guò)這樣顯然不是很“科學(xué)”。這里的“科學(xué)”指的是有邏輯性、嚴(yán)謹(jǐn)性、正確性、唯一性以及便利性。換句話說(shuō)，我們要查詢這個(gè)數(shù)據(jù)顯然不是單純的開(kāi)個(gè)網(wǎng)頁(yè)這樣，畢竟別人這個(gè)徽章的數(shù)據(jù)顯示不會(huì)跟人一樣也去開(kāi)個(gè)網(wǎng)頁(yè)，點(diǎn)開(kāi)了然后識(shí)別一下用戶的粉絲數(shù)，然后關(guān)掉網(wǎng)頁(yè)，對(duì)吧，徽章又不是人。

這怎么做到呢？這里用到的是 B 站提供的 API。API 是啥我就不介紹了，也沒(méi)必要去啰嗦，你只需要知道，B 站有一個(gè)機(jī)制，輸入一個(gè)指定的網(wǎng)址信息，它會(huì)只顯示出基本的數(shù)據(jù)信息，比如你的用戶粉絲數(shù)量啊，投稿個(gè)數(shù)之類的，別的（視頻啊這些）都不顯示。這個(gè)網(wǎng)址是

https://api.bilibili.com/x/relation/stat?vmid=你的B站的UID（那串?dāng)?shù)字）

我的 UID 是 23736703，因此可以通過(guò)這個(gè)網(wǎng)址去查詢到結(jié)果：

你看，輸入這串地址之后，結(jié)果就是一個(gè)很清純的數(shù)據(jù)信息了，雖然不是很懂，但至少你可以看到比如 follower 這樣的單詞，可以猜想到對(duì)應(yīng)的意思是什么，對(duì)吧。

接著，這個(gè)網(wǎng)址信息我們一會(huì)兒會(huì)用到，所以先不要關(guān)掉網(wǎng)頁(yè)。

然后，返回剛才的頁(yè)面，我們對(duì)應(yīng)這個(gè)圖輸入對(duì)應(yīng)的信息即可：

輸入結(jié)果參考：

其中的“查詢表達(dá)式”部分，是看我們剛才的格式里給定的 follower 是怎么個(gè)層級(jí)關(guān)系而定的。比如剛才的網(wǎng)址的數(shù)據(jù)里，要找到 follower 的數(shù)值，它的外層套了一個(gè) data 的部分，所以這個(gè)查詢表達(dá)式的語(yǔ)法寫(xiě)成“$.data.follower”。其中美元符號(hào) $ 不可少，因?yàn)檫@個(gè)查詢表達(dá)式的語(yǔ)法要求就是以這個(gè)符號(hào)開(kāi)頭。

最后點(diǎn)擊 Make Badge（生成徽章）就可以了：

可以看到，生成的結(jié)果的鏈接較長(zhǎng)，是因?yàn)槲覀冊(cè)O(shè)置的參數(shù)信息特別多。這個(gè)徽章的復(fù)制方式和剛才介紹的那個(gè)是一樣的，把地址信息復(fù)制粘貼到你的文檔上去就可以了。

嗯，沒(méi)了。