[TOC]
本文基于 leancloud 的数据实现了一个阅读排行页面。
新建页面
hexo n page top 新建页面，会生成 top 目录，编辑其中自动生成的 index.md 文件，将其中的代码替换如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <div id="top"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("leancloud_appid", "leancloud_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(1000);
query.find().then(function (todo) {
for (var i=0;i<1000;i++){
var result=todo[i].attributes;
time=result.time;
title=result.title;
url=result.url;
var content="<p>"+"<font color='#1C1C1C'>"+"【文章热度:"+time+"℃】"+"</font>"+"<a href='"+"https://tding.top"+url+"'>"+title+"</a>"+"</p>";
document.getElementById("top").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>
|
并将其中的 leancloud_appid、leancloud_appkey 和页面链接替换为你的。
由于一些因素，我后面迁移到了 Leancloud 国际版，然后阅读排行榜就无法正常显示了，报出如下错误：
1
| Failed to load resource: the server responded with a status of 403 () us.leancloud.cn/1.1/classes/Counter?redirectByAPI=cn:1
|
最后发现，美国节点需要调用 AV.useAVCloudUS()，因此以上代码需要修改为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <div id="top"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("leancloud_appid", "leancloud_appkey");AV.useAVCloudUS();</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(1000);
query.find().then(function (todo) {
for (var i=0;i<1000;i++){
var result=todo[i].attributes;
time=result.time;
title=result.title;
url=result.url;
var content="<p>"+"<font color='#FAF0BB'>"+"【文章热度:"+time+"℃】"+"</font>"+"<a href='"+"https://weilining.github.io"+url+"'>"+title+"</a>"+"</p>";
document.getElementById("top").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>
|
配置菜单显示
编辑主题配置文件 themes\next_config.yml，添加 top：
1
2
| menu:
top: /top/ || fa fa-signal
|
新增菜单栏的显示名称 blog/source/_data/languages.yml，同样新增 top 对应的中文：
1
2
3
| zh-CN:
menu:
top: 阅读排行
|
参考
Hexo-NexT 新增阅读排行页面