利用Github Pages创建的Jekyll模板个人博客添加阅读量统计功能
内容转载自我自己的博客
@
前言
Jekyll 是一个简单的免费的 Blog 生成工具,类似 WordPress 。它只是一个生成静态网页的工具,不需要数据库支持,最重要的是,GitHub Pages 基于 Jekyll 构建,所以可轻而易举地在 GitHub 上免费发布网站并自定义域名。Jekyll 具有许多的主题可以选择,也有很多插件可以安装,都只需要在文件_config.yml
中写明即可,不过我自己找了好久也没发现具有博客文章访问量统计的相关插件(虽然我的博客基本没什么人访问,但也还是想认真做好,权当是给自己的备忘录)。然后就去万能的搜索引擎寻找答案,参考别人的教程以及 leancloud 的 API 使用方法最终完成了点击量的功能
准备工作
第一步,需要已经成功使用 GitHub Pages ,然后去leancloud 官网注册一个用户并登录
第二步,创建新应用:应用名称可以随意填写,计价方案选择开发版
,然后点击创建
第三步,创建class:名字为Counter
,其他都保持默认值即可
第四步,为Counter
添加列:默认会有四个列字段,不要改动。自己选择添加列
,然后依次添加三个列,分别是url
(String 类型),time
(Number 类型),title
(String 类型)
最后,添加网址白名单:左侧的设置
栏目,点击安全中心
,在Web 安全域名
处填写自己博客网站的域名
模板文件修改
首先,打开index.html
,在文中合适位置添加以下代码:
浏览量: <span id="{{ post.url }}" class="leancloud_visitors" data-flag-title="{{ post.title }}"> - </span>次.
同时根据需求也可将此代码加入到post.html
的合适位置
然后,再分别在以上两个文件中加入 JavaScript 代码来控制实现功能:
<!-- 同时兼容http与https -->
<script src="//cdn1.lncld.net/static/js/2.5.0/av-min.js"></script>
<script>
// 第一个参数是appid,第二个参数是appkey,此处的只是示例
AV.initialize("gQJjjB93fxTAN0W6cmFdlOrW-gzGzoHsz", "IcwsNtdTDwM9gdkJfLNJKcck");
// 自己创建的Class的名字
var name='Counter';
function createRecord(Counter){
// 设置 ACL
var acl = new AV.ACL();
acl.setPublicReadAccess(true);
acl.setPublicWriteAccess(true);
// 获得span的所有元素
var elements=document.getElementsByClassName('leancloud_visitors');
// 一次创建多条记录
var allcounter=[];
for (var i = 0; i < elements.length ; i++) {
// 若某span的内容不包括 '-' ,则不必创建记录
if(elements[i].textContent.indexOf('-') == -1){
continue;
}
var title = elements[i].getAttribute('data-flag-title');
var url = elements[i].id;
var newcounter = new Counter();
newcounter.setACL(acl);
newcounter.set("title", title);
newcounter.set("url", url);
newcounter.set("time", 0);
allcounter.push(newcounter);
// 顺便更新显示span为默认值0
elements[i].textContent=0;
}
AV.Object.saveAll(allcounter).then(function (todo) {
// 成功保存记录之后
console.log('创建记录成功!');
}, function (error) {
// 异常错误
console.error('创建记录失败: ' + error.message);
});
}
function showCount(Counter){
// 是否需要创建新纪录的标志(添加一篇新文章)
var flag=false;
var query = new AV.Query(name);
query.greaterThanOrEqualTo('time', 0);
query.find().then(function (results) {
// 当获取到的记录为0时置默认值
if(results.length==0){
$('.leancloud_visitors').text('-');
flag=true;
console.log('返回查询记录为空');
// 如果获取到空记录就创建新记录
createRecord(Counter);
return;
}
// 将获取到的数据设置为text
for (var i = 0; i < results.length; i++) {
var item = results[i];
var url = item.get('url');
var time = item.get('time');
var element = document.getElementById(url);
element.textContent = time;
}
// 当某个span含有默认值时说明需要创建记录
if($('.leancloud_visitors').text().indexOf("-") != -1){
flag=true;
}
// 当获取的记录数与span个数不吻合时
if(results.length != $('.leancloud_visitors').length){
flag=true;
}
if(flag){
createRecord(Counter);
}
}, function (error) {
console.log('query error:'+error.message);
});
}
$(function() {
var Counter = AV.Object.extend(name);
showCount(Counter);
});
</script>
其中,appid
和appkey
可以在 leancloud 网站的设置的应用Key
处找到并粘贴
最后,等待修改生效即可。如果没有意外的话,这里将会看到如下结果:
写在最后
这个阅读量统计的功能本身实现并不难,并不需要多么复杂的逻辑和 JavaScript 代码,我原本是打算使用自己的服务器创建一系列的接口并使用数据库来保存这些信息的。后来考虑到我的服务器可能没那么稳定,以及 leancloud 的免费个人开发版的接口调用次数限制对我这个超级冷清的博客来说已经足够了,最重要的大概是我太懒了吧,不想自己再实现一套接口,就这样吧,希望能对遇到此问题的朋友以帮助
利用Github Pages创建的Jekyll模板个人博客添加阅读量统计功能的更多相关文章
- 利用Github和Hexo搭建独立的个人博客--基础篇
利用Github和Hexo搭建独立的个人博客--基础篇 摘要:本文主要参考了使用hexo和Github上创建自己的博客.如何搭建一个独立博客--简明Github Pages与Hexo教程和使用GitH ...
- 利用github webhook 结合openresty自动更新静态博客
使用hexo在github pages上弄了一个静态博客,后来觉得访问有点慢,于是放到自己vps上. 对于静态博客的部署非常简单,本来就是html,js,css等静态文件,只要nginx上配置下目录就 ...
- 利用github pages创建简单的网站
github.com 作为最流行的源代码管理工具已经风靡全球,同时在依托于github也衍生出了各种各样的应用,比如可以利用github搭建博客系统等等. 先换个话题,我们每人手头都或多或少有些&qu ...
- github pages + Hexo + 域名绑定搭建个人博客
环境 Windows 10(64 位) Git-2.7.4-64-bit node-v4.4.7-x64 如果上述软件已经安装的,跳过,没有安装的下载安装. 1,git下载安装(https://git ...
- Octopress创建GitHub Pages——基于代码托管的静态博客
Github Pages是静态网页来的,官方也半认可了它的博客用途,代码挂在github上,随时都可以更改,算是不错的一种尝试,因为它是静态的,所以在表现上会自由得多,但是,同样因为它是静态的,管理上 ...
- 利用GitHub和Hexo打造免费的个人博客
每个程序猿都需要一个个人博客,目前广泛出现在大家视野里的有CSDN.博客园.简书,但是他们却没有给用户一个专属的站点.一个好记的域名.你需要一个https://xxx.xxx.xxx/格式的网址,一个 ...
- 在github Pages上部署octopress搭建个人博客系统
原文链接:http://caiqinghua.github.io/blog/2013/08/26/deploy-octopress-to-github-pages/ 引子 上一篇博客已经说了为什么要搭 ...
- github pages + Hexo + 域名绑定搭建个人博客增强版
概述 前面我们用github pages + Hexo 搭建了一个简单版的个人博客系统,但是里面的内容单调,很多功能不够完善,所以我们需要对yelle 的主题进行优化和完善.基本搭建请访问:http: ...
- 博客Hexo + github pages + 阿里云绑定域名搭建个人博客
申请域名 万网购买的域名,地址:https://wanwang.aliyun.com/domain/com?spm=5176.8142029.388261.137.LoKzy7 控制台进行解析 控制台 ...
随机推荐
- 项目集成dubbo
dubbo 用户指南: http://dubbo.io/User+Guide-zh.htm 开发指南:http://dubbo.io/Developer+Guide-zh.htm#DeveloperG ...
- Codility---FrogJmp
Task description A small frog wants to get to the other side of the road. The frog is currently loca ...
- Oracle数据库备份和恢复的基本命令
Oracle数据库备份与恢复基本命令 1. 获取帮助 $ exp help=y $ imp help=y 2.三种工作方式 (1)交互式方式 $ exp 然后按提示输入所需要的参数 (2)命令行方式 ...
- 【React】react学习笔记03-React组件对象的三大属性-state
今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!: 上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例: / ...
- 【HDU - 1010】Tempter of the Bone(dfs+剪枝)
Tempter of the Bone 直接上中文了 Descriptions: 暑假的时候,小明和朋友去迷宫中寻宝.然而,当他拿到宝贝时,迷宫开始剧烈震动,他感到地面正在下沉,他们意识到这是一个陷阱 ...
- 我是这么学习Selenium元素定位操作的
写在前面 做web自动化测试都有体会,本质也就是通过操作页面元素对象来模拟用户操作行为,那么首先我们先找到这些元素对象,然后才能进行一系列操作. 我们得先告诉自动化工具或者说代码要操作那个元素,毕竟代 ...
- vue中修改子组件样式
一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...
- 02(b)多元无约束优化问题-最速下降法
此部分内容接02(a)多元无约束优化问题的内容! 第一类:最速下降法(Steepest descent method) \[f({{\mathbf{x}}_{k}}+\mathbf{\delta }) ...
- 客户端持久化数据库---indexedDB使用
_ 阅读目录 一:什么是indexedDB数据库? 二:IndexedDB数据库操作 2.1 打开或创建数据库 2.2 创建对象仓库(或叫创建表) 2.3 创建索引 2.4 新增数据 2.5 读取数据 ...
- Linux命令学习-tar命令
Linux中,tar命令的全称是tape archive,主要作用是压缩和解压文件. 参数说明: -c 创建新的压缩档案 -x 解压档案 -t 列出压缩档案的内容 -z 使用gzip来解压和压缩,文件 ...