为 Fuwari 添加访问统计卡片

NOTE
本文已更新 Umami v3

开始#

搭建好博客网站之后，我们通常都有查看访问数据的需求。作为静态博客，在不自建服务器的情况下通常都是使用类似Umami的外部网站分析工具（Umami确实好用），但是当我们希望向访客展示自己的访问数据时，就只能在网站上挂一个Umami分享的外链，非常的不优雅。

统计信息小卡片于是我将Umami统计信息做成了小组件放在了页面左侧，效果还是不错的。那么，教程开始。

教程#

准备#

一个已部署好的fuwari博客
启用Umami统计的站点（如果你不知道什么是umami，请先自行搜索教程后继续阅读）

获取数据#

umami页面为了获取到图中的这些数据，我们需要先首先我们启用Umami统计的分享URL

你应该会得到一个https://cloud.umami.is/analytics/us/share/EkS4mYbIXLu9vshR这个样子的URL，以我的这个为例，我们需要的是最后这一串EkS4mYbIXLu9vshR

接着我们去浏览器访问https://cloud.umami.is/analytics/us/api/share/EkS4mYbIXLu9vshR（注意这里的EkS4mYbIXLu9vshR要替换为上一步中你自己的），就会得到以下数据：

1
{
2
  "websiteId": "42d4c606-856f-4026-906c-65bbcb4c5ac1",
3
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ3ZWJzaXRlSWQiOiI0MmQ0YzYwNi04NTZmLTQwMjYtOTA2Yy02NWJiY2I0YzVhYzEiLCJpYXQiOjE3NjAzNjczOTJ9.JWtW668hYoeiKTZSkxZ8suW7RZnmzn0Pa0CHN2xpJYU"
4
}

记下来，稍后有用。

添加组件#

创建组件#

在 src/components/widget/ 目录下创建 UmamiStats.astro 文件，代码如下：

1
---
2
import WidgetLayout from "./WidgetLayout.astro";
3

4
interface Props {
5
  class?: string;
6
  style?: string;
7
}
8
const { class: className, style } = Astro.props;
9
---
10

11
<WidgetLayout name="统计" id="umami-stats" class:list={[className]} {style}>
12
    <div class="text-center py-2">
13
        <div class="text-3xl font-bold text-neutral-900 dark:text-neutral-100" id="total-pageviews">-</div>
14
        <div class="text-sm text-neutral-500 dark:text-neutral-400">总浏览量</div>
15
    </div>
16
    <div class="grid grid-cols-2 divide-x divide-neutral-200 dark:divide-neutral-700 text-center pt-2">
17
        <div class="px-2">
18
            <div class="text-xl font-bold text-neutral-900 dark:text-neutral-100" id="total-visits">-</div>
19
            <div class="text-sm text-neutral-500 dark:text-neutral-400">访问数</div>
20
        </div>
21
        <div class="px-2">
22
            <div class="text-xl font-bold text-neutral-900 dark:text-neutral-100" id="total-visitors">-</div>
23
            <div class="text-sm text-neutral-500 dark:text-neutral-400">游客数</div>
24
        </div>
25
    </div>
26
</WidgetLayout>
27

28
<script>
29
const UMAMI_CONFIG = {
30
    baseUrl: 'https://cloud.umami.is/analytics/us/api',
31
    websiteId: '上一步获得的websiteId（也就是短的那个）',
32
    shareToken: '上一步获得的token（也就是长的那个）'
33
};
34

35
function formatNumber(num: number): string {
36
    if (num >= 1000000) {
37
        return (num / 1000000).toFixed(1) + 'M';
38
    } else if (num >= 1000) {
39
        return (num / 1000).toFixed(1) + 'K';
40
    }
41
    return num.toString();
42
}
43

44
async function fetchUmamiStats() {
45
    try {
46
        const endAt = Date.now();
47
        const startAt = 0;
48

49
        const url = `${UMAMI_CONFIG.baseUrl}/websites/${UMAMI_CONFIG.websiteId}/stats?startAt=${startAt}&endAt=${endAt}&unit=hour&timezone=Asia%2FShanghai`;
50

51
        const response = await fetch(url, {
52
            method: 'GET',
53
            headers: {
54
                'accept': 'application/json',
55
                'x-umami-share-token': UMAMI_CONFIG.shareToken
56
            }
57
        });
58

59
        if (!response.ok) {
60
            throw new Error(`HTTP error! status: ${response.status}`);
61
        }
62

63
        const data = await response.json();
64
        const pageviewsElement = document.getElementById('total-pageviews');
65
        const visitsElement = document.getElementById('total-visits');
66
        const visitorsElement = document.getElementById('total-visitors');
67

68
        if (pageviewsElement) {
69
            pageviewsElement.textContent = formatNumber(data.pageviews || 0);
70
        }
71

72
        if (visitsElement) {
73
            visitsElement.textContent = formatNumber(data.visits || 0);
74
        }
75

76
        if (visitorsElement) {
77
            visitorsElement.textContent = formatNumber(data.visitors || 0);
78
        }
79

80
    } catch (error) {
81
        console.error('获取Umami统计数据失败:', error);
82
        const elements = ['total-pageviews', 'total-visits', 'total-visitors'];
83
        elements.forEach(id => {
84
            const element = document.getElementById(id);
85
            if (element) {
86
                element.textContent = '获取失败';
87
                element.classList.add('text-red-500');
88
            }
89
        });
90
    }
91
}
92

93
document.addEventListener('DOMContentLoaded', fetchUmamiStats);
94

95
if (window.swup) {
96
    window.swup.hooks.on('page:view', fetchUmamiStats);
97
}
98
</script>

配置参数#

在上面的代码中，记得要替换以下配置：

1
const UMAMI_CONFIG = {
2
    baseUrl: 'https://cloud.umami.is/analytics/us/api',
3
    websiteId: '上一步获得的websiteId（也就是短的那个）',
4
    shareToken: '上一步获得的token（也就是长的那个）'
5
};

添加到侧边栏组件#

在 src/components/widget/SideBar.astro 中导入此组件：

1
---
2
import { Image } from "astro:assets";
3
import type { MarkdownHeading } from "astro";
4
import { Icon } from "astro-icon/components";
5
import Categories from "./Categories.astro";
6
import Profile from "./Profile.astro";
7
import Sponsors from "./Sponsors.astro";
8
import UmamiStats from "./UmamiStats.astro";
9
import VisitorIP from "./VisitorIP.astro";
10

11
interface Props {
12
  class?: string;
13
  headings?: MarkdownHeading[];
14
}
15

16
const className = Astro.props.class;
17
---
18
<div id="sidebar" class:list={[className, "w-full"]}>
19
    <div class="flex flex-col w-full gap-4 mb-4">
20
        <Profile></Profile>
21
    </div>
22
    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
23
        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
24
        <UmamiStats class="onload-animation" style="animation-delay: 200ms"></UmamiStats>
25
        <VisitorIP class="onload-animation" style="animation-delay: 225ms"></VisitorIP>
26
        <Sponsors class="onload-animation" style="animation-delay: 250ms"></Sponsors>
27
    </div>
28
</div>

自定义#

如果你按照上述的步骤操作，那么你应该就能在页面左侧下方看到你的博客浏览量统计了，下面是自定义的教程：

修改统计周期#

默认为 所有时间 ，如果你想要调整浏览量统计的时间范围，你需要修改UmamiStats.astro 文件的 startAt 参数(默认是所有时间)。例如改为最近30天的数据，也就是30天×24小时×60分钟×60秒×1000毫秒=2592000000：

1
try {
2
    const endAt = Date.now();
3
    const startAt = 0;
4
    const startAt = Date.now() - 2592000000;

同理，如果你想改为最近90天的数据，只需要减去90天×24小时×60分钟×60秒×1000毫秒即可。

结尾#

通过以上步骤，你就成功为 Fuwari 添加了基于 Umami 的网站访问统计卡片，同时还支持明/暗模式切换。以后只要有访客查看，统计卡片数据都会自动更新。