版权声明：此文首发于我的个人站为Hexo加入浏览量的功能，转载请注明出处。
Hexo是和WordPress一样的完善的博客系统，但是好多辅助功能/插件需要是访问谷歌的服务器的，在我大天朝就只能看看了。可是我们勤劳的程序猿们不甘心不那么完美，所以大神们写了各种教程，通过其他的方法解决了因为谷歌而不能使用的功能，
今天就来说说为Hexo博客网站加上的浏览量功能。
原理就是使用leancloud作为数据库托管，使用leancloud的API进行操作数据的读取和写入。
html页面引入js
<!-- 存储服务 -->
<script src="//cdn1.lncld.net/static/js/2.5.0/av-min.js"></script>在后台管理中新建一个应用
初始化，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’的元素用来往其中填充数据
<!--我用的是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');
// tag添加active
tags.run();
});这样就实现了浏览量的功能
24万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
