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 强制设为首页的代码
Jan 31 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
(开源)微信小程序+mqtt,esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
You might like
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
JavaScript的目的分析
2007/01/05 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
什么是Smart Navigation?
2016/07/03 面试题
岗位廉洁从业承诺书
2014/03/28 职场文书
三万活动总结
2014/04/28 职场文书
企业环保标语
2014/06/10 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
保研专家推荐信范文
2015/03/25 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
详解Python中__new__方法的作用
2022/03/31 Python
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA