作為老牌網站流量統計服務商，51.la 提供每月高達 1000 萬次的免費統計額度，非常適合個人博客或小型網站使用。不過，51.la 默認的統計展示是通過嵌入 JS 文件自動渲染的，這種展示方式對美觀性和自定義性有限，對於追求頁面整潔或者想要自己設計展示風格的博主來説不太方便。
我之所以想自己處理 51.la 的統計，是因為我希望更直觀地看到有多少人訪問我的博客，瞭解訪客的訪問情況，從而改進內容和佈局。經過嘗試，我找到了一個方法：解析 51.la 的 widget JS 數據，自行在 Astro 中渲染統計數據，既保留統計功能，又可以完全控制展示效果。下面分享我的完整經驗。
配置文件管理
在 Astro 中，一般會有一個全局配置文件，用來集中管理各種配置。我們可以把 51.la 的相關信息放在一起，示例：
export const metrics: { enable: boolean; sdk: string; id: string; ck: string; widget: string } = {
// 51.la 統計開關
enable: true,
// 統計網站的配置信息，在後台獲取
// See: https://v6.51.la/report/setup/params/statistics
sdk: 'https://sdk.51.la/js-sdk-pro.min.js',
id: 'xxxxxxxxxxxxxxxx',
ck: 'xxxxxxxxxxxxxxxx',
// 數據掛件 javascript 地址
// See: https://v6-widget.51.la/v6/xxxxxxxxxxxxxxxx/quote.js
widget: 'https://v6-widget.51.la/v6/xxxxxxxxxxxxxxxx/quote.js'
}如果你的項目中沒有配置文件，可以在 src 下創建一個 TS 文件，然後在 tsconfig.json 的 paths 中添加，例如：
"@/site-config": ["src/site.config.ts"]這樣，在 Astro 頁面中就可以直接引入：
---
import { metrics } from '@/site-config'
---集中管理配置的好處是，一旦需要修改統計信息，只需改一處即可，方便維護。
在入口加載統計
為了統計用户訪問情況，我們需要在頁面入口加載 51.la 的 SDK。不同主題的入口文件可能不同，Astro 默認的入口是 src/layouts/Layout.astro。如果不確定，可以從 pages/index.astro 開始反推去找包含完整 HTML 結構的佈局文件。在佈局文件的 <head> 中加入：
{metrics.enable && <script is:inline src={metrics.sdk} />}
<script is:inline type='module' data-astro-rerun define:vars={{ metrics: metrics }}>
if (metrics.enable) {
LA.init({ id: metrics.id, ck: metrics.ck })
}
</script>
注意：對應的文件頂部需要引入配置：import { metrics } from '@/site-config'
這樣，每次用户訪問頁面時都會觸發 51.la 的統計，後台就能記錄訪客數據。
創建數據展示組件
為了美觀，我們可以自己在 components 裏創建一個組件（例如 Metrics.astro）來展示數據，這樣就不依賴 51.la 默認的 JS 渲染。示例：
---
import { metrics } from '@/site-config'
---
<div id='widget'>
加載中...
</div>
<script is:inline type='module' data-astro-rerun define:vars={{ metrics: metrics }}>
if (metrics.enable && metrics.widget) {
fetch(metrics.widget)
.then((res) => res.text())
.then((data) => {
let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g)
if (!num) {
console.warn('51.la 數據匹配失敗')
return
}
num = num.map((el) => el.replace(/(<\/span><span>|<\/span><\/p>)/g, ''))
const titles = [
'最近活躍',
'今日人數',
'今日訪問',
'昨日人數',
'昨日訪問',
'本月訪問',
'總訪問量'
]
const container = document.getElementById('widget')
let html = ''
for (let i = 0; i < num.length; i++) {
html += `<div>標題：${titles[i]}</div>`
html += `<div>內容：${num[i]}</div>`
}
container.innerHTML = html
})
.catch((err) => {
console.error('51.la 數據獲取失敗:', err)
document.getElementById('widget').innerHTML = '加載失敗'
})
}
</script>樣式可以根據自己的需求進行美化，例如網格佈局、卡片樣式等。這裏的重點是把數據準確展示出來，讓訪客統計信息可視化。
總結
通過這種方式，你可以：
- 保留 51.la 的統計功能，無需自己搭建後端統計系統。
- 自定義統計數據顯示方式，讓數據展示更美觀、更符合博客風格。
- 在 Astro 項目中簡單集成，配置和組件化管理清晰。
我之所以選擇自己解析 widget 數據，是希望在博客上直觀看到訪客情況，瞭解每天有多少人訪問、哪些內容更受歡迎。這樣可以更有針對性地優化博客內容，同時也享受了 51.la 提供的免費統計額度。
注意：如果 51.la 的 widget JS 結構有改動，正則匹配可能需要更新。但在目前版本下，這種方法非常穩妥。
這樣，你就可以既“白嫖” 51.la 免費流量統計，又能自由控制數據展示效果，同時清楚瞭解自己的博客訪問情況。
可以來我的博客查看效果：hejunjie.life
