为Hexo到场浏览量的功用

2019年8月25日 234次阅读 来源: KeyonY

版权声明：更多文章请接见我的个人站
Keyon Y，转载请说明出处。

Hexo是和WordPress一样的圆满的博客体系，然则很多辅佐功用/插件需如果接见谷歌的效劳器的，在我大天朝就只能看看了。但是我们勤奋的顺序猿们不甘心不那么圆满，所以大神们写了种种教程，经由过程其他的要领处理了因为谷歌而不能运用的功用，
本日就来说说为Hexo博客网站加上的阅读量功用。

道理就是运用leancloud作为数据库托管，运用leancloud的API举行操纵数据的读取和写入。

在leancloud上注册一个账号，然后参考官方文档。

html页面引入js

<!-- 存储效劳 -->
<script src="//cdn1.lncld.net/static/js/2.5.0/av-min.js"></script>

在背景治理中新建一个运用
《为Hexo到场浏览量的功用》
初始化，APP_ID和APP_KEY在运用的设置-运用key中查找

var APP_ID = 'fasdfaICadjaklsdbaskd-gasdasfz';
var APP_KEY = 'gfdgsArfgsdg';
AV.init({
  appId: APP_ID,
  appKey: APP_KEY
});
var Todo = AV.Object.extend('test');

因为hexo的链接地点都是这模样的《为Hexo到场浏览量的功用》
就是文章的题目作为链接地点，所以用文章的题目来查找和建立数据的唯一标识，用content字段来存储阅读次数；
新增一条数据的要领

// 保留
function saveToLeancloud(title){
    var newData = new Todo();
    newData.save({
        title: title,
        content: '0'
    }).then(function (data) {
        console.log(data);
    })
}

新增今后要完成阅读/革新后点击量每次+1，就要更新数据

// 更新一条 文章阅读量数据
var _update = function(obj){
        // 第一个参数是 className，第二个参数是 objectId
        var todo = AV.Object.createWithoutData(className, obj.id);
        var count = parseInt(obj.get('content'))+1;
        // 修正属性
        todo.set('content', count.toString());
        // 保留到云端
        todo.save();
}

html中到场类名为‘.leancloud_visitors’的元素用交游个中添补数据

<!--我用的是jade模板引擎，#{}就是赋值，ejs、swig等模板请参考对应文档的写法 -->
span(id="#{item.title}", class="leancloud_visitors", data-pageNum="#{page.current}")
// page.current是体系变量直接挪用，这个值用来纪录列表页确当前页码

猎取数据

var pageCounts = 2;  // 每页返回条数
    if($('.leancloud_visitors').attr('data-pageNum')!= 'undefined'){    // 推断是不是为列表页
        var pageNum = parseInt($('.leancloud_visitors').attr('data-pageNum'))-1;    // 当前页码
    }
// 猎取详情页的接见次数数据
    var _getDetailTime = function(title) {
        var query = new AV.Query(className);
        query.equalTo("title", title);
        return query.find();
    }

    // 猎取列表页的接见次数数据
    var _getListTime = function(){
        var query = new AV.Query(className);
        query.limit(pageCounts);            // 查询数据时返回的数目-每页返回的条数
        query.skip(pageCounts*pageNum);     // 查询数据时跳过的数目-当前页码*每页返回的条数
        query.descending('createdAt');      // 按新建的时候降序分列
        return query.find();
    }

然后是添补阅读量数据

// 添补接见次数
    var _writeCount = function(data){
        if($('.post-page').length == 0){    // 推断是在列表页照样详情页
            $('.leancloud_visitors').each(function(i,e){
                $(e).text(parseInt(data[i].get('content')));
            })
        }else{
            $('.leancloud_visitors').each(function(i,e){
                $(e).text(parseInt(data[i].get('content'))+1);
            })
        }
    }

推断当前在列表页照样详情页

// 推断列表页or详情页
    var _isList = function(){
        if($('.post-page').length == 0){
            return true;
        }
    }

终究完全的要领写在了一个js文件中，比方leancloudConfig.js

var leanCloud = (function(){
    var APP_ID = 'fasdfaICadjaklsdbaskd-gasdasfz';
    var APP_KEY = 'gfdgsArfgsdg';
    var className,Todo;
    var pageCounts = 2; // 每页返回条数
    if($('.leancloud_visitors').attr('data-pageNum')!= 'undefined'){
        var pageNum = parseInt($('.leancloud_visitors').attr('data-pageNum'))-1;    // 当前页码
    }

    // 初始化
    AV.init({
        appId: APP_ID,
        appKey: APP_KEY
    });

    // 新增一条 文章统计数据【仅限一条】
    var _addCount = function() {
        // 监听 新增按钮 被点击
        function addListenButton(){
            setTimeout(function(){
                console.log('start listen...');
                $('.new-post_button').click(function(){addListenInput();})
            },5000)    //考虑到效劳器的带宽唯一1M，网速较慢所以将此要领耽误实行
        }
        // 监听 回车/点击肯定按钮 后 实行保留
        function addListenInput(){
            var inputTitle;
            setTimeout(function(){
                $('.new-post_input').blur(function(){
                    inputTitle = $(this).val();
                })
                $('.new-post_ok').mousedown(function(){
                    var title = $('.new-post_input').val();
                    saveToLeancloud(title);
                    addListenButton();
                })
                $(document).keypress(function(e){
                    if(e.which == 13){
                        var title = inputTitle;
                        saveToLeancloud(title);
                        addListenButton();
                    }
                })
            },500)
        }

        // 保留
        function saveToLeancloud(title){
            var newData = new Todo();
            newData.save({
                title: title,
                content: '0'
            }).then(function (data) {
                console.log(data);
            })
        }
        addListenButton();
    }

    // 猎取详情页的接见次数数据
    var _getDetailTime = function(title) {
        var query = new AV.Query(className);
        query.equalTo("title", title);
        return query.find();
    }

    // 猎取列表页的接见次数数据
    var _getListTime = function(){
        var query = new AV.Query(className);
        query.limit(pageCounts);            // 查询数据时返回的数目-每页返回的条数
        query.skip(pageCounts*pageNum);     // 查询数据时跳过的数目-当前页码*每页返回的条数
        query.descending('createdAt');      // 按新建的时候降序分列
        return query.find();
    }

    // 更新一条 文章阅读量数据
    var _update = function(obj){
        // 第一个参数是 className，第二个参数是 objectId
        var todo = AV.Object.createWithoutData(className, obj.id);
        var count = parseInt(obj.get('content'))+1;
        // 修正属性
        todo.set('content', count.toString());
        // 保留到云端
        todo.save();
    }
    // 添补接见次数
    var _writeCount = function(data){
        if($('.post-page').length == 0){
            $('.leancloud_visitors').each(function(i,e){
                $(e).text(parseInt(data[i].get('content')));
            })
        }else{
            $('.leancloud_visitors').each(function(i,e){
                $(e).text(parseInt(data[i].get('content'))+1);
            })
        }
    }

    // 推断列表页or详情页
    var _isList = function(){
        if($('.post-page').length == 0){
            return true;
        }
    }

    var constructor = function(config){}

    // 猎取阅读量数据
    constructor.prototype._getTime = function(clsName){
        className = clsName;
        Todo = AV.Object.extend(className);
        if(_isList()){
            _getListTime().then(function(data) {
                _writeCount(data);
            }, function (error) {
                // error is an instance of AVError.
                console.log(error);
            });
        }else{
            var title = $('.leancloud_visitors').attr('id');
            _getDetailTime(title).then(function(data){
                _writeCount(data);
                _update(data[0]);
            })
        }
        return this;
    }
    constructor.prototype._addCount = function(clsName){
        className = clsName;
        Todo = AV.Object.extend(className);
        _addCount();
        return this;
    }

    //返回组织函数
    return constructor;
})()

因为我运用的是hexo-admin做背景治理，装置和运用要领见https://github.com/jaredly/hexo-admin
要在hexo-admin的背景中新增文章时自动增加一条数据，就要对其革新：
在根目录的node_modules中搜刮hexo-admin,在其文件夹中找到www文件夹下的index.html，在个中引入leancloudConfig.js：

<script src="http://cdn1.lncld.net/static/js/2.5.0/av-min.js"></script>
<script src="/js/leancloudConfig.js"></script>
// 挪用要领
<script>
    // 建立新blog胜利时，接见leancloud新建一条阅读量数据
    $(function () {
        var todo = new leanCloud()._addCount('test');
      });
</script>

在前台页面的layout.jade中一样引入和挪用：

script(src= '//cdn1.lncld.net/static/js/2.5.0/av-min.js')
script(src= '/js/leancloudConfig.js')
script.
  $(function () {
      var todo = new leanCloud()._getTime('test');
  });

如许就完成了阅读量的功用

    原文作者：KeyonY
    原文地址: https://segmentfault.com/a/1190000009824281
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞