做一個好看的數據展示「小標籤」，在個人網站實時展示你的粉絲數
Matrix 精選
Matrix 是少數派的寫作社區，我們主張分享真實的產品體驗，有實用價值的經驗與思考。我們會不定期挑選 Matrix 最優質的文章，展示來自用戶的最真實的體驗和觀點。
文章代表作者個人觀點，少數派僅對標題和排版略作修改。
如果你瀏覽過一些 GitHub 的開源項目，你一定見過很多 README 文檔中都會出現的五顏六色、各式各樣的「小牌子」。
最初，這些「小牌子」的主要作用是爲了顯示「某個 GitHub 項目」的「某種狀態」，比如項目的編譯是否成功、文檔是否更新至最新、軟件的下載數量有多少……不過，從原理的角度來說，這些「小牌子」都是通過我們給「牌子渲染服務器」提供一些數據後，服務器返回給我們一個 SVG 格式的圖片來工作的。我們將返回的 SVG 圖片嵌入到 GitHub 的 README 文檔或其他網頁裏面，就完成了一個「小牌子」的製作。
因此，我們不僅可以將這些「小牌子」用在 GitHub 裏，如果你擁有自己的「個人主頁」、「博客」或其他展示個人資料的地方，只要你可以控制網頁的 HTML，能自己向其中插入一些自定義代碼，你就可以藉助於「小牌子服務器」來自制一些好看又能實時更新的「個人資料展示牌」、「訂閱地址標識牌」等等。
Shields.io 的基本用法
簡單定製靜態小牌子
Shields.io 就是一個我們開頭提到的「牌子渲染服務」。事實上，GitHub 上面大部分「小牌子」都是用 Shields.io 來渲染的。我們可以藉助於 Shields.io 服務定製一些個性化的「小牌子」。一個最簡單的例子就是： https://img.shields.io/badge/少數派-SpencerWoo-da282a ，這一請求可以渲染得到如下效果的小牌子。
可以發現，簡單定製小牌子非常方便，最最基礎的語法規則就是：
https://img.shields.io/badge/{左半部分標籤}-{右半部分標籤}-{右半部分顏色}
另外，在 Shields.io 的官網 上面有非常方便的「小牌子生成器」，我們可以直接用它來構造一個「小牌子」，只需要按照下圖的樣子：填入左半邊標籤、填入右半邊標籤，再定義右半邊的顏色，點擊 Make Badge 即可生成。其中，右半邊的顏色我們可以用官方提供的幾種預設顏色名稱（下方 Colors）或者我們自己提供十六進制顏色代碼都可以。
我們按照上面的方法構造一個鏈接，就製作完成我們的小牌子啦！這樣得到的鏈接是一個 SVG 圖片鏈接，我們可以直接 用插入圖片的語法規則加到我們的 Markdown 文本文件中或 HTML 裏面。
動態實時更新的小牌子
事實上，我們前面生成的小牌子都是靜態的小牌子：其中的文本內容是固定不變的，僅能用於做一個好看的標識。 而事實上，Shields.io 生成的小牌子完全支持動態數據顯示，比如粉絲、關注者數量、RSS 訂閱者數量……
如果我們想要顯示一些動態變化的數據，那麼我們就需要一個受支持的數據接口，這樣我們的「Shields.io 小牌子生成服務器」就會先行從這一數據接口請求相應的動態數據，並按照請求的結果將數據渲染成不同的「小牌子」。（具體的語法請繼續向下閱讀）
但是，雖然 Shields.io 服務 API 的功能非常完善，能夠支持許多第三方 API 節點的數據服務，但是有一些服務：
- API 接口返回複雜，無法直接用 Shields.io 簡單處理
- API 訪問緩慢、不穩定，經常出現超時或無法訪問的情況
- 訪問一些數據需要進行認證，直接訪問會返回 403 無權限
- 直接不對外公開 API 接口，沒有面向開發者的開放平臺，無法直接請求數據
當我們想要顯示這些平臺的關注者數量、粉絲數量時，往往就力不從心了。 因此，我使用 Serverless 技術實現了「Substats: Subscriber Statistics」—— 一個專注提供多個服務、平臺、網站的粉絲、關注、訂閱數量的 API 中轉站 ，用來專門處理這些單靠 Shields.io 不方便直接處理的疑難雜症。
- Substats 項目開源在： GitHub - spencerwooo/Substats
- Substats 的 API 地址位於： Home - Substats API
- 另外，關於如何調用 Substats API，我還撰寫了比較詳細的文檔： Substats Documentation
下面我來簡單介紹一下如何利用 Substats 配合 Shields.io 定製小牌子 ( •̀ ω •́ )✧
用 Substats 配合 Shields.io 製作動態小牌子
通過 Substats API 獲取我們期望的數據
爲了更好的配合 Shields.io 服務，我特意將 Substats 的 API 設計成簡單拼接 URL 即可進行數據請求。Substats API 的語法非常簡單，我們只需要關注並提供如下的兩個字段即可進行請求：
- 目標服務名稱
source：你所想要請求的服務、網站和平臺名（比如：sspai、weibo……） - 請求數據標籤
queryKey：在這一服務中查詢的關注數據對應的標籤或名稱（比如我的少數派用戶名spencerwoo）
這樣，我們就可以用這樣的語法來拼接一個 URL（注意第一個字符是 ? ，其他用 & 拼接）：
https://api.spencerwoo.com/substats/?source={目標服務名稱}&queryKey={請求數據標籤}
利用這樣的語法，我們就可以進行數據請求啦。繼續上面圖示中的例子，比如我想要製作一個實時顯示我自己的少數派關注數量的小牌子，我拼接成的 URL 即爲：
https://api.spencerwoo.com/substats/?source=sspai&queryKey=spencerwoo
非常方便！這一 URL 會給我們返回類似下面的 JSON 結果：
{
"status": 200,
"data": {
"totalSubs": 638,
"subsInEachSource": {
"sspai": 638
},
"failedSources": {}
}
}
我們可以這樣理解返回的 JSON 數據：
-
status是請求是否成功，成功即爲 200（表示 HTTP OK） -
data就是請求返回的數據（其中totalSubs表示總關注數量，subsInEachSource表示每個服務請求到的粉絲數據，最後failedSources表示請求失敗的數據源。）
可以看到我們所需要的字段即爲 $.data.totalSubs ，也就是 638 —— 我的少數派總關注人數。接下來，我們只需要告訴 Shields.io：
- 我們請求的 URL 地址
- 返回數據中所要的字段
這兩個參數，即可成功製作一個動態小牌子。
用 Shields.io 製作最終動態小牌子
我們繼續借助 Shields.io 官網上面提供的「小牌子生成器」，這次我們稍微向下滾動，找到 Dynamic 版本「小牌子生成器」，並按照這樣的規則依次操作：
- 數據類型
data type選擇：JSON - 標籤
label填入：小牌子左側的標籤，比如少數派關注 - API 地址
data url填入：我們剛剛的 API URL：https://api.spencerwoo.com/substats/?source=sspai&queryKey=spencerwoo - 請求字段
query填入：我們 Substats API 數據中的這一字段：$.data.totalSubs - 標籤顏色
color填入：一個十六進制的顏色代碼，比如少數派強調色：da282a - ……（餘下的兩個參數：前綴
prefix和後綴suffix，可以根據自己的需要自行定義）
這樣，我們就藉助 Shields.io 構造出來一個自定義的動態 SVG 小牌子（由於我們的請求中包含有 URL 中非法的字符，因此下面這個是 URL 編碼之後的 SVG 小牌子地址）：
https://img.shields.io/badge/dynamic/json?color=da282a&label=%E5%B0%91%E6%95%B0%E6%B4%BE%E5%85%B3%E6%B3%A8&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dsspai%26queryKey%3Dspencerwoo
這樣，我們的動態小牌子就完整的製作完成啦，我們可以用 Markdown 的語法將這一圖片鏈接嵌入一篇文章之中：
或者用 HTML 定義圖片的方法直接將這一 SVG 嵌入一個網頁：
<img src="https://img.shields.io/badge/dynamic/json?color=da282a&label=%E5%B0%91%E6%95%B0%E6%B4%BE%E5%85%B3%E6%B3%A8&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dsspai%26queryKey%3Dspencerwoo" />
其他 Substats API 的功能和語法規則
另外，Substats API 還可以串聯多個不同的數據源和它們對應的請求參數。比如，我同時請求少數派、知乎、GitHub 三個平臺上面的關注，即可這樣構造請求（多個 source 和 queryKey 組合按照順序進行請求即可，順序在請求過程中不會丟失）：
https://api.spencerwoo.com/substats/?source=sspai&queryKey=spencerwoo&source=zhihu&queryKey=spencer-woo-64&source=github&queryKey=spencerwooo
可以看到，上面的 URL 裏，我直接串聯了多個 source 和 queryKey 的請求組合，同時請求。這樣我們就可以得到這三個平臺上面關注者數量的總和 totalSubs ，以及每個平臺各自的關注者數量 subsInEachSource ：
{
"status": 200,
"data": {
"totalSubs": 1312,
"subsInEachSource": {
"sspai": 638,
"zhihu": 361,
"github": 313
},
"failedSources": {}
}
}
那麼，我們就可以直接用 Shields.io 構造一個如下的 SVG 小牌子：
https://img.shields.io/badge/dynamic/json?color=0084ff&label=%E5%B0%91%E6%95%B0%E6%B4%BE%7C%E7%9F%A5%E4%B9%8E%7CGitHub&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dsspai%26queryKey%3Dspencerwoo%26source%3Dzhihu%26queryKey%3Dspencer-woo-64%26source%3Dgithub%26queryKey%3Dspencerwooo
這樣我們就可以直接得到三個平臺總關注數量的一個「小牌子」：
同時，如果你想同時請求多個平臺，但是平臺中請求的數據標籤名稱是一樣的，比如我們同時請求 Feedly 和 NewsBlur 兩個 RSS 訂閱服務裏我自己的 RSS 鏈接 https://blog.spencerwoo.com/posts/index.xml 的訂閱數量，那麼我們可以：
- 直接用
|將feedly和newsblur直接連接，傳遞給source作爲參數 - 並將 RSS 鏈接傳遞給
queryKey作爲參數
從而構造這樣的請求：
https://api.spencerwoo.com/substats/?source=feedly|newsblur&queryKey=https://blog.spencerwoo.com/posts/index.xml
這樣，我們就可以直接得到兩個平臺同一個 RSS 源的總訂閱數量：
{
"status": 200,
"data": {
"totalSubs": 17,
"subsInEachSource": {
"feedly": 14,
"newsblur": 3
},
"failedSources": {}
}
}
從而製作表示 RSS 鏈接總訂閱人數的「小牌子」：
簡單方便！實在好用！（不瞞大家說，最初開發這一項目，我就是爲了顯示我自己 RSS 總訂閱人數。:joy:）
小結
Substats 是我藉助 Serverless 技術構建的一個 Cloudflare Worker， 直接部署在 Cloudflare 全球 CDN 節點上，訪問速度非常的快。 因此，如果你使用 Substats 和 Shields.io 來製作「小牌子」，生成 SVG 所消耗的時間的佔比較大的部分應該是和原服務 API 溝通的時間（比如 NewsBlur 就特別慢）。
雖然 Substats 僅誕生了不到一週，但是目前在我和其他兩位同學的共同努力下，已經支持了包括嗶哩嗶哩、少數派、知乎、微博、GitHub 等知名網站、社交平臺以及 Feedly 和 NewsBlur 兩大 RSS 服務提供商。未來我會盡我所能，繼續維護，支持更多的平臺。
希望這篇文章，以及 Substats API，能幫助你更方便、更輕鬆的 零成本自制動態實時更新、快速加載 的小牌子，用來裝扮你的個人主頁、博客、GitHub 項目 README 或其他網頁。 如果你覺得 Substats 簡直太棒了，那請一定 前往 GitHub 項目頁面 給我一個 :star2: Star！ 本文的介紹到這裏就結束啦，感謝閱讀。
> 下載少數派客戶端、關注少數派公衆號，瞭解更精彩的數字生活 :leaves:
