引言
如果你用过WordPress,Halo等动态博客框架,你大概会在用户视角访问博文的时候看到浏览量这个信息。
这个原理很简单,因为动态博客依赖于一个VPS,只需要让用户每次访问的时候给浏览量+1即可。
那么如果我们是静态博客呢?
我们可以依赖一些第三方服务,比如Umami Cloud。在你的静态博客的head注入一个js,这样你就可以看到你的站点分析了,类似下图

现在我们确实可以看到每个文章(即/posts/xxx)的访问量了,但是我们要如何展示给用户呢?
逆向Umami的只读页面!(新版v3)
感谢nightNya提供的方案,你是天才!
首先我们启用分享URL

注意这里的 7PoDRgCzHFTs2vWB ,每个站点都不一样
接着我们请求 https://cloud.umami.is/analytics/us/api/share/7PoDRgCzHFTs2vWB,得到
注意,这里的 us 为你创建的账号区域,美国为us,欧盟为eu
{ "websiteId": "a66a5fd4-98b0-4108-8606-cb7094f380ac", "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ3ZWJzaXRlSWQiOiJhNjZhNWZkNC05OGIwLTQxMDgtODYwNi1jYjcwOTRmMzgwYWMiLCJpYXQiOjE3NTA4MDIwMzB9.X5GQT5kslh6r25sFlap4Asz1NDA7mN3kcZW8wqbrnBc"}再接着我们请求,携带请求头 x-umami-share-token 值为上一步获得的Token
https://cloud.umami.is/analytics/us/api/websites/a66a5fd4-98b0-4108-8606-cb7094f380ac/stats?startAt=0&endAt=1750805999999&unit=hour&timezone=Asia/Hong_Kong&path=eq./posts/cf-fastip/&compare=false
这里解释几个关键Params,其他的照搬
-
startAt:统计开始时间。Unix时间戳,我们填写为0让Umami从1970年开始统计
-
endAt:统计结束时间。Unix时间戳,我们可以使用
Date.now(),即当前时间,和startAt参数联动即可实现统计总浏览量 -
path:要查询的路径,填写为你的文章页去除了Host的路径,如
/posts/hello。注意!Umami会将/posts/hello和/posts/hello/视为两个不同的路径,请注意你的博客框架是否使用/。在v3版本中,需要使用eq.前缀来进行精确匹配,例如path=eq./posts/hello/
你会得到
{ "pageviews": 1655, "visitors": 343, "visits": 411, "bounces": 183, "totaltime": 30592, "comparison": { "pageviews": 0, "visitors": 0, "visits": 0, "bounces": 0, "totaltime": 0 }}pageviews 即浏览量。 visitors 即访问人数。
Tips:浏览量记录为任意用户只要访问了则计数一次。而访问数记录不会记录单IP多次重复访问和同一时间段的多次请求不同页面
Enjoy it!
最终效果:

发现错误或想要改进这篇文章?
在 GitHub 上编辑此页