爲Hexo加入瀏覽量的功能

時間 2019-11-05

標籤 hexo 加入瀏覽量功能简体版

原文原文鏈接

版權聲明：更多文章請訪問個人我的站 Keyon Y，轉載請註明出處。

Hexo是和WordPress同樣的完善的博客系統，可是好多輔助功能/插件須要是訪問谷歌的服務器的，在我大天朝就只能看看了。但是咱們勤勞的程序猿們不甘心不那麼完美，因此大神們寫了各類教程，經過其餘的方法解決了由於谷歌而不能使用的功能，
今天就來講說爲Hexo博客網站加上的瀏覽量功能。javascript

原理就是使用leancloud做爲數據庫託管，使用leancloud的API進行操做數據的讀取和寫入。 html

在leancloud上註冊一個帳號，而後參考官方文檔。java

html頁面引入jsnode

<!-- 存儲服務 -->
<script src="//cdn1.lncld.net/static/js/2.5.0/av-min.js"></script>

在後臺管理中新建一個應用

初始化，APP_ID和APP_KEY在應用的設置-應用key中查找git

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字段來存儲瀏覽次數；
新增一條數據的方法github

// 保存
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是系統變量直接調用，這個值用來記錄列表頁的當前頁碼

獲取數據hexo

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

而後是填充瀏覽量數據app

// 填充訪問次數
    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');
  });

這樣就實現了瀏覽量的功能

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。