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]点出统计器
Oct 11 Javascript
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
删除节点的jquery代码
Jan 13 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
(开源)微信小程序+mqtt,esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
You might like
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
Underscore源码分析
2015/12/30 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Python编写打字训练小程序
2019/09/26 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python压包的概念及实例详解
2021/02/17 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
国际贸易毕业生求职信范文
2014/02/21 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
竞赛口号大全
2014/06/16 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
文书工作总结(范文)
2019/07/11 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
浅谈Java父子类加载顺序
2021/08/04 Java/Android
mysql事务对效率的影响分析总结
2021/10/24 MySQL
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
HDFS免重启挂载新磁盘
2022/04/06 Servers