搭建自己的技术博客系列(五)hexo博客接入busuanzi插件,展示访问量和网站运行时间

船火儿
• 阅读 2508

busuanzi计数脚本

搭建自己的技术博客系列(五)hexo博客接入busuanzi插件,展示访问量和网站运行时间

busuanzi官方指引

一、安装脚本(必选)

要使用不蒜子必须在页面中引入busuanzi.js,目前最新版如下。

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
不蒜子可以给任何类型的个人站点使用,如果你是用的hexo,打开themes/你的主题/layout/_partial/footer.ejs添加上述脚本即可,当然你也可以添加到 header 中。

二、安装标签(可选)

只需要复制相应的html标签到你的网站要显示访问量的位置即可。您可以随意更改不蒜子标签为自己喜欢的显示效果,内容参考第三部分扩展开发。根据你要显示内容的不同,这分几种情况。

1、显示站点总访问量
要显示站点总访问量,复制以下代码添加到你需要显示的位置。有两种算法可选:

算法a:pv的方式,单个用户连续点击n篇文章,记录n次访问量。

<span id="busuanzi_container_site_pv">

本站总访问量<span id="busuanzi_value_site_pv"></span>次

</span>
算法b:uv的方式,单个用户连续点击n篇文章,只记录1次访客数。

<span id="busuanzi_container_site_uv">
本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>
如果你是用的hexo,打开themes/你的主题/layout/_partial/footer.ejs添加即可。

实例效果参考:

http://liam0205.me
http://gameknife.github.io
http://read.mobi
http://pgqlife.info
http://sdxy0506.github.io
http://www.gcrimson.com
http://libk.net
http://ztyoung.me
http://blog.itmyhome.com
2、显示单页面访问量
要显示每篇文章的访问量,复制以下代码添加到你需要显示的位置。

算法:pv的方式,单个用户点击1篇文章,本篇文章记录1次阅读量。

<span id="busuanzi_container_page_pv">
本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>
代码中文字是可以修改的,只要保留id正确即可。

实例效果参考:

http://dbarobin.com/2015/04/1...
http://blog.jamespan.me/2015/...
http://cubernet.cn/blog/optim...
注意:不蒜子为保持极简,暂不支持在站点文章摘要列表中(如首页)逐个显示每篇文章的阅读次数,如果您非常需要这一功能,可以留言。根据需要程度再考虑开发相应的功能。

3、显示站点总访问量和单页面访问量
你懂的吧,上面两种标签代码都安装。

实例效果参考:

http://cubernet.cn/blog/swift-1
http://lvzejun.cn/2015/03/31/...
http://www.lvzejun.cn/2015/04...

我的配置

1、配置是否开启不蒜子访问量统计功能

在themes/icarus/_config.yml添加属性

是否开启访问量统计功能(不蒜子)

busuanzi:
 enable: true

2、引入不蒜子并添加站点访问量

在themes/icarus/layout/footer.ejs末尾添加如下代码

<% if (theme.busuanzi && theme.busuanzi.enable){ %>
        <!-- 不蒜子统计 -->
        <span id="busuanzi_container_site_pv">
                本站总访问量<span id="busuanzi_value_site_pv"></span>次
        </span>
        <span class="post-meta-divider">|</span>
        <span id="busuanzi_container_site_uv" style='display:none'>
                本站访客数<span id="busuanzi_value_site_uv"></span>人
        </span>
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <% } %>

3、添加文章访问量

在themes/icarus/layout/common/article.ejs开头添加如下代码
事实上,这段代码我并不确定是否能用

搭建自己的技术博客系列(五)hexo博客接入busuanzi插件,展示访问量和网站运行时间
由于icarus主题的配置比较特殊,有些配置项我也不太确定,于是都配置了上去
搭建自己的技术博客系列(五)hexo博客接入busuanzi插件,展示访问量和网站运行时间

网站上线时间展示

搭建自己的技术博客系列(五)hexo博客接入busuanzi插件,展示访问量和网站运行时间

效果展示

看看我博客最下方的展示效果吧:how2playlife.com
搭建自己的技术博客系列(五)hexo博客接入busuanzi插件,展示访问量和网站运行时间

点赞
收藏
评论区
推荐文章
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
冴羽 冴羽
4年前
VuePress 博客优化之 last updated 最后更新时间如何设置
前言在中,我们使用VuePress搭建了一个博客,但是浏览最终搭建的站点:,我们会发现,在每篇文章的底部,并没有像VuePress官方文档那样,出现最后更新的时间:这篇我们来探究下如何实现最后更新时间。官方自带查阅VuePress的,我们可以知道,VuePress自带显示最后更新时间的插件,在默认主题下,无需安装本插件,因为VuePre
晴空闲云 晴空闲云
4年前
网页引入svg图片的4种方式
web应用开发使用svg图片,总结了下,可以有如下4种方式:1.直接插入页面。2.img标签引入。3.css引入。4.object标签引入。1.直接插入页面在html页面,可以直接使用svg标签。html运行效果:2.img标签引入除了在网页里直接写svg标签,也可以通过img引入,就像引入j
Wesley13 Wesley13
4年前
vscode+typescript开发环境搭建
好久没写博客了,趁着端午节期间研究了下typescript,把环境搭建方法和步骤记录下来。貌似现阶段只有vscode对typescript支持的最好,可以直接debugts脚本!貌似webstorm也只是能debug编译后的js,无法直接debugts脚本。1.npm要使用最新版本,可以在官网下载并用符号链接配置到/usr/bin/npm下
Stella981 Stella981
4年前
Github Pages+Gridea搭建个人博客
1概述GithubPages可以用来托管个人网站,静态的,便于用来实现博客,可以在一个仓库的settings中开启:!在这里插入图片描述(https://imgblog.csdnimg.cn/2020031520214830.png)Gridea是一个静态博客写作客户端,所有文件都在本地,没有数据库,实现简单,支持Markdo
Stella981 Stella981
4年前
Redis未授权访问漏洞复现学习
0x00前言前段时间看到想复现学习一下,然后就忘了越临近考试越不想复习!在这里插入图片描述(https://oscimg.oschina.net/oscnet/ec73a943a3d9e18184946ee4c4ca290e14f.jpg)常见的未授权访问漏洞Redis未授权访问漏洞MongoDB未授权访问漏
Stella981 Stella981
4年前
Alamofire4.x开源代码分析(一)使用方法
!输入图片说明(https://static.oschina.net/uploads/img/201706/28090437_aIT1.png"在这里输入图片标题")本着了解框架的实现思路和学习Swift的目的开启本系列的博客.本系列参考Alamofire(https://www.oschina.net/action/GoToLink?urlh
Stella981 Stella981
4年前
SpringBoot第三谈
!在这里插入图片描述(https://static.oschina.net/uploads/img/202006/30142500_OL4H.png)本人是一名即将进入大三的物联网工程专业的学生,写博客即是为了记录自己的学习历程,又希望能够帮助到很多和自己一样处于起步阶段的萌新。临渊羡鱼,不如退而结网。一起加油!博客主页:h
Wesley13 Wesley13
4年前
mysql查询每个学生的各科成绩,以及总分和平均分
今天看一个mysql教程,看到一个例子,感觉里面的解决方案不是很合理。问题如下:有学生表:!在这里插入图片描述(https://oscimg.oschina.net/oscnet/07b001b0c6cb7e0038a9299e768fc00a0d3.png)成绩表:!在这里插入图片描述(https://oscimg.o
Easter79 Easter79
4年前
SpringBoot第三谈
!在这里插入图片描述(https://static.oschina.net/uploads/img/202006/30142500_OL4H.png)本人是一名即将进入大三的物联网工程专业的学生,写博客即是为了记录自己的学习历程,又希望能够帮助到很多和自己一样处于起步阶段的萌新。临渊羡鱼,不如退而结网。一起加油!博客主页:h
船火儿
船火儿
Lv1
你若化成风,我便化成雨,爱所在眉间,似水往昔流年。
文章
6
粉丝
0
获赞
0