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

今天我要跟你分享的是這其中的一個小徽章 - GitHub 訪問徽章。

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

一行代碼搞定![1]

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

urlstat 簡介

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

用法一：普通模式

在頁面上添加以下代碼：

<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>

以下是一個?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

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

2. 核心的 API:?handler.go

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

2 個結(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，用于避免不受信的來源創(chuàng)建統(tǒng)計記錄。

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

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

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

徽章渲染 drawer

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

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

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

以 GitHub?talkgo/night?README 為例，我們訪問 GitHub 主頁，就可以得到 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)。

有幾個原因：

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

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

至此一個簡單的 urlstat 就算是完成了。

參考鏈接

點擊閱讀原文，前往項目