為Hexo加入瀏覽量的功能

smartlion 發(fā)布于2019-08-20 17:21 / 3428人閱讀

摘要：可是我們勤勞的程序猿們不甘心不那么完美，所以大神們寫了各種教程，通過其他的方法解決了因?yàn)楣雀瓒荒苁褂玫墓δ?，今天就來說說為博客網(wǎng)站加上的瀏覽量功能。

版權(quán)聲明：更多文章請(qǐng)?jiān)L問我的個(gè)人站Keyon Y，轉(zhuǎn)載請(qǐng)注明出處。

Hexo是和WordPress一樣的完善的博客系統(tǒng)，但是好多輔助功能/插件需要是訪問谷歌的服務(wù)器的，在我大天朝就只能看看了?？墒俏覀兦趧诘某绦蛟硞儾桓市牟荒敲赐昝溃源笊駛儗懥烁鞣N教程，通過其他的方法解決了因?yàn)楣雀瓒荒苁褂玫墓δ埽?br>今天就來說說為Hexo博客網(wǎng)站加上的瀏覽量功能。

原理就是使用leancloud作為數(shù)據(jù)庫托管，使用leancloud的API進(jìn)行操作數(shù)據(jù)的讀取和寫入。

在leancloud上注冊(cè)一個(gè)賬號(hào)，然后參考官方文檔。

html頁面引入js

在后臺(tái)管理中新建一個(gè)應(yīng)用

初始化，APP_ID和APP_KEY在應(yīng)用的設(shè)置-應(yīng)用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的鏈接地址都是這樣子的
就是文章的標(biāo)題作為鏈接地址，所以用文章的標(biāo)題來查找和創(chuàng)建數(shù)據(jù)的唯一標(biāo)識(shí)，用content字段來存儲(chǔ)瀏覽次數(shù)；
新增一條數(shù)據(jù)的方法

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

新增以后要實(shí)現(xiàn)瀏覽/刷新后點(diǎn)擊量每次+1，就要更新數(shù)據(jù)

// 更新一條 文章瀏覽量數(shù)據(jù)
var _update = function(obj){
        // 第一個(gè)參數(shù)是 className，第二個(gè)參數(shù)是 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’的元素用來往其中填充數(shù)據(jù)


span(id="#{item.title}", class="leancloud_visitors", data-pageNum="#{page.current}")
// page.current是系統(tǒng)變量直接調(diào)用，這個(gè)值用來記錄列表頁的當(dāng)前頁碼

獲取數(shù)據(jù)

var pageCounts = 2;  // 每頁返回條數(shù)
    if($(".leancloud_visitors").attr("data-pageNum")!= "undefined"){    // 判斷是否為列表頁
        var pageNum = parseInt($(".leancloud_visitors").attr("data-pageNum"))-1;    // 當(dāng)前頁碼
    }
// 獲取詳情頁的訪問次數(shù)數(shù)據(jù)
    var _getDetailTime = function(title) {
        var query = new AV.Query(className);
        query.equalTo("title", title);
        return query.find();
    }

    // 獲取列表頁的訪問次數(shù)數(shù)據(jù)
    var _getListTime = function(){
        var query = new AV.Query(className);
        query.limit(pageCounts);            // 查詢數(shù)據(jù)時(shí)返回的數(shù)量-每頁返回的條數(shù)
        query.skip(pageCounts*pageNum);     // 查詢數(shù)據(jù)時(shí)跳過的數(shù)量-當(dāng)前頁碼*每頁返回的條數(shù)
        query.descending("createdAt");      // 按新建的時(shí)間降序排列
        return query.find();
    }

然后是填充瀏覽量數(shù)據(jù)

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

判斷當(dāng)前在列表頁還是詳情頁

// 判斷列表頁or詳情頁
    var _isList = function(){
        if($(".post-page").length == 0){
            return true;
        }
    }

最終完整的方法寫在了一個(gè)js文件中，例如leancloudConfig.js

var leanCloud = (function(){
    var APP_ID = "fasdfaICadjaklsdbaskd-gasdasfz";
    var APP_KEY = "gfdgsArfgsdg";
    var className,Todo;
    var pageCounts = 2; // 每頁返回條數(shù)
    if($(".leancloud_visitors").attr("data-pageNum")!= "undefined"){
        var pageNum = parseInt($(".leancloud_visitors").attr("data-pageNum"))-1;    // 當(dāng)前頁碼
    }

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

    // 新增一條 文章統(tǒng)計(jì)數(shù)據(jù)【僅限一條】
    var _addCount = function() {
        // 監(jiān)聽 新增按鈕 被點(diǎn)擊
        function addListenButton(){
            setTimeout(function(){
                console.log("start listen...");
                $(".new-post_button").click(function(){addListenInput();})
            },5000)    //考慮到服務(wù)器的帶寬僅有1M，網(wǎng)速較慢所以將此方法延遲執(zhí)行
        }
        // 監(jiān)聽 回車/點(diǎn)擊確定按鈕 后 執(zhí)行保存
        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();
    }

    // 獲取詳情頁的訪問次數(shù)數(shù)據(jù)
    var _getDetailTime = function(title) {
        var query = new AV.Query(className);
        query.equalTo("title", title);
        return query.find();
    }

    // 獲取列表頁的訪問次數(shù)數(shù)據(jù)
    var _getListTime = function(){
        var query = new AV.Query(className);
        query.limit(pageCounts);            // 查詢數(shù)據(jù)時(shí)返回的數(shù)量-每頁返回的條數(shù)
        query.skip(pageCounts*pageNum);     // 查詢數(shù)據(jù)時(shí)跳過的數(shù)量-當(dāng)前頁碼*每頁返回的條數(shù)
        query.descending("createdAt");      // 按新建的時(shí)間降序排列
        return query.find();
    }

    // 更新一條 文章瀏覽量數(shù)據(jù)
    var _update = function(obj){
        // 第一個(gè)參數(shù)是 className，第二個(gè)參數(shù)是 objectId
        var todo = AV.Object.createWithoutData(className, obj.id);
        var count = parseInt(obj.get("content"))+1;
        // 修改屬性
        todo.set("content", count.toString());
        // 保存到云端
        todo.save();
    }
    // 填充訪問次數(shù)
    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){}

    // 獲取瀏覽量數(shù)據(jù)
    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;
    }

    //返回構(gòu)造函數(shù)
    return constructor;
})()

因?yàn)槲沂褂玫氖莌exo-admin做后臺(tái)管理，安裝和使用方法見https://github.com/jaredly/hexo-admin
要在hexo-admin的后臺(tái)中新增文章時(shí)自動(dòng)添加一條數(shù)據(jù)，就要對(duì)其改造：
在根目錄的node_modules中搜索hexo-admin,在其文件夾中找到www文件夾下的index.html，在其中引入leancloudConfig.js：



// 調(diào)用方法

在前臺(tái)頁面的layout.jade中同樣引入和調(diào)用：

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

這樣就實(shí)現(xiàn)了瀏覽量的功能

云服務(wù)器 GPU云服務(wù)器域名服務(wù)dns的主要功能為請(qǐng)開啟瀏覽器的webrtc功能您的瀏覽器不支持webrtc功能 webrtc功能瀏覽器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83524.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

smartlion

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

C++基礎(chǔ)語法（五）繼承——萬字總結(jié)，干貨滿滿

閱讀 3036·2021-10-12 10:12
虛擬主機(jī)的ip如何獲取-怎樣查看自己的虛擬主機(jī)ip地址？

閱讀 3103·2021-09-22 16:04
CSS<背景>

閱讀 3321·2019-08-30 15:54
這份優(yōu)化清單，你做了哪些？

閱讀 2642·2019-08-29 16:59
學(xué)習(xí)小結(jié) | Vue+TweenMax做一個(gè)溫度計(jì)

閱讀 2953·2019-08-29 16:08
氪信生活小程序Demo

閱讀 897·2019-08-29 11:20
CSS基礎(chǔ)教程

閱讀 3519·2019-08-28 18:08
高性能現(xiàn)代瀏覽器超大wav音頻的波形繪制方案

閱讀 687·2019-08-26 13:43

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

為Hexo加入瀏覽量的功能

相關(guān)文章

hexo高階教程：next主題優(yōu)化之加入網(wǎng)易云音樂、網(wǎng)易云跟帖、炫酷動(dòng)態(tài)背景、自定義樣式，打造屬于你

hexo高階教程：next主題優(yōu)化之加入網(wǎng)易云音樂、網(wǎng)易云跟帖、炫酷動(dòng)態(tài)背景、自定義樣式，打造屬于你

hexo高階教程：next主題優(yōu)化之加入網(wǎng)易云音樂、網(wǎng)易云跟帖、炫酷動(dòng)態(tài)背景、自定義樣式，打造屬于你

Hexo折騰記

hexo+css創(chuàng)建自己的blog（搭建）

發(fā)表評(píng)論

0條評(píng)論

smartlion

男|高級(jí)講師

TA的文章

C++基礎(chǔ)語法（五）繼承——萬字總結(jié)，干貨滿滿

虛擬主機(jī)的ip如何獲取-怎樣查看自己的虛擬主機(jī)ip地址？

CSS<背景>

這份優(yōu)化清單，你做了哪些？

學(xué)習(xí)小結(jié) | Vue+TweenMax做一個(gè)溫度計(jì)

氪信生活小程序Demo

CSS基礎(chǔ)教程

高性能現(xiàn)代瀏覽器超大wav音頻的波形繪制方案

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

為Hexo加入瀏覽量的功能

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！