為Hexo加入瀏覽量的功能
阿新 • • 發佈：2019-02-13
Hexo是和WordPress一樣的完善的部落格系統，但是好多輔助功能/外掛需要是訪問谷歌的伺服器的，在我大天朝就只能看看了。可是我們勤勞的程式猿們不甘心不那麼完美，所以大神們寫了各種教程，通過其他的方法解決了因為谷歌而不能使用的功能，
今天就來說說為Hexo部落格網站加上的瀏覽量功能。
，使用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 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();
});這樣就實現了瀏覽量的功能