社区首页 >专栏 >为你的博客增加访问量统计

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

Tiffany_c4df

发布于 2019-09-04 07:35:23

2.3K00

代码可运行

文章被收录于专栏：前端小课堂前端小课堂

运行总次数：0

代码可运行

需求

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