Hexo下FireBase访问统计

过程

各路大牛已经写了不少教程,也就不在这里多废话了。
可以参考以下文章:

1.http://www.pangjian.info/2015/02/27/realtime-count-firebase/
2.http://ibruce.info/2013/12/22/count-views-of-hexo/

在这里,对可能比较难操作的几点进行说明。

  • 给出七牛的js

<script src="//buru.u.qiniudn.com/firebase-2.0.5.js"></script>

  • 在页面footer增加记录条目
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<footer id="footer">
<% if (theme.sidebar === 'bottom'){ %>
<%- partial('_partial/sidebar') %>
<% } %>
<div class="outer">
<div id="footer-info" class="inner">
&copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
.
<font id="sum_counter"></font>
<font id="detail_counter"></font>
</div>
</div>
</footer>

注意添加font id 行

  • js代码写法

    js代码可以写在footer中。
    给出一个footer.ejs示例。
    点击下载

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div class="copyright">
<% if (config.author){ %>
&copy; <%= new Date().getFullYear() %> <a href="<%- config.root %>"><%= config.author %></a>
<% } else { %>
&copy; <%= new Date().getFullYear() %> <a href="<%- config.root %>"><%= config.title %></a>
<% } %>
</div>
<div class="theme-copyright">

<a href="http://example.net/" target="_blank">论坛</a>
|
<font id="sum_counter"></font>
<font id="detail_counter"></font>
</div>
<div class="clearfix"></div>
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
</head>
<body>
<script>
var myDataRef = new Firebase('https://yourapp.firebaseio.com/')
// 明细由当前页面的url表示,将反斜线替换成下划线,并将中文decode出来
var current_url = decodeURI(window.location.pathname.replace(new RegExp('\\/|\\.', 'g'),"_"));
// 获取总数,并将总访问量展示在页面上
myDataRef.child("sum").on("value", function(data) {
var current_counter = data.val();
if( $("#sum_counter").length > 0 && current_counter >1 ){
$("#sum_counter").html(
" | 总访问量 <font style='color:white'>"+ current_counter +"</font> 次"
);
};
});
// 获取明细,并将明细也展示在页面上
myDataRef.child("detail/"+current_url).on("value", function(data){
var detail_counter = data.val();
if($("#detail_counter").length > 0 && detail_counter > 1){
$("#detail_counter").html(
" 本页访问量 <font style='color:white'>"+ detail_counter +"</font> 次"
);
}
});
// 总数+1
myDataRef.child("sum").transaction(function (current_counter) {
return (current_counter || 0) + 1;
});
// 明细+1
myDataRef.child("detail/"+current_url).transaction(function (current_counter) {
return (current_counter || 0) + 1;
});
</script>
</body>
</html>

cnzz统计

@简书

做法是先注册账号,然后添加网址就设置好了。CNZZ作为例子说明一下。

1.在CNZZ网站注册一个账号,添加网站后,得到各个形式的代码,任选其一;

2.在Hexo\themes\jacman\layout_partial文件夹下新建一个cnzz_tongji.ejs文件,把你的代码粘贴在第一行和最后一行之间(中间是我的,替换成你自己的);

1
2
3
4
5
6
<% if (theme.cnzz){ %>
<script type="text/javascript">
var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cspan id='cnzz_stat_icon_1256211004'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1256211004%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
</script>
<% } %>

3.在footer.ejs文件中适当的位置添加你的代码

1
2
3
4
<script type="text/javascript">
var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " [http://");](http://");)
document.write(unescape("%3Cspan id='cnzz_stat_icon_1256211004'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1256211004%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
</script>

4.在主题配置文件中加入下面代码启用CNZZ统计,注意不要添加站点id,填了的话就不显示图标了。

## Analytics
cnzz_tongji: true

xmsec