Hexoにブラウズ量を加える機能

8485 ワード

詳細については、パーソナルステーションを参照してください.
Keyon Y、転載は出典を明記してください.
HexoはWordPressと同じ完璧なブログシステムですが、多くの補助機能/プラグインはグーグルのサーバーにアクセスする必要があります.私の大天朝では見るしかありません.しかし、私たちの勤勉なプログラム猿たちはそんなに完璧ではないことに甘んじていないので、大神たちはいろいろなチュートリアルを書いて、他の方法でグーグルでは使えない機能を解決しました.今日はHexoブログサイトに加えた閲覧量機能についてお話しします.
leancloudをデータベース管理として使用し、leancloudのAPIを使用して操作データの読み取りと書き込みを行うのが原理です.
leancloudにアカウントを登録し、公式ドキュメントを参照します.
htmlページ導入js


バックグラウンド で しいアプリケーション 、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のリンクアドレスはすべてこのように のタイトルをリンクアドレスとしているため、 のタイトルでデータの の を して し、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’の はデータを め むために されます

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;
        }
    }

に な は、leancloudConfig.jsなどの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を します.


//     

    //    blog   ,  leancloud         
    $(function () {
        var todo = new leanCloud()._addCount('test');
      });

フロントページの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');
  });

これにより閲覧量の機能が実現