用Firebase给Hexo博客文章添加阅读次数统计

介绍

firebase之前也听过，但没怎么注意。今天再找blog统计数时，看到了它的这个统计计数的应用。发现它也是有很多可用之处的。
它的产品见这里

它是提供中文的文档的，面向中国地区。但实测中，还是会部分域名遭屏蔽。
免费版100连接，1G存储，10G/M的流量，完全够自己用。

回到主题，这里只用到了它的实时数据库。
实时显示页面文章的阅读次数。

后面完全可以基于它，写一个评论模块。

下面来说说怎么实现吧。
主要是参考的这篇文章
但他的是2.0.4版本，我用的是4.3.0版本，有一些api不一样。

主要步骤

• 增加代码统计的文件，包含到hexo的页面底部
• 申请firebase账号，创建应用，配置应用

修改blog文件

我使用是的next主题

增加firebase-visit.swig文件

在themes\next\layout\_third-party\analytics目录下创建firebase-visit.swig,firebase-visit.swig为主要的统计的业务处理。
内容为：

<script  type="text/javascript" src="https://www.gstatic.com/firebasejs/4.3.0/firebase.js"></script>
<script type="text/javascript">
   // Initialize Firebase
  var config = {
    apiKey: "<key>",
    authDomain: "<domain>.firebaseapp.com",
    databaseURL: "https://<database>.firebaseio.com",
    projectId: "<projectid>",
  };

firebase.initializeApp(config);

firebase.database().ref().child("sum").transaction(function(curCnt){
    return (curCnt || 0) + 1;
});

firebase.database().ref().child("sum").on("value",function(data){
    var curCnt = data.val();
    if(curCnt > 1){
        if($("#totalCnt").length){
            $("#totalCnt").remove();
        }
        $(".theme-info span.post-count").append("<div class='powered-by'></div> <span id='totalCnt'> 总访问量：" + curCnt + "次");
    }
});

var curUrl = decodeURI(window.location.pathname.replace(/\/|\./g,"_"));
firebase.database().ref().child("page/" + curUrl).on("value",function(data){
    var pageCnt = data.val();
    if(pageCnt > 1){
        $("#detail_cnt").text(pageCnt);
    }
});

firebase.database().ref().child("page/" + curUrl).transaction(function(curCnt){
    return (curCnt || 0) + 1;
});

</script>

代码主要用了transaction来每次累加。用on来取值。
然后把相关的更新到dom中。
要注意，总访问量的dom要根据实际情况的位置进行添加。

修改footer.swig文件

修改/themes/next/layout/_partials/footer.swig文件。在文件底部增加：

{% if theme.firebase %}
    {% include '../_third-party/analytics/firebase-visit.swig' %}
{% endif %}

就是在页面底部，增加访问统计的代码。

修改post.swig

修改themes/next/layout/_macro/post.swig文件。
找到leancloud_visitors位置，在它的同级的位置增加下面代码：

{# firebase #}
 {% if theme.firebase and not is_home() %}
 <span class="post-visit-count">
   <span class="post-meta-divider">|</span>
   <i class="fa fa-eye"></i>&nbsp;
   <span id="detail_cnt"></span>
 </span>
 {% endif %}

注意，有可能访问者无法访问firebase相关站点，所以detail_cnt默认为空。

修改_config.yml

在themes/next/_config.yml中加增一项配置

firebase: true

来控制，是否打开统计

firebase的创建与配置

前提是要有一个google的账号

新建应用

进入https://console.firebase.google.com/?hl=zh-cn
会提示要登录。
登录之后可以在页面中看到，增加项目选项。
增加项目时会要求输入项目名和地区。

配置

如图
点 “将 Firebase 添加到您的网页应用”，将出现有一个js的引用和初始化的操作，就是前面firebase-visit.swig的内容。

再进入实时数据库面板。

安全问题

默认是要用户验证的。
所以需要在规则那里修改读写权限。
当时没注意，调程序花了些时间。
https://firebase.google.com/docs/database/security/quickstart?hl=zh-cn#sample-rules

js的操作

因为firebase的版本问题，参考的那篇文章的操作与现在的不兼容。

要把child前面的换成firebase.database().ref()

下面就是firebase的api的常用示例。
详细的api见这里

设置值

firebase.initializeApp(config);
var database = firebase.database();
database.ref('/sum').set('1');

对内容实时修改

firebase.initializeApp(config);
var starCountRef = firebase.database().ref('/starCount');
starCountRef.on('value', function(snapshot) {
alert(snapshot.val());
});

以事务的方式进加累加

firebase.initializeApp(config);
firebase.database().ref().child("sum").transaction(function(curCnt){
    return (curCnt || 0) + 1;
});

每个页的统计

var curUrl = decodeURI(window.location.pathname.replace(/\/|\./g,"_"));
firebase.database().ref().child("page/" + curUrl).transaction(function(curCnt){
    return (curCnt || 0) + 1;
});

可能会出现的问题

网络问题

Firefox can’t establish a connection to the server at wss://s-usc1c-nss-233.firebaseio.com/.ws?v=5&s=xxx&ns=xxx.
被屏蔽了…

预览问题

有时编辑swig后，保存，预览可以生效，有时不能生效。
如果不能生效，不要直接就怀疑自己代码写错了，可以用heox g生成下，再预览。

js调试问题

调试firebase时，查看console的输出。
有些很奇怪的现象。
直接运行，没错误提示，但执行结果不对。
在拿出alert大法之后，可以弹出alert，弹出之后，才会看到错误提示，某引用未定义。
在这里也浪费一些时间。

还要解决的问题

• 对数据每天备份，高级版才提供的功能
• 对因friebase被屏蔽部分站点的误差做修正

参考

http://zhangjh.me/2016/04/12/hexo-visit-analytics-md/
http://ibruce.info/2013/12/22/count-views-of-hexo/
http://ju.outofmemory.cn/entry/298402