本文将介绍如何使用 Umami API 配合 js 脚本显示站点总浏览量与访问数,同时结合 Cloudflare Worker 转发 API 以隐藏 Umami 的 Token。

Cloudflare Worker 转发 API:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
// 获取环境变量
const UMAMI_API_URL = "https://你的umami地址/api";
const UMAMI_WEBSITE_ID = "网站id";
const UMAMI_API_TOKEN = "umami token";

// 获取请求 URL
const url = new URL(request.url);
const startAt = url.searchParams.get('startAt') || '2024-01-01T00:00:00Z'; // 获取开始时间,默认为 2024-01-01
const endAt = url.searchParams.get('endAt') || new Date().toISOString(); // 获取结束时间,默认为当前时间

// 构建 Umami API 请求 URL
const apiUrl = `${UMAMI_API_URL}/websites/${UMAMI_WEBSITE_ID}/stats?startAt=${new Date(startAt).getTime()}&endAt=${new Date(endAt).getTime()}&stats`;

try {
// 发送请求到 Umami API
const response = await fetch(apiUrl, {
headers: {
'Authorization': `Bearer ${UMAMI_API_TOKEN}`,
'Content-Type': 'application/json',
},
});

if (!response.ok) {
console.error(`Umami API error: ${response.status} - ${response.statusText}`);
return new Response(JSON.stringify({ error: `Umami API error: ${response.status}` }), {
status: response.status,
headers: { 'Content-Type': 'application/json' },
});
}

// 解析 Umami API 响应
const data = await response.json();

// 提取所需的数据(例如,页面浏览量)
const pageviews = data.pageviews.value;
const visits = data.visits.value;

// 构建响应数据
const responseData = {
pageviews: pageviews,
visits: visits,
timestamp: new Date().toISOString(),
};

// 返回响应
return new Response(JSON.stringify(responseData), {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*', // 允许跨域请求,根据需要修改
},
});
} catch (error) {
console.error('Error fetching or processing data:', error);
return new Response(JSON.stringify({ error: error.message }), {
status: 500,
headers: { 'Content-Type': 'application/json' },
});
}
}

部署完之后,访问 Cloudflare Worker 的地址,应该可以看到类似的结果:

1
{"pageviews":xxx,"visits":xxx,"timestamp":"xxxx-xx-xxxxx:xx:xx.xxxZ"}

本站使用的 js 脚本:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.addEventListener("DOMContentLoaded", function() {
const startAt = new Date('2025-07-16T00:12:55.346Z').getTime(); // 改为你的开始时间
fetch(`Cloudflare Worker 地址`, {})
.then(response => response.json())
.then(data => {
const viewsElement = document.getElementById("pageviews-count");
viewsElement.textContent = `${data.pageviews}`;
const visitsElement = document.getElementById("visits-count");
visitsElement.textContent = `${data.visits}`;
const endAt = new Date(data.timestamp).getTime();
const timeDiff = endAt - startAt;
const daysRunning = Math.floor(timeDiff / (1000 * 3600 * 24));
const daysElement = document.getElementById("days-count");
daysElement.textContent = `${daysRunning}`;
});
});

之后只要在网站的 head 中插入下面的代码就行了:

1
<script defer src="js脚本地址"></script>

在页面底部显示

footer 代码:

1
本站已运行: <span id="days-count">...</span> 天, 总浏览量: <span id="pageviews-count">...</span>, 总访问数: <span id="visits-count">...</span>

Rickyhub 官方站,所有内容仅供学习,不得用于非法用途。
欢迎添加友链/合作,请联系邮箱: ricky@rickyhub.org
本站已运行: 天, 总浏览量: , 总访问数: