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 开发规范要求(图文并茂)
Jun 11 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
(开源)微信小程序+mqtt,esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
You might like
Smarty安装配置方法
2008/04/10 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
python通过smpt发送邮件的方法
2015/04/30 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python Requests安装与简单运用
2016/04/07 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书