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 相关文章推荐
jquery remove方法应用详解
Nov 22 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
(开源)微信小程序+mqtt,esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
You might like
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python中的函数作用域
2018/05/07 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
个人自荐书
2013/12/20 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
校本研修个人总结
2015/02/28 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
酒桌上的祝酒词
2015/08/12 职场文书