在个人博客中添加文章点击次数

0. 背景介绍

1. LeanCloud 介绍

AV.Object

AV.File

2. 思路

page.url

page.title

hits

page.id

page.url

page.id

/2017/03/18/i-do-nothing

i-do-nothing.md

hits

hits

hits

3. 配置LeanCloud

3.1 申请

App ID

和

App Key

3.2 安全设置

http://127.0.0.1:4000

3.3 创建Class

Counter

4. 修改代码

修改：     _config.yml
新文件：   _includes/leancloud-analytics.html
修改：     _layouts/default.html
修改：     _layouts/post.html
修改：     _posts/2016-12-18-test2.md  (测试用)
修改：     _sass/_layout.scss
修改：     index.html

4.1 _config.yml

_config.yml

leancloud:
enable: true
app_id: edcgBgescCWpVAgimGW1nbfL-gzGzoHsz
app_key: 2c30PCULFMUSgBVNOwNKpqeD

site.leancloud.enable

site.leancloud.app_id

site.leancloud.app_key

enable

app_id

app_key

4.2 leancloud-analytics.html

leancloud-analytics.html

{% if site.leancloud.enable %}

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>AV.initialize("{{site.leancloud.app_id}}", "{{site.leancloud.app_key}}");</script>
<script>
function showHitCount(Counter) {
/* 这是给一个页面中有多篇文章时所调用的，例如博客主界面或者存档界面。
*/
var query = new AV.Query(Counter);
var entries = [];
var $visitors = $(".leancloud_visitors");

// 获取页面中所有文章的id（page.url）
$visitors.each(function () {
entries.push( $(this).attr("id").trim() );
});

// 批量查询
query.containedIn('url', entries);
query.find()
.done(function (results) {
var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

if (results.length === 0) {
$visitors.find(COUNT_CONTAINER_REF).text(0);
return;
}

for (var i = 0; i < results.length; i++) {
var item = results[i];
var url = item.get('url');
var hits = item.get('hits');// 获取点击次数
var element = document.getElementById(url);

// 显示点击次数
$(element).find(COUNT_CONTAINER_REF).text(hits);
}
for(var i = 0; i < entries.length; i++) {
var url = entries[i];
var element = document.getElementById(url);
var countSpan = $(element).find(COUNT_CONTAINER_REF);
if( countSpan.text() == '') {
countSpan.text(0);
}
}
})
.fail(function (object, error) {
console.log("Error: " + error.code + " " + error.message);
});
}

function addCount(Counter) {
// 页面（博客文章）中的信息：leancloud_visitors
// id为page.url， data-flag-title为page.title
var $visitors = $(".leancloud_visitors");
var url = $visitors.attr('id').trim();
var title = $visitors.attr('data-flag-title').trim();
var query = new AV.Query(Counter);

// 只根据文章的url查询LeanCloud服务器中的数据
query.equalTo("url", url);
query.find({
success: function(results) {
if (results.length > 0) {//说明LeanCloud中已经记录了这篇文章
var counter = results[0];
counter.fetchWhenSave(true);
counter.increment("hits");// 将点击次数加1
counter.save(null, {
success: function(counter) {
var $element = $(document.getElementById(url));
$element.find('.leancloud-visitors-count').text(counter.get('hits'));
},
error: function(counter, error) {
console.log('Failed to save Visitor num, with error message: ' + error.message);
}
});
} else {
// 执行这里，说明LeanCloud中还没有记录此文章
var newcounter = new Counter();
/* Set ACL */
var acl = new AV.ACL();
acl.setPublicReadAccess(true);
acl.setPublicWriteAccess(true);
newcounter.setACL(acl);
/* End Set ACL */
newcounter.set("title", title);// 把文章标题
newcounter.set("url", url); // 文章url
newcounter.set("hits", 1); // 初始点击次数：1次
newcounter.save(null, { // 上传到LeanCloud服务器中
success: function(newcounter) {
var $element = $(document.getElementById(url));
$element.find('.leancloud-visitors-count').text(newcounter.get('hits'));
},
error: function(newcounter, error) {
console.log('Failed to create');
}
});
}
},
error: function(error) {
console.log('Error:' + error.code + " " + error.message);
}
});
}

$(function() {
var Counter = AV.Object.extend("Counter");
if ($('.leancloud_visitors').length == 1) {
// in post.html, so add 1 to hit counts
addCount(Counter);
} else if ($('.post-link').length > 1){
// in index.html, there are many 'leancloud_visitors' and 'post-link', so just show hit counts.
showHitCount(Counter);
}
});
</script>
{% endif %}

4.3 _layouts/default.html

_layouts/default.html

{% include leancloud-analytics.html %}

4.4 _layouts/post.html

{% if site.leancloud.enable %}
<span id="{{ page.url }}" class="leancloud_visitors" data-flag-title="{{ page.title }}">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-text"> Hits:  </span>
<span class="leancloud-visitors-count"></span>
</span>
{% endif %}

page

page.url

blog/2016/12/18/test2

page.title

page.title

page.url

page.id

4.5 index.html

{% if site.leancloud.enable %}
<span id="{{ post.url }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-text"> Hits:  </span>
<span class="leancloud-visitors-count"></span>
</span>
{% endif %}

{% for post in paginator.posts %}

4.6 在css文件中加上样式

.post-meta-divider {
font-size: $small-font-size;
color: $grey-color;
}
.post-meta-item-text {
font-size: $small-font-size;
color: $grey-color;
}
.leancloud-visitors-count{
font-size: $small-font-size;
color: $grey-color;
}

4.7 最终的效果

5. 可能出现的问题

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

6. 参考