Hexo Next主题 使用LeanCloud统计文章阅读次数、添加热度排行页面

使用LeanCloud记录hexo文章的阅读量,next主题对LeanCloud进行了适配,只需简单的配置。

本文综合参考了多篇文章以及自己的部署经历。并且修复了安全漏洞。

1. 注册 LeanCloud

详细注册步骤略

进入之后点击存储,创建Class,名称必须为Counter

ACL权限选择无限制,点击创建Class按钮。

记录相关App IDApp Key

2.配置

2.1 主题配置

修改主题配置文件,修改以下字段,每一项都需要修改

1
2
3
4
5
6
7
8
9
10
11
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: <App ID>
app_key: <App Key>
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in lc counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set the `security` to `false`.
security: true
betterPerformance: true

2.2 站点配置

打开站点配置文件,新增以下内容

2.2.1 配置安全访问

1
2
3
4
5
6
leancloud_counter_security:
enable_sync: true
app_id: <<your app id>>
app_key: <<your app key>
username: <<your username>>
password: <<your password>>

前两项的 id 与 key 为网站提供。后两项username和 password 自己定义。

2.2.2 配置deploy

1
2
deploy:
- type: leancloud_counter_security_sync

注意:存在多项 deploy,需要在 type 前加上-

例如:

1
2
3
4
5
6
7
deploy:
- type: git
··············
- type: cos
··············
- type: baidu_url_submitter
- type: leancloud_counter_security_sync

3.安装

打开命令终端,切换到博客根目录。安装hexo-leancloud-counter-security插件

1
npm install hexo-leancloud-counter-security --save

等待安装结束之后,注册一个用户

1
hexo lc-counter r username password

这里的用户名和密码与2.2.2中配置的一致

注:若出现异常,提示

1
Error: Cannot find module 'babel-runtime/regenerator'

可以运行

1
npm i babel-runtime --save

4.部署云引擎以保证访客数量不被随意篡改

依次点击左侧云引擎 -> 部署 -> 在线编辑

点击创建函数

在弹出窗口选择Hook类型,在选择 Hook处选择beforeUpdate,在选择 Class处选择Counter类。粘贴下方代码后,点保存。

1
2
3
4
5
6
7
8
var query = new AV.Query("Counter");
if (request.object.updatedKeys.indexOf('time') !== -1) {
return query.get(request.object.id).then(function (obj) {
if (obj.get("time") + 1 !== request.object.get("time")) {
throw new AV.Cloud.Error('Invalid update!');
}
})
}

然后单击创建按钮右侧的部署 -> 生产环境 -> 部署

待显示部署完成:1 个实例部署成功即可

5.添加热度排行页面

5.1 新建页面

在博客目录下执行hexo n page hot新建一个hot页面,编辑其中的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
25
26
27
28
29
---
title: 文章热度排行
date: 2019-08-14 10:29:51
comments: false
---
<div id="hot"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("YOUR_APPID", "YOUR_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='"+"YOUR_URL"+url+"'>"+title+"</a>"+"</p>";
document.getElementById("hot").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>

将其中的YOUR_APPIDYOUR_APPKEY替换为 learncloud 的 id 和 key

YOUR_URL替换为你的博客地址,包含协议并以/结束,例如:https://blog.qust.cc/

5.2 配置主题侧边栏

打开主题配置文件,搜索menu,添加hot: /hot/ || signal

5.3 配置侧边栏中文

打开hexo/theme/next/languages/zh-Hans.yml,搜索menu,添加hot: 热度排行