0%

Hexo下FireBase访问统计

发表于 更新于 阅读次数： Valine：

过程

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

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