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

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


一行代碼搞定![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="//changkun.de/urlstat/client.js"></script>

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

<span?id="urlstat-page-pv"><!--?info?will?be?inserted?--></span> <span?id="urlstat-page-uv"><!--?info?will?be?inserted?--></span>

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

用法二：GitHub 模式

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


源碼分析

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

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

核心的 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?對應的 handler 是 recording。

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

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

徽章渲染 drawer

對于我們使用的徽章模式，項目通過 drawer 來渲染出一個?image/svg+xml?badge，想要了解詳細代碼實現(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 代理，它對其他用戶隱藏您的瀏覽器詳細信息和相關信息。URL 以?https://<subdomain>.githubusercontent.com/?開頭，根據(jù)你上傳圖像的方式具有不同的子域。

以 GitHub?talkgo/night?README 為例，我們訪問 GitHub 主頁，就可以得到 camo 渲染代碼：

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

為什么要使用 camo

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

有幾個原因：

性能：GitHub 為大量用戶提供服務，如果不這樣做，頁面加載時間會很糟糕。

隱私：讓回購所有者嵌入跟蹤圖像是不可接受的。

DDoS 角度：在外部托管圖像允許惡意存儲庫所有者擁有相當流行的存儲庫，只需加載其中一個圖像即可對他們選擇的任何站點進行 DDoS 攻擊。

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

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

參考鏈接

[1]

一行代碼搞定!:?https://github.com/talkgo/night/commit/3542964480fc3e45600cff40a53abff31249609f

[2]

blog.changkun.de:?https://blog.changkun.de

[3]

golang.design/research:?https://golang.design/research

[4]

golang.design/research 例子:?https://golang.design/research/zero-alloc-call-sched/

[5]

https://github.com/changkun/urlstat/blob/main/renderer.go:?https://github.com/changkun/urlstat/blob/main/renderer.go

[6]

https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls:?https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls

[7]

參見 Github image without camo with Stack Overflow:?https://stackoverflow.com/questions/57857193/github-image-without-camo

點擊閱讀原文，前往項目

總結(jié)

以上是生活随笔為你收集整理的一行代码搞定 GitHub 访问徽章的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。