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 isEmptyObject判断是否为空对象的函数
Feb 14 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 Javascript
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
(开源)微信小程序+mqtt,esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
You might like
收集的php编写大型网站问题集
2007/03/06 PHP
php实现单链表的实例代码
2013/03/22 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
初识Laravel
2014/10/30 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
canvas实现钟表效果
2017/02/13 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
React优化子组件render的使用
2019/05/12 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python输出指定月份日历的方法
2015/04/23 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
小学生获奖感言范文
2014/02/02 职场文书
《阳光》教学反思
2014/02/23 职场文书
说明书怎么写
2014/05/06 职场文书
单位授权委托书范本
2014/09/26 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers