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 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
jQuery对象和DOM对象相互转化
Apr 24 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
(开源)微信小程序+mqtt,esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
You might like
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
cache_lite试用
2007/02/14 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python用插值法绘制平滑曲线
2021/02/19 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
卫校毕业生自我鉴定
2013/10/31 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
婚内房产协议书范本
2014/10/02 职场文书
单位作风建设自查报告
2014/10/23 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
redis数据一致性的实现示例
2022/03/18 Redis
配置Kubernetes外网访问集群
2022/03/31 Servers