资讯专栏INFORMATION COLUMN

为Hexo加入浏览量的功能

smartlion / 3354人阅读

摘要:可是我们勤劳的程序猿们不甘心不那么完美,所以大神们写了各种教程,通过其他的方法解决了因为谷歌而不能使用的功能,今天就来说说为博客网站加上的浏览量功能。

版权声明:更多文章请访问我的个人站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;
        }
    }

最终完整的方法写在了一个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:



// 调用方法

在前台页面的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");
  });

这样就实现了浏览量的功能

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83524.html

相关文章

  • hexo高阶教程:next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景、自定义样式,打造属于你

    摘要:我选择的是万网,阿里下面的。然后在主题配置文件下添加主题配置文件中添加自定义样式不得不说还是很人性化的,你可以个性化定制你的网站,你所有的改动需要放在主题文件的文件中,会 前言 本篇文章是在已经搭建好gitpage+hexo的博客的前提下(不懂怎么搭建的可以参考我的另一篇博文:了解githubPages+hexo搭建博客的原理 或者利用Gitpage+hexo开发自己的博客,这两篇博文...

    weizx 评论0 收藏0
  • hexo高阶教程:next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景、自定义样式,打造属于你

    摘要:我选择的是万网,阿里下面的。然后在主题配置文件下添加主题配置文件中添加自定义样式不得不说还是很人性化的,你可以个性化定制你的网站,你所有的改动需要放在主题文件的文件中,会 前言 本篇文章是在已经搭建好gitpage+hexo的博客的前提下(不懂怎么搭建的可以参考我的另一篇博文:了解githubPages+hexo搭建博客的原理 或者利用Gitpage+hexo开发自己的博客,这两篇博文...

    SoapEye 评论0 收藏0
  • hexo高阶教程:next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景、自定义样式,打造属于你

    摘要:我选择的是万网,阿里下面的。然后在主题配置文件下添加主题配置文件中添加自定义样式不得不说还是很人性化的,你可以个性化定制你的网站,你所有的改动需要放在主题文件的文件中,会 前言 本篇文章是在已经搭建好gitpage+hexo的博客的前提下(不懂怎么搭建的可以参考我的另一篇博文:了解githubPages+hexo搭建博客的原理 或者利用Gitpage+hexo开发自己的博客,这两篇博文...

    neuSnail 评论0 收藏0
  • Hexo折腾记

    摘要:前言博主之前也有折腾和可对于一个前端来说,让人没法尽兴,因为不知道该如何添加自己的代码。下面记录博主搭建的整个过程。若这两个条件满足,则创建一个目录的。 如果时间可以静止,我希望就停在此刻。 前言 博主之前也有折腾wordpress和jekyll可对于一个前端er来说,wordpress让人没法尽兴,因为不知道该如何添加自己的代码。而jekyll就太麻烦了每一次都需要重新提交,而且样式...

    RaoMeng 评论0 收藏0
  • hexo+css创建自己blog(搭建)

    摘要:目前比较火的和的文档都是使用框架实现的。二的安装安装前,确保电脑中已经安装了和。可以参照来自定义日期格式。值为时禁用主题部署参考部署部分的配置五部署上部署安装中配置部署部分的设置终端进入目录运行 一、什么是hexo Hexo是一个快速、简洁且高效的博客框架,使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。目前比较火的vue和weex的文档都是使...

    phoenixsky 评论0 收藏0

发表评论

0条评论

smartlion

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<