需求
在github上搭建的博客系统,比如想知道自己网站的PV、UV即用户访问量、页面访问量
PV: 页面访问量,单个用户连续访问N个页面,记录为N次。 UV: 用户访问量,单个用户IP连续访问N个页面,记录为1次。
分析
可以使用不蒜子计数器,轻量级的网页计算方式。目前存在的问题是,如果网站已经运行一段时间,想初始化访问次数,目前是只能先注册登录,自行修改,但是到目前,注册登录功能一直还没有上线,只能联系Bruce,手工升级==,但是也可以通过js自己手动解决。
代码使用
首页在页面中引入不蒜子计数器的js:
代码语言:javascript复制<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
然后在页面html上加上标签即可,可以根据自己的需求加上:
代码语言:javascript复制<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代码之后:
代码语言:javascript复制<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标签先隐藏起来,直到累加数据之后在进行展示。
代码语言:javascript复制<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中进行配置
代码语言:javascript复制#busuanzi
busuanzi: true
busuanzi_initial_value: 100000
在模板中footer.swig中:
代码语言:javascript复制{% 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 %}
这样就可以实现配置化地在自己博客中增加访问量统计了。