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

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/14/operation-and-maintenance-engineer-tips
http://blog.jamespan.me/2015/05/06/mvn-incremental-compilation
http://cubernet.cn/blog/optimization-3
注意:不蒜子为保持极简,暂不支持在站点文章摘要列表中(如首页)逐个显示每篇文章的阅读次数,如果您非常需要这一功能,可以留言。根据需要程度再考虑开发相应的功能。

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

实例效果参考:

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

我的配置

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开头添加如下代码
事实上,这段代码我并不确定是否能用

由于icarus主题的配置比较特殊,有些配置项我也不太确定,于是都配置了上去

网站上线时间展示

效果展示

看看我博客最下方的展示效果吧:how2playlife.com

原文地址:https://blog.51cto.com/14006572/2437988

时间: 2024-10-10 10:56:16

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

从零开始搭建django前后端分离项目 系列五(实战之excel流式导出)

项目中有一处功能需求是:需要在历史数据查询页面进行查询字段的选择,然后由后台数据库动态生成对应的excel表格并下载到本地. 如果文件较小,解决办法是先将要传送的内容全生成在内存中,然后再一次性传入Response对象中: 如果文件较大时,我们可以考虑向HttpResponse传递一个迭代器,流式的向客户端传递数据. view.py视图 @csrf_exempt def exportData(request): format = request.GET.get('format') pk = re

hexo零基础搭建博客系列(一)

关于其他搭建 hexo4快速搭建博客(二)更换主题 hexo4快速搭建博客(三)美化 很全面 收集很多资料 hexo4快速搭建博客(四)写作技巧包含图床和自动变图床的插件 hexo4搭建博客系列(五)优化博客(无坑) 部署到阿里云 hexo4搭建博客系列(六)百度,必应,谷歌收录(无坑) 搭建一个博客不难,但是网上资料好多坑.可能我有些会写错,请在评论指出.但是有经过测试的.我用的版本是 hexo4.0 + NexT7.6版本. 我的个人博客 有阿里云服务器就可以部署上去,没有也可以用githu

Hexo 博客 之 腾讯云部署过程

写在前面 Hexo 博客搭好了有差不多两周时间了,这期间走了很多弯路,跳了很多坑.一些坑自己 bing 到了答案,找到了解决方法,一些坑则是自己摸索出来的解决方法.现在准备写几篇关于搭建流程.搭建过程中遇到的问题和解决方法.俗话说得好,好记性不如烂键盘嘛. 暂时准备写三篇关于 Hexo 博客搭建的博文: 关于 Hexo 博客 腾讯云部署过程 关于 Hexo 博客 NexT 主题的美化插件设置 点击这里 关于 Hexo 博客 添加域名映射和 https 点击这里 本文介绍 本博客是关于 Hexo

将hexo博客同时部署发布托管到github和coding

title: 将hexo博客同时部署发布托管到github和coding date: 2018-08-30 00:12:11 tags: - 博客 - git - coding - hexo - 博客优化 categories: 搭建博客 --- 前言 之前我们把hexo托管在github,但是毕竟github是国外的,访问速度上还是有点慢,所以想也部署一套在国内的托管平台,之前查资料听说gitcafe,但是听说gitcafe已经被coding收购了,所以就决定部署到coding. 查询了多方资

搭建自己的技术博客系列(二)把 Hexo 博客部署到 GitHub 上

1.在GitHub上建一个新仓库 ? 2.配置Git的SSH KEY 生成SSH添加到GitHub 回到你的git bash中, git config --global user.name "yourname" git config --global user.email "youremail" 这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱.这样GitHub才能知道你是不是对应它的账户. 可以用以下两条,检查一下你有没

搭建自己的技术博客系列(三)让你的博客拥有评论功能!

给大家介绍一个博客评论神器,Valine. 本来hexo博客用的是gitment,我也非常喜欢,看着逼格就超高呀.无奈我用着bug略多,而且毕竟有github账户的小伙伴似乎并不多.于是我就忍痛准备换评论系统.然后在最近刚刚加入的hexo博客群里,看见了一个神器.也就是本篇主人公--Valine.js. 具体配置就见如下的文章吧.它的定义-- 一款极简的无后端评论系统. 在多说和网易云跟帖相继倒闭的情况下,这个简直是救人一命胜造七级浮屠呀. Valine -- 一款极简的评论系统 Valine官

JavaScript 系列博客(五)

JavaScript 系列博客(五) 前言 本篇博客学习 js 选择器来控制 css 和 html.使用事件(钩子函数)来处理事件完成后完成指定功能以及js 事件控制页面内容. js 选择器 在学习 js 选择器前需要了解几个概念. 节点(一):在文档(document)中出现的所有内容都是 document 中的节点. 节点(二):标签节点(元素 element) | 注释节点 | 文本节点 | <!doctype>节点. js 选择器是将 js 与 html 建立起连接的桥梁,就好比 cs

使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理

原文:使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理 摘要 通过对博客文章的管理,实现外键操作. 目录[-] 八.博客文章管理 1.查看文章 2.添加博客? ? ? ? 3.查看博文详情 4.修改博客内容 5.删除博客文章 九.尾声? ? ? ?? 1.如何部署 2.进一步的学习 3.ENDING 转载请注明出处:Gaussic(一个致力于AI研究却不得不兼顾项目的研究生) . 注:在阅读本文前,请先阅读: 使用IntelliJ IDEA开发SpringMVC网站(一

搭建hexo博客

安装Git 下载 msysgit 并执行即可完成安装. 安装Node.js 在 Windows 环境下安装 Node.js 非常简单,仅须下载安装文件并执行即可完成安装. 安装hexo 利用 npm 命令即可安装.(在任意位置点击鼠标右键,选择Git bash) npm install -g hexo 安装完成后,在你喜爱的文件夹下(如E:\hexo),执行以下指令(在H:\hexo内点击鼠标右键,选择Git bash),Hexo 即会自动在目标文件夹建立网站所需要的所有文件.创建hexo文件夹