Hexo-NexT新增阅读排行页面

本文基于 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_appidleancloud_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
25
<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>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='#1C1C1C'>"+"【文章热度:"+time+"℃】"+"</font>"+"<a href='"+"https://tding.top"+url+"'>"+title+"</a>"+"</p>";
document.getElementById("top").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>

配置菜单显示

编辑主题配置文件 themes\next_config.yml,添加 top:

1
2
3
menu:
home: / || home
top: /top/ || signal

新增菜单栏的显示名称 hexo/theme/next/languages/zh-CN.yml,同样新增 top 对应的中文:

1
2
3
menu:
home: 首页
top: 阅读排行

参考

赞赏一杯咖啡
0%