Hexo NexT LeanCloud

发表于 2020-09-18 更新于 2020-10-05 分类于 Hexo 阅读次数：本文字数： 3.7k 阅读时长 ≈ 3 分钟

默认

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

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

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

1. 注册 LeanCloud

详细注册步骤略

1.1 LeanCloud配置

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

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

记录相关App ID和App Key

1.2配置域名绑定

前提：个人已备案域名

进入LeanCloud设置->域名绑定->API 访问域名->绑定新域名

输入域名后配置CNAME解析

系统会自动检测备案、解析、以及配置SSL证书

2.配置

2.1 主题配置

若同时安装了Valine评论系统会产生冲突，请参考：Hexo Next阅读次数不正常、显示多个阅读次数

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

# 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>
  #1.2中配置的域名
  server_url: <your server url>
  # 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

2.2 站点配置

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

2.2.1 配置安全访问

leancloud_counter_security:
  enable_sync: true
  app_id: <<your app id>>
  app_key: <<your app key>
  server_url: <your server url>
  username: <<your username>>
  password: <<your password>>

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

2.2.2 配置deploy

1 2	deploy: - type: leancloud_counter_security_sync

注意：存在多项 deploy，需要在 type 前加上-

例如：

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.1中配置的一致

注：若出现异常，提示

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

可以运行

1	npm i babel-runtime --save

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

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

点击创建函数

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

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文件，将其中的代码替换如下

---
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_APPID和YOUR_APPKEY替换为 learncloud 的 id 和 key

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

5.2 配置主题侧边栏

打开主题配置文件，搜索menu，添加

1	hot: /hot/ \|\| fa fa-thermometer-half

图标预览：

或 hot: /hot/ || fa fa-signal