Hexo yilia 基于 leancloud 实现文章阅读量统计

总想明确地知道自己文章点击量如何，所以就想为博客增加文章阅读量统计。起初想用不蒜子实现，但是它无法在目录页面看到每篇博客阅读量。有看到其他人基于 leancloud 实现，遂参考实现。
前面已有介绍使用 valine 作为评论系统的文章，这里也不赘述有关 leancloud 的注册及应用创建等前置步骤，开门见山，只谈代码修改及一些注意事项。

修改 _config.yml

修改 yilia 主题下的 _config.yml 文件，增加判断是否启用访问统计的配置项，以及 leancloud 的 api_id 及 api_key。由于我博客中也使用了基于 leancloud 的 valine，不能同时使用两个 api_id 及 api_key，所以我把 valine 中的 leancloud 配置项抽取出来。该文件最后增加内容如下：

# leancloud visitors
leancloud_visitors:
  enable: true
#添加一下js插件的 CDN地址
js_cdn:
  jquery: https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js
  av : //cdn1.lncld.net/static/js/2.5.0/av-min.js
# 评论及阅读数都用到
leancloud:
 app_id:  #Leancloud应用的appId
 app_key: #Leancloud应用的appKey

注意，如果之前已经添加过 valine，上面 leancloud 的配置项可使用 valine 的 leancloud api_id 及 api_key。

修改 article.ejs

修改 article.ejs 文件（在主题的 layout/_partial 目录下），在标题旁或下面你觉得合适的地方加入显示阅读量的代码。我之前在标题下加入过阅读时长，所以这次就加在它旁边。代码如下：

<!-- word count end -->
<% if (theme.leancloud_visitors.enable && !post.no_visitors) { %>
  &nbsp; | &nbsp;
  <span id="<%= post.id %>" class="pageViews" data-flag-title="<%= post.title %>">0</span>°
<% } %>

这里第二次注意，由于目录页有多篇文章，所以在 <span> 中需要可以标识不同文章的属性值。我这里代码是基于我所参考的文章的，所以属性用的 id，值的话可以用 post.url 变量。由于我给文章加了 id（《Hexo 向以前的文章添加id》），所以使用 post.id。另外，为了方便在 leancloud 上直观地看到文章的访问情况，所以我又增加了一个属性，把标题传入。
还有，如果之前添加过 valine，而现在把它的 app_id 及 app_key 抽取出来的话，需要对应改 valine 的相关代码配置。

修改 footer.ejs

修改 footer.ejs（在主题的 layout/_partial 目录下），在 </footer> 标签前，加入如下代码：

<% if (theme.leancloud_visitors.enable){ %>
<!-- 文章阅读数 -->
<%- partial('post/lc_visitors') %>
<% } %>

这里的 lc_visitors 在下一步创建，它实现获取及更新文章阅读数的逻辑。

增加 lc_visitors.ejs

在主题的 layout/_partial/post 目录下，新增加文件 lc_visitors.ejs，代码如下：

<script src="<%- theme.js_cdn.jquery %>"></script>
<script src="<%- theme.js_cdn.av %>"></script>
<script type="text/javascript">
if(<%- theme.leancloud_visitors.enable %>){
    var leancloud_app_id  = '<%= theme.leancloud.appid %>';
    var leancloud_app_key = '<%= theme.leancloud.appkey %>';
    AV.init({
        appId: leancloud_app_id,
        appKey: leancloud_app_key
    });
    var pageViewsLength = $(".pageViews").length;
    var isIndex = $(".pageViews").length > 1 ?true:false;
    function showTime() {
        var Pageview = AV.Object.extend("Pageview");
        if(isIndex){
            $(".pageViews").each(function(){
                showPageViewsNum($(this), Pageview);
            });
        }else{
            addPageViewsNum($(".pageViews"));
        }
    }
    //仅显示阅读量
    function showPageViewsNum(ele, Pageview){
        var id = ele.attr('id').trim();
        var query = new AV.Query("Pageview");
        query.equalTo("post_id", id);
        query.descending('createdAt');
        query.limit(1);
        query.find().then(function (results) {
            $(document.getElementById(id)).text(results && results.length > 0?  results[0].get("count") : '0');
        }, function (error) {
             $(document.getElementById(id)).text('0');
        });
    }
    //追加并显示阅读量
    function addPageViewsNum(ele){
        var id = ele.attr('id').trim();
        var title = ele.attr('data-flag-title').trim();
        var query = new AV.Query("Pageview");
        query.equalTo("post_id", id);
        query.descending('createdAt');
        query.limit(1);
        query.find().then(function (results) {
            if (results.length == 0) {
               saveNewPageview(id, title);
               return;
            }
            var pageview = results[0];
            var count = pageview.get("count");
            count++;
            pageview.set("count", count);
            pageview.set("title", title);
            pageview.save().then(function (pageview) {
                $(document.getElementById(id)).text(count);
            })
        }, function (error) {
            saveNewPageview(id, title);
        })
    }

    function saveNewPageview(id, title) {
       var Pageview = AV.Object.extend("Pageview");
       var query = new Pageview;
       query.save({
           post_id: id,
           title: title,
           count: 1
       }).then(function (pageview) {
           $(document.getElementById(id)).text(pageview.count);
       }, function (error) {
       });

    }

    if(pageViewsLength){ //此处判断等于 1 在执行 可去除循环
        showTime();
    }
}
</script>

我这里的代码是基于所参考的文章来修改的。原文章的思路是，每次访问就增加一条该文章的记录，然后请求包含该文章的记录数，就是文章的总阅读数。比起我即将要改的方案，它的好处是在高并发下也不会丢失访问量。
我考虑到我的博客访问量不大（事实如此= =！），又希望能直观地看出文章的访问情况，对表进行了修改，增加访问计数及标题两列。然后当进入文章时，如果没有该文章的记录，则写入新的记录，否则把原来记录的计数加1。

最终效果

目录展示效果如下：

leancloud 后台数据效果如下：

参考文章

• 小叮当的肚兜《添加 hexo yilia 主题的文章阅读量》：https://www.cnblogs.com/stringfade/p/7738072.html

---

本文由 浩码农 创作，采用 CC BY-NC-SA 4.0 许可协议
本站文章除注明转载/出处外，均为本站原创或翻译，转载请务必署名

赏

我的娃的奶粉钱就看你们的打赏啦

支付宝

微信