为Hexo Next主题添加热度功能(一)

起初我是看到arao’s blog的首页,显示的不是阅读次数而是热度。觉得挺有趣,就尝试进行修改。整个过程过来,也不是很难,只要略微能够看懂Nodejs代码,即可进行调试,毕竟主要工作只是修改字样而已。添加热度功能前,需要先调试好阅读次数统计功能,未调试的请移步:为NexT主题添加文章阅读量统计功能

热度

系列教程

代码修改

注:适用于Next主题版本:5.0.0。其他版本建议通过比对进行修改。

主要修改两个文件即可。

第一处:languages\zh-Hans.yml

post:
visitors: 阅读次数

修改为

post:
visitors: 热度


第二处:layout\_scripts\third-party\lean-analytics.swig
总共变动5行,都是+"°C"字符串操作,如下:

--- a/layout/_scripts/third-party/lean-analytics.swig
+++ b/layout/_scripts/third-party/lean-analytics.swig
@@ -19,7 +19,7 @@
var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

if (results.length === 0) {
- $visitors.find(COUNT_CONTAINER_REF).text(0);
+ $visitors.find(COUNT_CONTAINER_REF).text(0+"°C");
return;
}

@@ -29,14 +29,14 @@
var time = item.get('time');
var element = document.getElementById(url);

- $(element).find(COUNT_CONTAINER_REF).text(time);
+ $(element).find(COUNT_CONTAINER_REF).text(time+"°C");
}
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);
+ countSpan.text(0+"°C");
}
}
})
@@ -61,7 +61,7 @@
counter.save(null, {
success: function(counter) {
var $element = $(document.getElementById(url));
- $element.find('.leancloud-visitors-count').text(counter.get('time'));
+ $element.find('.leancloud-visitors-count').text(counter.get('time')+"°C");
},
error: function(counter, error) {
console.log('Failed to save Visitor num, with error message: ' + error.message);
@@ -81,7 +81,7 @@
newcounter.save(null, {
success: function(newcounter) {
var $element = $(document.getElementById(url));
- $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
+ $element.find('.leancloud-visitors-count').text(newcounter.get('time')+"°C");
},
error: function(newcounter, error) {
console.log('Failed to create');
~

lean-analytics.swig完整代码

若主题版本相同,则直接全部复制粘贴即可。

{% if theme.leancloud_visitors.enable %}

{# custom analytics part create by xiamo #}
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>AV.initialize("{{theme.leancloud_visitors.app_id}}", "{{theme.leancloud_visitors.app_key}}");</script>
<script>
function showTime(Counter) {
var query = new AV.Query(Counter);
var entries = [];
var $visitors = $(".leancloud_visitors");

$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+"°C");
return;
}

for (var i = 0; i < results.length; i++) {
var item = results[i];
var url = item.get('url');
var time = item.get('time');
var element = document.getElementById(url);

$(element).find(COUNT_CONTAINER_REF).text(time+"°C");
}
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+"°C");
}
}
})
.fail(function (object, error) {
console.log("Error: " + error.code + " " + error.message);
});
}

function addCount(Counter) {
var $visitors = $(".leancloud_visitors");
var url = $visitors.attr('id').trim();
var title = $visitors.attr('data-flag-title').trim();
var query = new AV.Query(Counter);

query.equalTo("url", url);
query.find({
success: function(results) {
if (results.length > 0) {
var counter = results[0];
counter.fetchWhenSave(true);
counter.increment("time");
counter.save(null, {
success: function(counter) {
var $element = $(document.getElementById(url));
$element.find('.leancloud-visitors-count').text(counter.get('time')+"°C");
},
error: function(counter, error) {
console.log('Failed to save Visitor num, with error message: ' + error.message);
}
});
} else {
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);
newcounter.set("time", 1);
newcounter.save(null, {
success: function(newcounter) {
var $element = $(document.getElementById(url));
$element.find('.leancloud-visitors-count').text(newcounter.get('time')+"°C");
},
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) {
addCount(Counter);
} else if ($('.post-title-link').length > 1) {
showTime(Counter);
}
});
</script>

{% endif %}

最后

不难看出,其实热度=阅读人数。也就是说,可以到leancloud后台进行次数修改。另提醒:调试的过程中,本地是不会显示人次的,需要发布到远程地址,才可以访问。

热评文章