新增一个阅读排行页面，可以显示本站文章的阅读排行榜，为每篇博客新增阅读次数标志，基于 leancloud 的数据实现。

一、添加“阅读次数”

1、注册LeanClound

LeanClound官网
点击免费使用注册一个个人账户

进入个人后台管理页面

左侧导航栏，设置-“应用key”中获取APP ID，APP Key，记下来。

2、创建应用随便命名

创建完应用后，进入左侧导航栏

“存储”-“创建Class”

本来是随意命名的，但为了配合next主题使用，这里的Class名字必须命名为Counter。

3、添加安全域名

左侧导航栏，“设置”-安全中心-“Web安全域名”

将自己的网址添加进入

我的是“https://hanhanhanxu.github.io/”

保存

4、修改一下主题配置文件

修改配置文件next/_config.yml

leancloud_visitors:
  enable: true
  app_id: #你的app_id
  app_key: #你的的app_key



busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 访问人数
  site_uv_footer: 人次 
  # # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 总访问量
  site_pv_footer: 次 
  # custom pv span for one page only
  page_pv: false
  page_pv_header: <i class="fa fa-file-o"></i> 阅读
  page_pv_footer: 次

上面的人次次我都没有添加，直接空着不写，感觉只有数字就已经很美观了

二、添加“阅读排行”

5、新建页面

Git窗口:

hexo n page top

新建页面，会生成 top 目录(Hexo/source/top)，编辑其中自动生成的 index.md 文件，将里面的东西删除，然后将下面的代码粘贴进去：

<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="<a href='"+"https://hanhanhanxu.github.io"+url+"'>"+title+"</a>"+"<br>"+"<font color='#fff'>"+"阅读次数："+time+"</font>"+"<br><br>";
      var content="<p>"+"<font color='#1C1C1C'>"+"【文章热度:"+time+"℃】"+"</font>"+"<a href='"+"https://hanhanhanxu.github.io"+url+"'>"+title+"</a>"+"</p>";
      document.getElementById("top").innerHTML+=content
    }
  }, function (error) {
    console.log("error");
  });
</script>

并将其中的 leancloud_appid、leancloud_appkey 和页面链接(https://hanhanhanxu.github.io)替换为你的。

6、配置菜单显示

编辑主题配置文件 next_config.yml，添加 top：

menu:
  home: / || home
  top: /top/ || signal

新增左侧导航栏的显示名称 next/languages/zh-Hans.yml，同样新增 top 对应的中文：

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404
  top: 阅读排行

三、完成！

hexo d -g重新部署即可。

注：objetcId主键是由日期和博文标题组合成的，如果标题变化，阅读数会重新计算。