博客网站统计功能实现完整指南#

1
<div class="flex items-center gap-4 mt-3">
2
    <div class="flex items-center">
3
        <div class="meta-icon">
4
            <Icon name="material-symbols:bar-chart-4-bars-rounded" class="text-xl"></Icon>
5
        </div>
6
        <div id={`post-views-${entry.slug}`} class="transition text-50 text-sm font-medium whitespace-nowrap">--</div>
7
    </div>
8
    <div class="flex items-center">
9
        <div class="meta-icon">
10
            <Icon name="material-symbols:group-rounded" class="text-xl"></Icon>
11
        </div>
12
        <div id={`post-visitors-${entry.slug}`} class="transition text-50 text-sm font-medium whitespace-nowrap">--</div>
13
    </div>
14
</div>

1
export default async function onRequest(context) {
2
    const { request, env } = context;
3
    const url = new URL(request.url);
4
    const targetUrl = url.searchParams.get('url');
5

6
    if (!targetUrl) {
7
        return new Response(JSON.stringify({ error: 'URL parameter is required' }), {
8
            status: 400,
9
            headers: { 'Content-Type': 'application/json' }
10
        });
11
    }
12

13
    try {
14
        // 构建Umami API请求
15
        const umamiUrl = `${env.UMAMI_API_URL}/api/websites/${env.UMAMI_WEBSITE_ID}/stats`;
16
        const response = await fetch(umamiUrl, {
17
            method: 'GET',
18
            headers: {
19
                'Authorization': `Bearer ${env.UMAMI_API_TOKEN}`,
20
                'Content-Type': 'application/json'
21
            },
22
            params: {
23
                url: targetUrl,
24
                startAt: 0,
25
                endAt: Date.now(),
26
                unit: 'day'
27
            }
28
        });
29

30
        if (!response.ok) {
31
            throw new Error(`Umami API error: ${response.status}`);
32
        }
33

34
        const data = await response.json();
35

36
        return new Response(JSON.stringify({
37
            pageviews: data.pageviews || 0,
38
            visitors: data.visitors || 0
39
        }), {
40
            status: 200,
41
            headers: {
42
                'Content-Type': 'application/json',
43
                'Cache-Control': 'max-age=300' // 缓存5分钟
44
            }
45
        });
46

47
    } catch (error) {
48
        console.error('Stats API error:', error);
49

50
        return new Response(JSON.stringify({
51
            error: 'Failed to fetch statistics',
52
            pageviews: 0,
53
            visitors: 0
54
        }), {
55
            status: 500,
56
            headers: { 'Content-Type': 'application/json' }
57
        });
58
    }
59
}

1
UMAMI_WEBSITE_ID=your-website-id
2
UMAMI_API_TOKEN=your-api-token
3
UMAMI_API_URL=https://your-umami-instance.com

1
---
2
interface Props {
3
    // ... 其他属性
4
    hideStats?: boolean;
5
}
6
const { hideStats = false } = Astro.props;
7
---
8

9
{!hideStats && (
10
    <div class="flex items-center gap-4">
11
        <div class="flex items-center">
12
            <div class="meta-icon">
13
                <Icon name="material-symbols:bar-chart-4-bars-rounded" class="text-xl"></Icon>
14
            </div>
15
            <div id="post-views" class="transition text-50 text-sm font-medium whitespace-nowrap">--</div>
16
        </div>
17
        <div class="flex items-center">
18
            <div class="meta-icon">
19
                <Icon name="material-symbols:group-rounded" class="text-xl"></Icon>
20
            </div>
21
            <div id="post-visitors" class="transition text-50 text-sm font-medium whitespace-nowrap">--</div>
22
        </div>
23
    </div>
24
)}
25

26
<script is:inline define:vars={{ shouldShowStats: !hideStats }}>
27
if (shouldShowStats) {
28
    (async () => {
29
        const viewsEl = document.getElementById('post-views');
30
        const visitorsEl = document.getElementById('post-visitors');
31

32
        if (viewsEl) viewsEl.textContent = '加载中...';
33
        if (visitorsEl) visitorsEl.textContent = '加载中...';
34

35
        try {
36
            // 解码URL以确保与PostCard格式一致
37
            const currentPath = decodeURIComponent(window.location.pathname);
38
            const endpoint = `/api/stats?url=${encodeURIComponent(currentPath)}`;
39

40
            const response = await fetch(endpoint, {
41
                method: 'GET',
42
                headers: {
43
                    'Accept': 'application/json',
44
                    'Content-Type': 'application/json'
45
                }
46
            });
47

48
            if (!response.ok) {
49
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
50
            }
51

52
            const data = await response.json();
53

54
            if (data.error) {
55
                throw new Error(data.error);
56
            }
57

58
            const pv = Number(data?.pageviews || 0);
59
            const uv = Number(data?.visitors || 0);
60

61
            if (viewsEl) {
62
                viewsEl.textContent = pv > 0 ? `${pv} 次浏览` : '暂无数据';
63
                viewsEl.classList.remove('text-50');
64
                viewsEl.classList.add(pv > 0 ? 'text-90' : 'text-60');
65
            }
66

67
            if (visitorsEl) {
68
                visitorsEl.textContent = uv > 0 ? `${uv} 位访客` : '暂无数据';
69
                visitorsEl.classList.remove('text-50');
70
                visitorsEl.classList.add(uv > 0 ? 'text-90' : 'text-60');
71
            }
72

73
        } catch (error) {
74
            console.error('Failed to fetch stats:', error);
75

76
            if (viewsEl) {
77
                viewsEl.textContent = '--';
78
                viewsEl.classList.add('text-60');
79
            }
80
            if (visitorsEl) {
81
                visitorsEl.textContent = '--';
82
                visitorsEl.classList.add('text-60');
83
            }
84
        }
85
    })();
86
}
87
</script>