JS一分钟在github+Jekyll的博客中添加访问量功能的实现

目录
  • 一分钟在github+Jekyll博客中添加访问量功能
  • 一、Jekll是什么
    • 1. Jekll是软件简介
  • 二、不蒜子
    • 1. 不蒜子简介：
    • 2. 官网入口
    • 3. 使用方法
    • 4. 个性化
  • 总结

一分钟在github+Jekyll博客中添加访问量功能

前言

不会还有小伙伴不知道，github+Jekll是可以搭建自己的个人博客吧？？？
如果大家觉得csdn的blog不够高大上，或者私密性不好，不能抒发一些情感，那么可以搭一个github的博客，只需一小时即可，详见大佬的博文：

一小时搭建github博客：https://www.jb51.net/article/138946.htm

另附我的个人博客链接: 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文件的末尾，效果如下：

这就出现了我的博客访问量为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

效果如下：

总结

是不是很不错! 如果有帮助请点赞，收藏吧！
欢迎来看我的个人blog：https://dongguanting.github.io/.

到此这篇关于JS一分钟在github+Jekyll的博客中添加访问量功能的实现的文章就介绍到这了,更多相关github+Jekyll添加访问量内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS 精确统计网站访问量的实例代码

    复制代码 代码如下: /** * vlstat 浏览器统计脚本 */var statIdName = "vlstatId";var xmlHttp;/** * 设置cookieId */function setCookie(c_name, value, expiredays) {    var exdate = new Date();    exdate.setDate(exdate.getDate() + expiredays);    document.cookie = c_nam

  • javascript精确统计网站访问量实例代码

    网站一般都有访问量统计工具,比较高效实用的工具多种多样,并且非常的精确.实用javascript也可以简单的实现此功能,尽管没有网络上常用的精确,不过的确也实现了一定的功能,下面就是一段代码实例,感兴趣的朋友可以参考一下: <script type="text/javascript"> /** * vlstat 浏览器统计脚本 */ var statIdName = "vlstatId"; var xmlHttp; /** * 设置cookieId */

  • javascript实现的网站访问量统计代码

    网站一般都有访问量统计工具,比较高效实用的工具多种多样,并且非常的精确.实用javascript也可以简单的实现此功能,尽管没有网络上常用的精确,不过的确也实现了一定的功能,下面就是一段代码实例,感兴趣的朋友可以参考一下: 废话不多说了,直接给大家贴js代码了. <script type="text/javascript"> /** * vlstat 浏览器统计脚本 */ var statIdName = "vlstatId"; var xmlHttp;

  • JS一分钟在github+Jekyll的博客中添加访问量功能的实现

    JS一分钟在github+Jekyll的博客中添加访问量功能的实现

    目录 一分钟在github+Jekyll博客中添加访问量功能 一.Jekll是什么 1. Jekll是软件简介 二.不蒜子 1. 不蒜子简介: 2. 官网入口 3. 使用方法 4. 个性化 总结 一分钟在github+Jekyll博客中添加访问量功能 前言 不会还有小伙伴不知道,github+Jekll是可以搭建自己的个人博客吧??? 如果大家觉得csdn的blog不够高大上,或者私密性不好,不能抒发一些情感,那么可以搭一个github的博客,只需一小时即可,详见大佬的博文: 一小时搭建gith

  • PHP+Ajax实现的博客文章添加类别功能示例

    PHP+Ajax实现的博客文章添加类别功能示例

    本文实例讲述了PHP+Ajax实现的博客文章添加类别功能.分享给大家供大家参考,具体如下: 一. 代码 fun.js function saveType(typename, username){ if(typename==''){ //判断博客类别是否为空 alert('请输入类别名称!'); }else if(username==''){ //判断用户名是否为空 alert('请输入用户名!'); }else{ var xmlObj; //定义XMLHttpRequest对象 var urlD

  • 给图片在博客中添加滤镜效果

    给图片在博客中添加滤镜效果

    配合同事文章的技巧,用自己的博客来测试一下.首先插入一张测试图片: 终极技巧之图片篇:为图片添加滤镜效果 纯文字博客看上去会显得很枯燥,适当的配图能够让页面更美观,也能更好地表达自己的思想.那么如何为图片添加一些Photoshop里面才有的特殊滤镜效果呢?一张张修改图片吗?太烦琐了,更何况很多时候我们是引用网络上的图片地址,并没有对原图片的修改权限.这里有一个简单的方法,可以修改图片在博客上的显示效果.一般的博客编辑页面都有"插入图片"功能,此外还有"源代码编辑"模

  • 利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能（六）

    利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能（六）

    看到新浪微博.百度百家等平台上都带有文章"打赏"功能,觉得很新鲜,于是也想在自己的博客中加入"打赏"功能. 当然,加入打赏功能并非是真的想要让别人打赏.因为只有那些真正能引起共鸣,发人深思,让人受益匪浅的文章才值得打赏,值得点赞. 而我的博客站仅仅是用作记录笔记,当做自己的知识库(如果能不经意间帮助别人那是再好不过了). 加入打赏功能纯粹是"觉得好玩",就是这么简单,Just have a fun!(博主喜欢折腾,看见一个酷炫的功能就想去实现它)

  • 利用JS生成博文目录及CSS定制博客

    本文实例为大家介绍了利用JS生成博文目录及CSS定制博客的方法,分享给大家供大家参考,具体内容如下 1.JS代码 想要生成目录,许多都说需要JS修改权限,那个这里就直接进入设置页面,找到下方的联系邮箱直接发去就行了,工作人员回复的还是很快的. 拿到权限之后,下面就是将编(搜)写(寻)的JS代码放在页脚HTML代码的方框内,然后点击保存就可以了.要注意目录的生成是几级标题,这一点可是很重要的.JS代码如下,基本没有变化,拷贝了原作者的写法,可以生成二级目录,分别为h2和h3,这点需要注意. 综合来

  • csdn 博客中实现运行代码功能实现

    因为没有运行功能,所以想在页面中实现运行代码功能,下面的代码是个不错的实现方法,当然你也可以任何你想实现代码运行功能的地方使用. 复制代码 代码如下: <p> <script type="text/javascript"><!-- function viewPage(html) {     var page = window.open('', '', '');     page.opener = null;     page.document.write(

  • Java实现将每日新闻添加到自己博客中

    目录 前言 why 思路 代码实现 前言 最近新整了个博客网站,同事在gitee上找的,还不错,gitee上的地址在这里:拾壹博客管理系统. 别人的业务,再好也有不满足自己的地方,所以我就拉下来源码看了看,改了些bug,其中我觉得这个需求是有人需要用到的——每日新闻推送到微信群中. 效果图如下: 每天定时凌晨5.20推送. why 在说功能之前先说说为什么要做这么件事儿,之前我是从比的微信群中将每日新闻复制到自己的群的,因为群需要互动互动,不能成为一个死群,所以我就每天手动发,偶尔有几次不发,就

  • 在博客中屏蔽垃圾留言的简单方法

    垃圾留言俗称 Spam,就是到处在留言框里发垃圾广告的那些,相信大多数人都见识过.以前使用 WordPress 的时候,因为装了防 Spam 的插件,可以屏蔽掉绝大多数的 Spam.但是自从上个月从 WordPress 迁移到新的博客平台后,第一天上线就遭遇了几个Spam,全都是国外的推广的广告什么的.博客的访问量本身就很小,如果每天都来几条 Spam,太煞风景了,手工删除也太浪费时间,而且又是自己写的小系统,也不可能有什么插件可选,只能自己想办法解决了. 看到有很多网站都是加个验证码来解决这个

  • 圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现

    圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现

    一年一度的圣诞节又到了,首先祝大家好运一串串,健康一年年,平安到永远!在这个特殊的日子里,处处洋溢着节日的气氛,空中飘落的雪花更显得浪漫!今天就教大家如何在博客中添加纷纷扬扬的下雪效果.今天,你那里下雪了吗? 首先在页面引入 jQuery 库和 jQuery.snow.js(或者使用压缩版本 jQuery.snow.min.js): 复制代码 代码如下: <script src="jquery.js"></script> <script src="

  • 用js实现博客打赏功能

    前几天在一个博客中看到有一个打赏功能.其实简单说来就是在页面中加入动态DOM节点,使用的也是简单的HTML.CSS.JS这些前端的一些简单知识.在GitHub上有开源的代码,这里稍加改造就可以用在自己的博客中了. 最简单的使用方式是在页面中加入如下JS代码: <script> window.tctipConfig = { staticPrefix: "http://static.tctip.com", buttonImageId: 1, buttonTip: "z

随机推荐