作者Firedance (迎火飞舞)
看板Blog
标题Re: [Blogger] 单篇文章计数
时间Mon Apr 2 22:50:23 2018
※ 引述《Firedance (迎火飞舞)》之铭言：
: http://www.esobondhu.com/2015/08/blogger-post-views-count-widget.html
: 请问有人看过这个网志的吗？虽然完全看不懂文章，但因为有影片，因此自己也
: 有实作一下，但都失败？不知道是否有人试过且成功的？
因为Firebase有改版关系，重新试过後竟然可以了..XD
不过计数资料当然不可能和後台的一样，而且用这方法似乎手机是无法同步？
而且若是预览的话也会加进去..@@
不过还是记录一下，或许有人也需要罗！
图文参考：
http://bcsyddonxu.blogspot.tw/2018/04/blogger.html
步骤如下：
首先要先进去Firebase(Google帐号)
https://firebase.google.com/
进入後「新增专案」
建立好後选「Database」，按开始使用
选Realtime Database，开始使用
以测试模式启动
之後在右上的Project Overview选专案设定
复制专案ID，然後进Blogger後台
在後台里编辑HTML
进编辑後要先注意一下
若没安装jquery的记得要先加入下面语法
(Jquery Library v1.2.3或更高版本，我是用2.1.3)
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
在想要显示单篇文章计数器的地方输入下面语法
<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/>
Views
我自己没加入<i class='fa fa-eye'/>，这是眼睛的icon
然後再编辑语法下面，或按ctrl + f搜寻</body>，再</body>上面输入底下语法
<script src='
https://cdn.firebase.com/v0/firebase.js'
type='text/javascript'/>
<script>
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('
#postviews');
var blogStats = new
Firebase("
https://YOUR-APP-NAME.firebaseio.com/pages/id/" +
$(e).attr('name'));
blogStats.once('value', function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr('name');
isnew = true;
}
elem.text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>
然後要将「YOUR-APP-NAME」改成自己的专案ID，就完成了
--
︵︶︵︶︵ 生活纪录网 ζ
ξ
如果说从相机观景窗看出去的世界是不一样的 -●
那麽拍张照吧 让生活多点微笑 少点忧愁 ν)
＿ˍ▁▂▃▄▄▄▃▂＿ˍ▁＿ˍ▁▂▃▄▄▄▃▂＿ˍ▁ √■
对，日子就是要过的轻松自在．http://bcsyddonxu.blogspot.tw/
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 111.251.163.211
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Blog/M.1522680630.A.0AA.html
※ 编辑: Firedance (223.140.89.22), 04/05/2018 23:01:52