博客增加阅读排行榜

╰半夏微凉° 2021-09-04 06:54 371阅读 0赞

## 1.前言 ##

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

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

{% block content %}
     {######################}
     {### ABOUT BLOCK ###}
     {######################}
    
    
    <div id="top"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.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(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添加以下代码

![2fba60f01f3d64336ad86533eab3e55b.png][]

{% elif page.type === 'top' %}
     {% include 'top.swig' %}

## 2.配置主题侧边栏 ##

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

## 3.配置侧边栏中文 ##

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

[2fba60f01f3d64336ad86533eab3e55b.png]: /images/20210813/976d9ebcb55b48cfbc7a83d248160b75.png