方法1:使用我搭建的api
https://51la.api.trustdev.org/某51la应用统计id
id在哪里?
进入主页 https://v6.51.la/user/application
选择你的项目 -> 查看报表 -> 左侧目录「配置」「参数设置」 -> 右侧内容「数据挂件」 -> 下滑到最下方的嵌入代码部分找到src里的id即可
例如以下示例中的id就是3OGw6eTnMvVcw977
<script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/3OGw6eTnMvVcw977/quote.js?theme=0&col=true&f=12&badge=icon_0&icon=center"></script>
所以组合完毕的链接即:https://51la.api.trustdev.org/3OGw6eTnMvVcw977
方法2:自建cloudflare workers (cf免费服务)
数据统计网站51.la很多人在用,网站上支持挂载这种类型的组件。

但是它的样式是固定的,很多时候我们想的是自己写一个,所以就需要取出,本文采用的方法是使用cloudflare workers,每天100,000次免费。
在cloudflare网站左侧菜单里选择「Workers and Pages」

选择「创建程序」->「从Hello World! 开始」-> 修改worker名为你要的链接前缀 -> 部署
然后再右侧选中「编辑代码」

将以下worker.js内容复制入
javascript
/**
* 51.la 网站统计数据解析 API
* 部署到 Cloudflare Workers
*
* 使用方式: https://your-worker.workers.dev/3OGw6eTnMvVcw977
* 或者: https://your-worker.workers.dev/?id=3OGw6eTnMvVcw977
*/
export default {
async fetch(request, env, ctx) {
const url = new URL(request.url);
// 支持 CORS
const corsHeaders = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type',
};
// 处理 OPTIONS 预检请求
if (request.method === 'OPTIONS') {
return new Response(null, { headers: corsHeaders });
}
// 获取站点 ID 参数
// 支持两种方式: /3OGw6eTnMvVcw977 或 /?id=3OGw6eTnMvVcw977
let siteId = url.pathname.slice(1) || url.searchParams.get('id');
if (!siteId) {
return new Response(JSON.stringify({
success: false,
error: '请提供站点 ID 参数',
usage: '/{siteId} 或 /?id={siteId}',
example: '/3OGw6eTnMvVcw977'
}, null, 2), {
status: 400,
headers: {
'Content-Type': 'application/json; charset=utf-8',
...corsHeaders
}
});
}
try {
const data = await fetchStats(siteId);
return new Response(JSON.stringify({
success: true,
siteId: siteId,
data: data,
updatedAt: new Date().toISOString()
}, null, 2), {
headers: {
'Content-Type': 'application/json; charset=utf-8',
'Cache-Control': 'max-age=60', // 缓存 60 秒
...corsHeaders
}
});
} catch (error) {
return new Response(JSON.stringify({
success: false,
error: error.message
}, null, 2), {
status: 500,
headers: {
'Content-Type': 'application/json; charset=utf-8',
...corsHeaders
}
});
}
}
};
/**
* 获取并解析 51.la 统计数据
*/
async function fetchStats(siteId) {
const url = `https://v6-widget.51.la/v6/${siteId}/quote.js`;
const response = await fetch(url, {
headers: {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
'Referer': 'https://www.51.la/'
}
});
if (!response.ok) {
throw new Error(`请求失败: ${response.status}`);
}
const jsContent = await response.text();
// 解析数据 - 数据格式为 <span>索引</span><span>数值</span>
// 索引对应: 0=最近活跃, 1=今日访客, 2=今日访问量, 3=昨日访客, 4=昨日访问量, 5=本月访问量, 6=总访问量
const regex = /<span>(\d+)<\/span><span>(\d+)<\/span>/g;
const matches = [...jsContent.matchAll(regex)];
if (matches.length === 0) {
throw new Error('无法解析数据,可能站点 ID 无效');
}
// 构建数据映射
const dataMap = {};
for (const match of matches) {
const index = parseInt(match[1]);
const value = parseInt(match[2]);
dataMap[index] = value;
}
// 返回结构化数据
return {
// 最近活跃访客数
recentActive: dataMap[0] ?? 0,
// 今日
today: {
visitors: dataMap[1] ?? 0, // 访问人数 (UV)
views: dataMap[2] ?? 0 // 访问量 (PV)
},
// 昨日
yesterday: {
visitors: dataMap[3] ?? 0, // 访问人数 (UV)
views: dataMap[4] ?? 0 // 访问量 (PV)
},
// 本月访问量
monthViews: dataMap[5] ?? 0,
// 总访问量
totalViews: dataMap[6] ?? 0
};
}
在右侧窗口可以测试,参数是51.la中你某个统计网站的id,
格式例如:https://your-worker.workers.dev/某51la应用统计id
测试无误即可在其他程序里调用这个API。