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 相关文章推荐
写js时遇到的一些小问题
Dec 06 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
JS前端加密算法示例
Dec 22 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
(开源)微信小程序+mqtt,esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python中join和split用法实例
2015/04/14 Python
Python编码爬坑指南(必看)
2016/06/10 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
python logging添加filter教程
2019/12/24 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
研究生自荐信
2013/10/09 职场文书
普通员工辞职信
2014/01/17 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
春节随笔
2015/08/15 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
python神经网络 使用Keras构建RNN训练
2022/05/04 Python