Hexo NexT文章阅读量排行（热榜）功能

原文 首发 北宸的小站，欢迎访问！！！

前言

想掌握网站文章欢迎度、阅读排行？那么「热榜」功能就不可或缺

在写这篇文章以前，本人也了解过其他博客的做法，无外乎是基于Leancloud实现的。很少有用谷歌Firestore（Firebase）来做的，这篇文章咱就来说说Firestore。

PS：Leancloud现在需要上传手持身份证照片进行实名。。。

主要是本人比较排斥这样搜刮隐私的行为，So经过几次尝(tou)试(ji)无果后，果断放弃。如果你也有遇到这种情况，希望此文能对你有所帮助。

关于Leancloud的相关实现，可以参考这篇文章，精简实用，本文也在此基础上作了参考。

正文

/themes/next/_config.yml文件，已经提前预配了firestore：

image.png

是不是已经给你提示了呢？而且next官方文档也提到过，一共分为两步：
1、注册

image.png

2、配置

image.png

Firebase属于谷歌的，确保你能访问：https://console.firebase.google.com   (tips：github)

步骤

注册

可以直接使用Google 帐号登录，没有的自行进行注册，此步骤略过。。。

登录成功后，点击网页右上角：转到控制台

添加项目

输入项目名称，比如我用的是leafjame2019814, 点击继续，继续，用默认的配置即可，完成后还可以再修改。

image.png

创建项目完成后，点击网页左侧setttings按钮,如图：

image.png

即可查看到自己的项目ID和网络 API 密钥，这就是next主题配置文件中提到的projectId和apiKey

image.png

创建数据库

创建完项目后，接着需要创建存储数据的地方，如下图所示：

image.png

有两种选项，自己用的话，选择以测试模式开始，就可以。

image.png

如果选择以锁定模式开始，则后续自己通过js api的方式写入会提示没有权限。。（可能需要配置权限什么的吧，我自己也没搞懂）

下一步设置Cloud Firestore位置，有一下好几种，分为多域性和区域性。具体区别可查看文档，默认选择nam5 (us-central)即可，点击完成，等待分配Database。

image.png

完成后显示是这样的，现在还没有数据。

可参考Cloud Firestore 使用入门，文档还是很全的

配置文章阅读量

做完上边的操作后，接着就是把代码集成到自己的项目中了。

在/themes/next/layout/_third-party/analytics/firestore.swig中，其实已经实现了文章阅读量的功能，只需要经过本文以上的操作，然后在/themes/next/_config.yml文件，启用firestore：

image.png

apiKey和projectId就是上文中创建的。collection：集合ID，下边会讲到。

这个功能经过配置后，可用于文章的阅读次数了，当文章未被查看时，效果是这样的：

image.png

此时的Firebase中的Database下也没有数据，当浏览这篇文章后，阅读次数加1了。
如下图：

image.png

再打开Firebase，你会发现，也有数据了：

image.png

articles就是上边配置的collection的值，即：集合ID

这控制台能对集合、文档、字段、值进行操作，比如设置阅读量啦什么的。。

设置开发环境

每个页面的阅读量有了，不过我们要做的是排行榜啊，得把所有的页面汇总排序。而且刚才的Database里存的数据也没有URL等等这些信息呀，接下来要写代码了。。。

新增如下的页面——「热榜」，我想大家都会了吧，不细说了。

image.png

在这个index.md文件中，引入要用到的Firebase代码，可参照官方文档进行。

之前我想直接在此md文件中引入firestore.swig，但启动一直报错。。（我也是新手，应该是没配置对，知道答案的麻烦请留言告知下~）

报错截图如下：

image.png

多次改路径，尝试无果后。。。我觉定在md文件中再次引入依赖的js代码。。

index.md完整代码如下：

---
title: 文章热度排行
date: 2019-08-14 15:23:11
---

1、引入的js版本最好和firestore.swig中的保持一致
2、记得把apiKey和projectId换成你自己的。。
3、orderBy这是是按Database中articles集合的count值降序排序
4、limit限制返回的结果集数量
tips：Firebase官方网站上，可全文搜索想要结果（都是谷歌网站的js包，必须能访问外网。。）

参考文档： Firebase读取数据、 Firebase对数据进行排序和限制数量、 github上firestore相关JS操作方法

完成以上步骤后，访问热榜界面，就能出现以下界面了：

image.png

文章排行有了，但是点击文章要跳转的链接还没有呢。我们也看到了，Firebase只保存了每个文章访问量count值，没有存文章的url信息。这就是接下来要解决的问题。。。

保存文章url地址

前文说过，Next为我们整合了firestore，那只能实现记录每篇文章浏览量的功能，要做热榜，似乎不满足需求啊，这就要我们改代码了。。

修改/themes/next/layout/_third-party/analytics/firestore.swig，主要修改的地方有三处：

修改文章页判断逻辑

以firestore.swig之前的代码来做排行榜功能时，发现不止文章出现在排行榜页面，连左侧点击过的链接，比如分类、标签、归档等等的链接也会显示在排行榜页面。。。

后来博主经过多次调试、阅读代码后，发现了问题所在，原因就出现在现有的文章页和非文章页判断逻辑上：

image.png

这个逻辑只能适用于单篇文章的阅读次数统计。。不能满足我们现在的需求了，代码修改如下：

      //https://hexo.io/zh-tw/docs/variables.html
      var isPost = '{{ page.title }}'.length > 0
      var isArchive = '{{ archive }}' === 'true'
      var isCategory = '{{ category }}'.length > 0
      var isTag = '{{ tag }}'.length > 0

      var urlPath = '{{ page.path }}';
      var urlFullPath = '{{ page.permalink }}';
      var indexPath = 'index.html'; //首页链接
      var isMenu = false;
      {% for name, path in theme.menu %}
         {# 判断当前链接是否是左侧菜单栏链接 #}
         var menuLink = '{{ url_for(path.split('||')[0]) | trim }}';
         if(urlPath.indexOf(menuLink) > 0 || urlPath == indexPath){
            isMenu = true;
         }
      {% endfor %}

    //  if (isPost) { //is article page
      if (!isMenu) { // 非菜单页、非主页（即在某篇文章链接里）
        var title = '{{ page.title }}'
        var doc = articles.doc(title)

      //  getCount(doc, true).then(appendCountTo($('.post-meta')))
        getCount(doc, urlFullPath, true).then(appendCountTo($('.post-wordcount')))
      }
     // else if (!isArchive && !isCategory && !isTag) { //is index page
      else if (urlPath == indexPath) { // 主页
        var titles = [] //array to titles

修改前后对比如下：

image.png

注意了：

var indexPath = 'index.html'; //首页链接

这是我在站点配置文件中修改后的结果

image.png

之前的：permalink: :year/:month/:day/:title/，在做SEO优化改成了：permalink: :title.html，所以这里能直接用来做判断了。

当然你不改的话，这里的if判断就得改成你现在的逻辑。

修改getCount方法

我也尝试过在articles.doc(title)中追加设置链接的方法，参考了Github，比如：

articles.doc(title).set({'uri': urlPath, 'url': urlFullPath});

不过这样操作后，在getCount方法中就会出现其它的错误，改动比较多。

偷懒一下，我就把url地址直接以参数的形式传递到getCount方法

getCount(doc, urlFullPath, true)

这样改动的就相对少了。。。

image.png

这里用了window.localStorage来保存整个网站的数据，以title为key，保存的数据没有过期时间，直到手动去删除。

修改文章阅读次数样式（非必须）

最后的修改是为了改下文章阅读次数的样式

将firestore.swig中的$('.post-meta')替换成$('.post-wordcount')；
将图标$('').addClass('fa fa-users')替换成$('').addClass('fa fa-eye')，效果如下：

image.png

---

附上firestore.swig完整代码：

{% if theme.firestore.enable %}
  
  
  {% if theme.firestore.bluebird %}
    
  {% endif %}
  
{% endif %}

结尾

至于热榜页面的样式布局，可在其index.md文件中修改即可

经过博主三四天攻坚，以参阅Google官方文档为主，至此，文章热榜功能已经全部完成。。。

最终效果：

image.png

基于Firestore做的排行榜也有个缺点，那就是对于不能访问谷歌的用户来说，这个页面是不能正常显示的。。。

虽然Firebase具有离线访问数据功能，不过这是针对短期不能联网的情况。。

如果需要做到国内用户普遍都能访问，那好像就得依赖于Leancloud实现了，不知道大家有什么其他方案，欢迎留言讨论。

（本文完）