为你的博客增加访问量统计

2019-09-04 15:35:23 浏览数 (1)

需求

在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 %}

这样就可以实现配置化地在自己博客中增加访问量统计了。

0 人点赞