JS一分钟在github+Jekyll的博客中添加访问量功能的实现


Posted in Javascript onApril 03, 2021

一分钟在github+Jekyll博客中添加访问量功能

前言

不会还有小伙伴不知道,github+Jekll是可以搭建自己的个人博客吧???
如果大家觉得csdn的blog不够高大上,或者私密性不好,不能抒发一些情感,那么可以搭一个github的博客,只需一小时即可,详见大佬的博文:

一小时搭建github博客:https://3water.com/article/3NTcxbMzIu

另附我的个人博客链接: https://dongguanting.github.io

如果大家觉得我搭建的不错,欢迎fork我的博客为框架。
我这篇其实是在github+jekll框架下,加入了一个浏览量统计功能,相当于大佬博客的进一步优化,这样也能让大家看到多少人浏览了自己,增添成就感。

一、Jekll是什么

1. Jekll是软件简介

Jekyll 是一个简单的免费的Blog生成工具,类似WordPress。但是和WordPress又有很大的不同,原因是jekyll只是一个生成静态网页的工具,不需要数据库支持。但是可以配合第三方服务,例如discuz。最关键的是jekyll可以免费部署在Github上,而且可以绑定自己的域名。

Jekll的快速安装指令:

gem install jekyll
jekyll new my-awesome-site
cd my-awesome-site
jekyll serve
# => Now browse to http://localhost:4000

Jekyll 具有许多的主题可以选择,也有很多插件可以安装,都只需要在文件_config.yml中写明即可,但是访问量统计的相关插件实在少,另一个大佬说可以通过leancloud的api实现该功能,但是注册十分繁琐,总是登不上,所以我就找到了一个十分简便的方法,那就是使用不蒜子增加 Jekyll 博客访问量统计。

二、不蒜子

1. 不蒜子简介:

“不蒜子” 是一款极简的网页计数器,可以很方便的统计博客的总访问量和访问次数。
“不蒜子” 与百度统计谷歌分析等有区别:“不蒜子” 可直接将访问次数显示在您在网页上(也可不显示);对于已经上线一段时间的网站,“不蒜子” 允许您初始化首次数据

2. 官网入口

链接: http://busuanzi.ibruce.info/.

3. 使用方法

首先,打开index.html,在文中合适位置添加以下代码:

<span id="busuanzi_container_site_pv"> 
	本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

两行代码,搞定计数!!!
我直接放在index.html文件的末尾,效果如下:

JS一分钟在github+Jekyll的博客中添加访问量功能的实现

这就出现了我的博客访问量为2,是不是非常简单。
同时根据需求也可将此代码加入到post.html的合适位置,这可以实现分页的访问量。

4. 个性化

也可以更加美观,完整一点:

本站总访问量<span id="busuanzi_value_site_pv"></span>次
本站访客数<span id="busuanzi_value_site_uv"></span>人次
本文总阅读量<span id="busuanzi_value_page_pv"></span>次

或者个性化一些(我就用的底下这个):

Total <span id="busuanzi_value_site_pv"></span> views.
您是xxx的第<span id="busuanzi_value_site_uv"></span>个小伙伴
<span id="busuanzi_value_page_pv"></span> Hits

效果如下:

JS一分钟在github+Jekyll的博客中添加访问量功能的实现

总结

是不是很不错! 如果有帮助请点赞,收藏吧!
欢迎来看我的个人blog:https://dongguanting.github.io

到此这篇关于JS一分钟在github+Jekyll的博客中添加访问量功能的实现的文章就介绍到这了,更多相关github+Jekyll添加访问量内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js实现二代身份证号码验证详解
Nov 20 Javascript
js对象基础实例分析
Jan 13 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
(开源)微信小程序+mqtt,esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
You might like
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
Javascript模板技术
2007/04/27 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
python中list循环语句用法实例
2014/11/10 Python
python:socket传输大文件示例
2017/01/18 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
Python wordcloud库安装方法总结
2020/12/31 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
英文自荐信常用句子
2014/03/26 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
离职感谢信怎么写
2015/01/22 职场文书
求职自我评价怎么写
2015/03/09 职场文书
市场督导岗位职责
2015/04/10 职场文书
python可视化之颜色映射详解
2021/09/15 Python