一行代碼搞定 GitHub 訪問(wèn)徽章

相信對(duì)于使用 GitHub 的小伙伴來(lái)說(shuō)，以上 GitHub 徽章（badge）應(yīng)該都不怎么陌生吧。如果你想快速用起來(lái)，找到你想要的徽章代碼 ctrl+c & ctrl+v ，再修改對(duì)應(yīng)的 GitHub username/repo_name 即可。

今天我要跟你分享的是這其中的一個(gè)小徽章 - GitHub 訪問(wèn)徽章。

![](https://changkun.de/urlstat?mode=github&repo=talkgo/night)

一行代碼搞定![1]

這么簡(jiǎn)單就接入了，那它是怎么實(shí)現(xiàn)？它還有其他什么特性呢？

urlstat 簡(jiǎn)介

urlstat?提供了跨網(wǎng)站的 pv/uv 統(tǒng)計(jì)。適用于?blog.changkun.de[2],?golang.design/research[3]?等網(wǎng)站的統(tǒng)計(jì)。

用法一：普通模式

在頁(yè)面上添加以下代碼：

<script?async?src="http://changkun.de/urlstat/client.js">script>

該腳本將查找 ID 為?urlstat-page-pv?和?urlstat-page-uv?的元素，并在找到后更新信息。

<span?id="urlstat-page-pv">span>
<span?id="urlstat-page-uv">span>

以下是一個(gè)?golang.design/research 例子[4]

用法二：GitHub 模式

用戶 query 參數(shù)：?mode=github&repo=talkgo/night，例如：

![](https://changkun.de/urlstat?mode=github&repo=talkgo/night)

源碼分析

1. 入口函數(shù)?urlstat.go

我們可以看到該項(xiàng)目所用到的技術(shù)：?net/http,?embed.FS?, MongoDB 構(gòu)建了一個(gè)使用 MongoDB 存儲(chǔ)數(shù)據(jù)的 HTTP Server。

2. 核心的 API:?handler.go

• /urlstat: 記錄訪問(wèn)數(shù)據(jù)
• /urlstat/dashboard: urlstat 的后臺(tái)管理系統(tǒng)
• /urlstat/client.js: 提供給 html 頁(yè)面使用的 client.js 代碼
• 代碼的主要邏輯就是去請(qǐng)求數(shù)據(jù)，然后將其填充到頁(yè)面的兩個(gè) span 中。

2 個(gè)結(jié)構(gòu)體：stat,?visit?就囊括了 urlstat 的基本數(shù)據(jù)結(jié)構(gòu)。

type?stat?struct?{
?PagePV?int64?`json:"page_pv"`
?PageUV?int64?`json:"page_uv"`
}

type?visit?struct?{
?Path????string????`json:"path"????bson:"path"`
?IP??????string????`json:"ip"??????bson:"ip"`
?UA??????string????`json:"ua"??????bson:"ua"`
?Referer?string????`json:"referer"?bson:"referer"`
?Time????time.Time?`json:"time"????bson:"time"`
}

API 還加了 allowOrigin, allowGitHubUser，用于避免不受信的來(lái)源創(chuàng)建統(tǒng)計(jì)記錄。

/urlstat?對(duì)應(yīng)的 handler 是 recording。

在這個(gè)函數(shù)里面通過(guò) mode 來(lái)判斷其使用的是網(wǎng)頁(yè)版還是 GitHub 徽章版。

函數(shù)邏輯也很簡(jiǎn)單，首先解析數(shù)據(jù)，然后 saveVisit，然后再 countVisit，并將其結(jié)果返回。

徽章渲染 drawer

對(duì)于我們使用的徽章模式，項(xiàng)目通過(guò) drawer 來(lái)渲染出一個(gè)?image/svg+xml?badge，想要了解詳細(xì)代碼實(shí)現(xiàn)，可以參考這段代碼:?https://github.com/changkun/urlstat/blob/main/renderer.go[5]

渲染出來(lái)的這個(gè)是怎么在 GitHub 上顯示的呢？那我們就必須得了解一下 GitHub 匿名 URL：https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls[6]

文中提到 GitHub 使用 Camo，那 Camo 又是什么呢？Camo 為每個(gè)文件生成一個(gè)匿名 URL 代理，它對(duì)其他用戶隱藏您的瀏覽器詳細(xì)信息和相關(guān)信息。URL 以?https://.githubusercontent.com/?開(kāi)頭，根據(jù)你上傳圖像的方式具有不同的子域。

以 GitHub?talkgo/night?README 為例，我們?cè)L問(wèn) GitHub 主頁(yè)，就可以得到 camo 渲染代碼：

"_blank"?rel="noopener?noreferrer"?href="https://camo.githubusercontent.com/142682259b230dd9ed8d7382509ecf5eab5cc54aea56d1ea7c4871292adfff8a/68747470733a2f2f6368616e676b756e2e64652f75726c737461743f6d6f64653d676974687562267265706f3d74616c6b676f2f6e69676874">"https://camo.githubusercontent.com/142682259b230dd9ed8d7382509ecf5eab5cc54aea56d1ea7c4871292adfff8a/68747470733a2f2f6368616e676b756e2e64652f75726c737461743f6d6f64653d676974687562267265706f3d74616c6b676f2f6e69676874"?alt=""?data-canonical-src="https://changkun.de/urlstat?mode=github&repo=talkgo/night"?style="max-width:?100%;">

為什么要使用 camo

任何在 GitHub README.md 文件（或其他呈現(xiàn)的 HTML 格式）中呈現(xiàn)的圖像都將使用 camo 呈現(xiàn)。

有幾個(gè)原因：

1. 性能：GitHub 為大量用戶提供服務(wù)，如果不這樣做，頁(yè)面加載時(shí)間會(huì)很糟糕。
2. 隱私：讓回購(gòu)所有者嵌入跟蹤圖像是不可接受的。
3. DDoS 角度：在外部托管圖像允許惡意存儲(chǔ)庫(kù)所有者擁有相當(dāng)流行的存儲(chǔ)庫(kù)，只需加載其中一個(gè)圖像即可對(duì)他們選擇的任何站點(diǎn)進(jìn)行 DDoS 攻擊。

更多詳細(xì)解釋，參見(jiàn) Github image without camo with Stack Overflow[7]

至此一個(gè)簡(jiǎn)單的 urlstat 就算是完成了。

參考鏈接

點(diǎn)擊閱讀原文，前往項(xiàng)目