在 Astro 博客中优雅使用 51.la 统计数据

news/2025/10/24 20:06:47/文章来源:https://www.cnblogs.com/zxc7563598/p/19164148

作为老牌网站流量统计服务商，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/statisticssdk: 'https://sdk.51.la/js-sdk-pro.min.js',id: 'xxxxxxxxxxxxxxxx',ck: 'xxxxxxxxxxxxxxxx',// 数据挂件 javascript 地址// See: https://v6-widget.51.la/v6/xxxxxxxxxxxxxxxx/quote.jswidget: '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>