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 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
element中table高度自适应的实现
Oct 21 Javascript
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
(开源)微信小程序+mqtt,esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
You might like
德生PL550的电路分析
2021/03/02 无线电
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php 短链接算法收集与分析
2011/12/30 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
php获取图片信息的方法详解
2015/12/10 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
php服务器的系统详解
2019/10/12 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python扫描线填充算法详解
2020/02/19 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
机动车登记业务委托书
2014/10/08 职场文书
违纪检讨书
2015/01/27 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers