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方法的具体实现
Jul 31 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
(开源)微信小程序+mqtt,esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
You might like
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
php实现RSA加密类实例
2015/03/26 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
js css后面所带参数含义介绍
2013/08/18 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
js实现轮播图特效
2020/05/28 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python实现划词翻译
2020/04/23 Python
Python自定义简单图轴简单实例
2018/01/08 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
python 自动识别并连接串口的实现
2021/01/19 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
工程师自我评价怎么写
2013/09/19 职场文书
先进个人事迹材料
2014/01/25 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
安全教育的主题班会
2015/08/13 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书