警告
本文最后更新于 2022-10-28,文中内容可能已过时。
hugo静态博客搭建后,我用的是FixIt主题,网站的访问统计采用不蒜子的统计方案,可以在底部开启访客数量和页面访问量,使用很方便。
但是存在三个问题:
对于第一个问题,我直接换用评论系统valine的访问量统计。 对于第二三个问题,我在武大路飞的博客里找到了解决方案,使用statcounter做访问量统计,经过一番讨教和研究,实现了这个方案,解决了这两个问题。
StatCounter是美国的一家著名网站流量统计服务商,其提供的免费版网站流量统计和收费版功能一样强大,只是限制每月统计页面访问量不超过100,000、日志尺寸不超过500,因此它采用免费网站流量统计服务仅适合访问量不大的网站,对于个人站点完全足够。你可StatCounter还可以当做计数器使用,你也可以隐藏统计图标,可以查看各种类型的访问报告,包括年月日访问量,访客ip国别等等。并且对于我基于github pages页面多平台部署的站点访问量是累计的,这点非常符合我的需求。
statcounter官网:https://statcounter.com/
配置过程是比较简单的,本质是将statcounter提供的代码添加到你网站的所有页面中即可,但是有些坑要注意。
我用hugo博客FixIt主题,验证代码直接添加在config.toml
里的页面底部信息位置,参看以下自定义内容。这里注意,toml配置里,html验证代码段要用"““圈起来,你可以调整要显示文字信息。
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 | # 页面底部信息配置 [params.footer] enable = true # 自定义内容(支持 HTML 格式) custom = """ <!-- Default Statcounter code for blog https://zhjin.eu.org/ --> <a href="https://statcounter.com/p12800592/?guest=1" target="_blank">全平台总访问统计</a> <script type="text/javascript"> var sc_project=xxx; var sc_invisible=0; var sc_security="xxx"; var scJsHost = "https://"; document.write("<sc"+"ript type='text/javascript' src='" + scJsHost+ "statcounter.com/counter/counter.js'></"+"script>"); </script> <noscript><div class="statcounter"><a title="web stats" href="https://statcounter.com/" target="_blank"><img referrerPolicy="no-referrer-when-downgrade"></a></div></noscript> <!-- End of Statcounter Code --> """ |
---|
验证代码填写并回到statcounter验证生效后,回到你个人网站,即可看到效果。
我这个博客是通过上传github,触发github action自动部署到github pages,其余cloudflare,render,vercel,netlify都是从github pages同步过去,因此站点都是同一份页面,托管于不同平台,statcounter的统计是叠加的。
statcounter管理端还有许多功能,页面访问统计显示你可以设置显示访客数或是访问量,查看各类统计报告等。
https://whuwangyong.github.io/2022-09-29-use-statcounter-to-get-access-statistics/