博客增加阅读排行榜

1.前言

新增一个阅读排行页面，可以现在本站文章的阅读排行榜，基于 leancloud 的数据实现。

hexo n page top 新建页面，会生成 top 目录，之后在主题文件夹下有一个layout文件夹增加一个top.swig文件，增加代码如下：

{% block content %}
  {######################}
  {### ABOUT BLOCK ###}
  {######################}


<div id="top"></div>
<script src="//code.bdstatic.com/npm/leancloud-storage@4.12.0/dist/av-min.js"></script>
<script>AV.init({
  appId: "{{theme.leancloud_visitors.app_id}}",
  appKey: "{{theme.leancloud_visitors.app_key}}",
  serverURL: "{{theme.leancloud_visitors.server_url}}"
});</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(15);
  query.find().then(function (todo) {
    for (var i=0;i<15;i++){
      var result=todo[i].attributes;
      time=result.time;
      title=result.title;
      url=result.url;
      // var content="<a href='"+"https://hoxis.github.io"+url+"'>"+title+"</a>"+"<br>"+"<font color='#fff'>"+"阅读次数："+time+"</font>"+"<br><br>";
      var content="<p>"+"<font color='#1C1C1C'>"+"【文章热度:"+time+"℃】"+"</font>"+"<a href='"+"YOUR_URL"+url+"'>"+title+"</a>"+"</p>";
      document.getElementById("top").innerHTML+=content
    }
  }, function (error) {
    console.log("error");
  });
</script>

  {##########################}
  {### END ABOUT BLOCK ###}
  {##########################}
{% endblock %}

将其中的YOUR_APPID和YOUR_APPKEY替换为 learncloud 的 id 和 key

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

之后在这里主题文件夹下的layout文件夹下的page.swig添加以下代码

1
2
3

<!-- 阅读排行榜-->
{% elif page.type === 'top' %}
    {% include 'top.swig' %}

2.配置主题侧边栏

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

3.配置侧边栏中文

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