为你的博客增加访问量统计
需求
在github上搭建的博客系统，比如想知道自己网站的PV、UV即用户访问量、页面访问量
PV: 页面访问量，单个用户连续访问N个页面，记录为N次。 UV: 用户访问量，单个用户IP连续访问N个页面，记录为1次。
分析
可以使用不蒜子计数器，轻量级的网页计算方式。目前存在的问题是，如果网站已经运行一段时间，想初始化访问次数，目前是只能先注册登录，自行修改，但是到目前，注册登录功能一直还没有上线，只能联系Bruce，手工升级==，但是也可以通过js自己手动解决。
代码使用
首页在页面中引入不蒜子计数器的js：
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>然后在页面html上加上标签即可，可以根据自己的需求加上：
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span id="busuanzi_container_page_pv">
文章点击次数:<span id="busuanzi_value_page_pv"></span>
</span>
<span id="busuanzi_container_site_uv">
本站浏览量:<span id="busuanzi_value_site_uv"></span>
</span>现在基本的统计页面PV、UV的需求就完成了，或许你建站很久，还想加上初始值。
加上初始值
如果有加上初始值的需求，那么在js文件中添加如下代码，记得下面这段js应该放在不蒜子的script代码之后：
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(
// 设置初始值
setInitialCount(100000);
);
function setInitialCount(num) {
var busuanziSiteOffset = parseInt(num);
if ($("#busuanzi_container_site_pv").css("display") != "none") {
// 同理id也可以是busuanzi_container_page_pv
// busuanzi_container_site_uv
$("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + busuanziSiteOffset);
}
}
</script>但是因为不蒜子的js代码是异步加载的，所以需要在其数据返回之前，将上述的span标签先隐藏起来，直到累加数据之后在进行展示。
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(
window.timer = setInterval(function () {
if (parseInt($("#busuanzi_value_site_pv").html()) {
clearInterval(window.timer);
}
// 设置初始值
setInitialCount(100000);
}, 500);
);
function setInitialCount(num) {
var busuanziSiteOffset = parseInt(num);
if ($("#busuanzi_container_site_pv").css("display") != "none") {
// 同理id也可以是busuanzi_container_page_pv
// busuanzi_container_site_uv
$("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + busuanziSiteOffset);
}
}
</script>Hexo配置方法
对于 Hexo 来说，在站点或主题配置中的变量，可以在主题模版中引用得到。于是，我们可以这样做。
在_config.yml中进行配置
#busuanzi
busuanzi: true
busuanzi_initial_value: 100000在模板中footer.swig中：
{% if theme.busuanzi %}
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(
window.timer = setInterval(function () {
if (parseInt($("#busuanzi_value_site_pv").html()) {
clearInterval(window.timer);
}
// 设置初始值
setInitialCount({{ theme.busuanzi_initial_value }});
}, 500);
);
function setInitialCount(num) {
var busuanziSiteOffset = parseInt(num);
if ($("#busuanzi_container_site_pv").css("display") != "none") {
// 同理id也可以是busuanzi_container_page_pv
// busuanzi_container_site_uv
$("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + busuanziSiteOffset);
}
}
</script>
{% endif %}这样就可以实现配置化地在自己博客中增加访问量统计了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-07-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录