之前说了 next 主题的优化和接入评论系统。让我们完成了自己所需的页面风格和排版,也可让访问用户在每篇博文评论,完成博主和访问用户的交互。

本章我们继续讲解其他重要功能。

既然是一个网站,那么我们就需要收集网站访问数据,提供流量趋势、来源分析、转化跟踪、页面热力图、访问流等多种统计分析服务;这时我们就需要引入——百度统计。

上述的统计只能在百度统计中查看,但我想在自己的网站页面直接就能看一些简单的数据。比如:网站访问人数,访问次数,每篇文章访问次数,网站总字数,每篇文章字数,阅读时长估算等。那么我们就可以引入不蒜子统计,字数统计,阅读次数统计了。具体那就参见下文了。

百度统计

需要在百度统计进行注册,并拿到脚本的 ID。

之后在主题配置文件中修改。

 [root@iZ28xbsfvc4Z next]# pwd  # 主题目录
/app/softinsall/hexo/themes/next
[root@iZ28xbsfvc4Z next]# vim _config.yml
# Baidu Analytics ID
baidu_analytics: 983XXXXXXXXXXXXXXXXXXXXXXXXXX2

访问报告查看

过半小时或一小时左右可在百度统计查看报告。

不蒜子统计

编辑主题配置文件中的 busuanzi_count 的配置项。

 [root@iZ28xbsfvc4Z next]# pwd  # 主题目录
/app/softinsall/hexo/themes/next
[root@iZ28xbsfvc4Z next]# vim _config.yml
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次
# custom pv span for the whole site
site_pv: true
site_pv_header: 本站总访问量
site_pv_footer: 次
# custom pv span for one page only
# 每篇博文阅读次数,使用 leancloud 统计。原因是在「首页」中,leancloud 统计也能看阅读次数,而不蒜子则不行。
page_pv: false
page_pv_header: 本文总阅读量
page_pv_footer: 次

不蒜子域名修改

因七牛强制过期『dn-lbstatics.qbox.me』域名,与客服沟通无果,只能更换域名到『busuanzi.ibruce.info』!

修改如下:

 [root@iZ28xbsfvc4Z next]# pwd  # 主题目录
/app/softinsall/hexo/themes/next
[root@iZ28xbsfvc4Z next]# vim layout/_third-party/analytics/busuanzi-counter.swig
{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
………………

浏览器访问

页面底部

阅读次数统计

在 LeanCloud 中创建 Class

在之前的评论系统中,已经讲解了 LeanCloud 账号的创建、应用创建、获取App ID 和 App Key 已经安全加固。这里仅对阅读次数的 Class 创建做讲解。

数据栏中,_开头的都是系统预定义好的表。

为了区分,新建一张表来保存数据。为了保证对NexT主题的修改兼容,新建Class名字必须为Counter。 为了避免权限问题导致 次数统计显示不正常,选择无限制,创建Class。

主题配置修改

主题配置文件中修改:

 [root@iZ28xbsfvc4Z next]# pwd  # 主题目录
/app/softinsall/hexo/themes/next
[root@iZ28xbsfvc4Z next]# vim _config.yml
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: h7YmXXXXXXXXXXXXXX
app_key: VhTGXXXXXXXXXX

浏览器访问

文章标题

字数统计

用于统计文章的字数以及分析出阅读时间。

安装 wordcount 插件

需要安装的插件

 [root@iZ28xbsfvc4Z hexo]# pwd  # 站点目录
/app/softinsall/hexo
[root@iZ28xbsfvc4Z hexo]# npm install hexo-wordcount --save

主题配置修改

主题配置文件中修改。

 [root@iZ28xbsfvc4Z next]# pwd  # 主题目录
/app/softinsall/hexo/themes/next
[root@iZ28xbsfvc4Z next]# vim _config.yml
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true # 文本显示
wordcount: true # 单篇 字数统计
min2read: true # 单篇 阅读时长
totalcount: true # 网站 字数统计
# 该post_wordcount的所有设置另起一行显示
separated_meta: true
[root@iZ28xbsfvc4Z next]# vim languages/zh-Hans.yml # 从英文改为中文
totalcount: 本站总字数

浏览器访问

文章标题

页面底部

推荐阅读

Linux下使用 github+hexo 搭建个人博客01-hexo搭建

Linux下使用 github+hexo 搭建个人博客02-hexo部署到Github Pages

Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

Linux下使用 github+hexo 搭建个人博客04-next主题优化

Linux下使用 github+hexo 搭建个人博客05-next主题接入评论系统

Linux下使用 github+hexo 搭建个人博客06-next主题接入数据统计

Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理


Linux下使用 github+hexo 搭建个人博客06-next主题接入数据统计的更多相关文章

  1. Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理

    这是搭建个人博客系统系列文章的最后一篇,如果你是从第一篇一路跟下来的,那么恭喜你,即将完成整个博客网站的搭建.OK,话不多说,开始我们的收官之战. 不知你想过没有,如果我们的文章少,一眼看完整个目录, ...

  2. Linux下使用 github+hexo 搭建个人博客05-next主题接入评论系统

    静态站点拥有一定的局限性,因此我们需要借助于第三方服务来扩展我们站点的功能. 而评论系统是最常用于和网站用户交流的,因此本章讲解在 next 主题,如何接入评论系统. 参考网站:Next 使用文档,第 ...

  3. Linux下使用 github+hexo 搭建个人博客04-next主题优化

    上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功 ...

  4. Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

    上两张文章,我们说了 hexo 部署.主题的切换.博文的创建.MarkDown 简单使用和 hexo 部署到 GitHub Pages. 也说了我们会使用 next 主题做为我们后期博客的使用和维护. ...

  5. Linux下使用 github+hexo 搭建个人博客02-hexo部署到Github Pages

    之前的这篇文章<Linux下使用 github+hexo 搭建个人博客01-hexo搭建>,相信大家都知道怎么搭建 hexo ,怎么切换主题,并且完成了一篇博文的创建,以及 MarkDow ...

  6. Linux下使用 github+hexo 搭建个人博客01-hexo搭建

    为什么要搭建自己的博客系统? 原因有好几个吧,归类如下:1.自己搭建博客系统很有成就感,可以自己选定页面风格和页面排版: 2.自己搭建博客系统可以根据自己的需要添加各种插件功能,因此整体上比网上的第三 ...

  7. Windows下通过GitHub+Hexo搭建个人博客的步骤

    Windows下通过GitHub+Hexo搭建个人博客的步骤  https://blog.csdn.net/namechenfl/article/details/90442312 https://bl ...

  8. Mac下使用GitHub+Hexo搭建个人博客

    首发链接 开始之前需要在电脑上安装好Git和node.js,Mac上可以使用Homebrew命令行工具来安装Git和node.js 安装Homebrew 在命令行工具输入以下命令,如果已经安装过Hom ...

  9. Github+Hexo,搭建专有博客

    前言 记得从大二开始,就一直想搭个专属网站,当时使劲抠页面[前端页面是从QQ空间抠的,现在想抠估计没这么容易了],写代码,忙活半天才把程序弄好. 可惜最终项目还是没上线,因为当时有两问题绕不开 需要购 ...

随机推荐

  1. Docker + WordPress搭建个人博客

    WordPress是目前非常受欢迎的开源博客系统,今天使用Docker + WordPress搭建个人博客,整个过程非常丝滑. 搭博客先要准备域名和服务器,昨天在阿里云买了个.top的域名花了5块钱( ...

  2. FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed

    The header and footer in the tweet embed example have child items that could be arranged as rows usi ...

  3. MySQL 字符串分隔成行&子串统计

    利用help_topic表把字符串转换成行(分隔符号',') ),) as `id` FROM mysql.`help_topic`; 统计字符串每个子串出现次数(分隔符号',') ),) AS `s ...

  4. leaflet-webpack 入门开发系列五地图卷帘(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  5. centos_redis 安装脚本

    #!/bin/bash # change to root echo "start to install build env..." sudo yum groupinstall &q ...

  6. Windows系统Git配置教程(Git配置git config)

    Windows系统Git配置教程(Git配置git config)   在很多Git配置教程中,多是安装完毕后就告诉大家要配置用户名和邮箱,但是这个配置是保存在哪里呢,配置后面的参数有什么不同呢,下面 ...

  7. web项目踩坑过程

    sql函数设计: 一开始本来是直接用Java的jdbc直接传输操作语句的.但后来学了存储过程发现存储过程可以提高不少的效率.就重构了自己对数据库的操作代码.包括:开启,查找,修改,关闭. 开启:直接使 ...

  8. 【转载】Vue.js 安装及其环境搭建

    注:最近在学习Vue,以下是环境搭配方法: ****************************************************************************** ...

  9. springboot 多环境

    springboot 多环境 --spring.profiles.active=dev 查看 Ioc 容器 PostProcessorRegistrationDelegate

  10. C# LINQ Join两个表连接,关联多个条件的写法

    1.sql语句: select * from Users u join Teachers t on u.UserID==t.TeacherID and u.Name=t.Name 2.linq写法: ...