hexo next主题下添加基于leancloud的文章阅读次数排名页面

想加个文章阅读次数排名的页面


在文件夹终端输入下面代码,新生成一个名为rank的页面

1
sudo hexo new page rank

然后在/source/rank/index.md中,改成下面代码:

这是基于leancloud的阅读量统计,所以填一下自己的leancloud_appid和appkey

然后后面的content那个变量,你想显示啥自己改就行,超链接改一下

我显示了15条,然后顺便把这个页面的评论功能关了

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
---
title: rank
comments: false
---

<div id="rank"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("填你的appid", "填你的appkey");</script>
<script type="text/javascript">
var time=0
var title=""
var url=""
var query = new AV.Query('Counter');
query.notEqualTo('id',0);
query.descending('time');
query.limit(15);
query.find().then(function (todo) {
for (var i=0;i<15;i++){
var result=todo[i].attributes;
time=result.time;
title=result.title;
url=result.url;
var content="<p>"+"<font color=#a7a7e5>"+"🌸 Time number: "+"</font>"+"<font color=#f1a8ce>"+time+"次 "+"</font>"+"<a href='"+"https://leflacon.github.io"+url+"'>"+title+"</a>"+"</p>";
document.getElementById("rank").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>

然后在主题配置文件里/themes/next/_config.yml,找到menu,在菜单栏添加上这个页面即可

图标可以在这个图标库里获取http://www.fontawesome.com.cn/faicons/

预览效果如图:

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2020 LeFlacon

奶茶一杯 快乐起飞

支付宝
微信