本文将介绍如何使用 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";
const url = new URL(request.url); const startAt = url.searchParams.get('startAt') || '2024-01-01T00:00:00Z'; const endAt = url.searchParams.get('endAt') || new Date().toISOString();
const apiUrl = `${UMAMI_API_URL}/websites/${UMAMI_WEBSITE_ID}/stats?startAt=${new Date(startAt).getTime()}&endAt=${new Date(endAt).getTime()}&stats`;
try { 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' }, }); }
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>
|