Hexo使用自定义排行阅读次数

前言

在Hexo博客的时候，用到阅读排行榜的时候，用的网上的LeanCloud有时获取的数据为空的bug，于是自己写了一个简单的计数器和排行的后台服务。后台服务源码见 https://github.com/zngw/count/

Hexo next配置

1. 修改主题配置

在配置文件themes/next/_config.yml中添加配置

# zngw页面统计及排行功能
# zngw统计服务器参见： https://github.com/zngw/count
# 统计服务器用GO编写，基于SQLite数据库
# url: 服务器接口地址
# key: 用户key,服务器中配置
# visitors： 页面统计
#   enable： 是不开启文章统计
#   total:   是不开启站点统计
#   pv，uv：  统计描述
# top_posts: 左侧栏热门推荐
#   enable： 启用
#   title： 标题
#   icon: 图标
#   num： 显示条数
zngw:
  enable: true
  url: //count.zengwu.com.cn/count
  key: zngw
  visitors:
    enable: true
    total: true
    uv_header: 我的第 
    uv_footer: 位朋友，
    pv_header: 历经
    pv_footer: 次回眸才与你相遇
  top_posts:
    enable: true
    title: 热门推荐
    icon: signal
    num: 5

2. 编写zngw统计文件

创建themes/next/layout/_third-party/analytics/zngw-analytics.swig文件

{% if theme.zngw.enable %}
  <script src="//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
  <script>
    function post(url, postInfo, success, fail) {
      axios.post(url, postInfo)
        .then((resp) => {
          if (success) {
            success(resp.data)
          }
        })
        .catch((error) => {
          console.error(error);
          if (fail) {
            fail(error)
          }
        })
    }

    function showTime() {
      var entries = [];
      var $visitors = $(".zngw_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });
      if(entries.length == 0){
        return
      }

      let postData = {
        user: '{{ theme.zngw.key }}',
        url: entries
      }

      post('{{ theme.zngw.url }}'+'/get', postData, function(results){
        var COUNT_CONTAINER_REF = '.zngw-visitors-count';
        if (results==null || results.length === 0) {
          $visitors.find(COUNT_CONTAINER_REF).text(0);
          return;
        }

        for (var i = 0; i < results.length; i++) {
          var item = results[i];
          var element = document.getElementById(item.url);

          $(element).find(COUNT_CONTAINER_REF).text(item.time);
        }
        for(var i = 0; i < entries.length; i++) {
          var url = entries[i];
          var element = document.getElementById(url);
          var countSpan = $(element).find(COUNT_CONTAINER_REF);
          if( countSpan.text() == '') {
            countSpan.text(0);
          }
        }
      },function(err){
        console.log(err);        //=>3
      })
    }

    function addCount() {
      var $visitors = $(".zngw_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();

      let postData = {
        user: '{{ theme.zngw.key }}',
        url: url,
        title: title
      }

      post('{{ theme.zngw.url }}'+'/add', postData, function(results){
        var COUNT_CONTAINER_REF = '.zngw-visitors-count';
        var $element = $(document.getElementById(url));
        $element.find(COUNT_CONTAINER_REF).text(results.time);
      },function(err){
        console.log(err);        //=>3
      })
    }

    function addTotals() {
      var $visitors = $(".zngw_totals");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();

      let postData = {
        user: '{{ theme.zngw.key }}',
        url: url,
        title: title
      }

      post('{{ theme.zngw.url }}'+'/add', postData, function(results){
        var $element = $(document.getElementById(url));
        $element.find('.gk-totals-count').text(results.time);
        $element.find('.gk-uv-count').text(results.uv);
      },function(err){
        console.log(err);        //=>3
      })
    }

    function showTop() {
      var $visitors = $(".zngw_top");
      var url = $visitors.attr('id').trim();

      let postData = {
        user: '{{ theme.zngw.key }}',
        limit: {{ theme.zngw.top_posts.num + 1}}
      }

      post('{{ theme.zngw.url }}'+'/top', postData,function(results){
        var index = 0;
        for (var i = 0; i < results.length; i++) {
          var item = results[i];
          if(item.url!=='/'){
            index++;
            var content="<li class='pull-left' style='white-space:nowrap'><font color='#EE0000'>"+index+"</font><a href='.."+item.url+"' rel='section' title='" +item.title+ "'>"+item.title+"</a></li><li class='pull-right'><font color='#519ABA'>"+item.time+"</font></li><br>"

            document.getElementById(url).innerHTML+=content
          }
        }
      }, function(err){
        console.error(error);
      })
    }

    $(function() {
      if ($('.zngw_top').length == 1) {
        showTop();
      }

      if ($('.zngw_totals').length == 1) {
        addTotals();
      }

      if ($('.zngw_visitors').length == 1) {
        addCount();
      } else if ($('.post-title-link').length > 1) {
        showTime();
      }
    });
  </script>

{% endif %}

3. 加入引用文件

打开themes/next/layout/_layout.swig文件加入zngw-analytics.swig

{% include '_third-party/analytics/zngw-analytics.swig' %}

4. 在文章标题下添加阅读次数

打开themes/next/layout/_macro/post.swig，找到{# LeanCould PageView #}处，在之前添加以下代码

{# Zngw PageView #}
{% if theme.zngw.enable and theme.zngw.visitors.enable %}
  <span id="{{ url_for(post.path) }}" class="zngw_visitors" data-flag-title="{{ post.title }}">
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-eye"></i>
    </span>
    {% if theme.post_meta.item_text %}
      <span class="post-meta-item-text">{{__('post.visitors')}}&#58;</span>
    {% endif %}
    <span class="zngw-visitors-count"></span>
  </span>
{% endif %}

显示效果

5. 在网站底层配置浏览次数和uv次数

打开themes/next/layout/_partials/footer.swig文件，找到theme.leancloud_visitors.enable 在之前添加下面代码

  {% if theme.zngw.enable and theme.zngw.visitors.total %}
    <span id="/" class="zngw_totals" data-flag-title="{{ config.title }}">
      <span class="post-meta-divider">{{ theme.zngw.visitors.uv_header }}</span>
      <span class="gk-uv-count"></span>
      <span class="post-meta-divider">{{ theme.zngw.visitors.uv_footer }}</span>

      <span class="post-meta-divider">{{ theme.zngw.visitors.pv_header }}</span>
      <span class="gk-totals-count"></span>
      <span class="post-meta-divider">{{ theme.zngw.visitors.pv_footer }}</span>
    </span>
  {% endif %}

显示效果

6. 添加热度排行

添加top页面

hexo new page top

修改top/index.md文件

---
title: 热度排行
---
<div id="top"></div>
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    axios.post("//count.zengwu.com.cn/count/top", {user: 'zngw',limit: 25})
      .then((results) => {
        var index = 0;
        for (var i = 0; i < results.data.length; i++) {
          var item = results.data[i];
          if(item.url!=='/'){
            index++;
            var content="<div><span class='pull-left'><font color='#EE0000'>"+index+"    </font>"+"<a href='"+".."+item.url+"' rel='section'>"+item.title+"</a></span><span class='pull-right'><font color='#519ABA'>"+item.time+"</font></span></div><br>"
            document.getElementById("top").innerHTML+=content
          }
        }
      })
      .catch((error) => {
        console.error(error);
      })
</script>

显示效果

7. 在左侧加入热门文章

打开themes/next/layout/_macro/sidebar.swig文件，找到theme.links在之前添加

{% if theme.zngw.top_posts.enable %}
  <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.zngw.top_posts.layout  }}">
    <div class="links-of-blogroll-title">
      <i class="fa fa-{{ theme.zngw.top_posts.icon }}" aria-hidden="true"></i>
      <a href="/top/index.html" target='inline'>{{ theme.zngw.top_posts.title }}</a>
    </div>
    <ul id="zngw_top" class="zngw_top links-of-blogroll-list"></ul>
  </div>
{% endif %}

显示效果