用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为主要的统计的业务处理。
内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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文件。在文件底部增加:

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

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

修改post.swig

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

1
2
3
4
5
6
7
8
{# 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中加增一项配置

1
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见这里

设置值

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

对内容实时修改

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

以事务的方式进加累加

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

每个页的统计

1
2
3
4
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