Next主题常用信息设置（三）

本篇文章介绍在Hexo框架下的Next主题中集成网站访问量插件（不蒜子），集成顶部加载条以实现加载loading状态以及设置站内搜索功能。

一、前言

在该系列的前两篇文章，即Next主题常用信息设置（一）、Next主题常用信息设置（二）中介绍了很多Next主题的自定义功能。本篇文章也是该系列的最后一篇文章了，将分享如何引入访问量统计功能、顶部加载条功能和站内搜索功能。

二、实现访问量统计功能

访问量统计功能，我们借助不蒜子脚本来实现。不蒜子的设置也相当简单，仅需一行脚本加一行标签即可。

1.启用不蒜子计数功能

打开主题配置文件，修改以下字段：

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: 访客数 <i class="fa fa-user"></i>
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 浏览数 <i class="fa fa-eye"></i>
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: 阅读数 <i class="fa fa-eye"></i>
  page_pv_footer: 次

，然后再打开blog\themes\next\layout\_third-party\analytics\busuanzi-counter.swig文件，将<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>修改为：

1	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

即可启用不蒜子计数。效果如下图所示：

其中每个子项的*_header和*_footer部分可以自定义，代表访问数字之前和之后的内容设置。

2.字段含义

不蒜子的计数方式有三种，即site_uv、site_pv、page_pv。三种方式的区别如下所示：

site_uv：单个用户连续点击n篇文章，只记录1次访客数，可用来展示访客数量。
site_pv: 单个用户连续点击n篇文章，记录n次访问量，可用来展示网页浏览数。
page_pv：单个用户点击1篇文章，本篇文章记录1次阅读量，可用来展示每篇文章的访问量。

三、实现顶部加载条功能

当进入页面的时候，有一个适当的loading状态展示给用户，给到访问者一个反馈，能提高浏览体验。

打开主题配置文件，将pace字段设置为true，然后选择一个你喜欢的主题即可，如下所示：

# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
pace_theme: pace-theme-mac-osx

您可以挨个查看各个主题的加载效果，然后选择一个您喜欢的并应用就好了。

三、设置站内搜索功能

当网站内的文章数量变得越来越多的时候，有一个站内搜索功能对用户而言是十分得方便的。站内搜索功能请访问我的另一篇文章：为Hexo博客添加站内搜索功能。

四、设置note样式

Next拥有几种内置标签，可以方便的进行格式设置，其中Note就是其中之一，其为Bootstrap Callout。这些样式也是来源于BootStrap。其使用方式如下图所示：其中，className可以是以下字段之一：

default，默认样式
primary，普通样式
success，成功状态信息显示
info，告知或通知类信息显示
warning，警告类信息
danger，错误或危险操作

设置是否显示图标和样式效果

打开主题配置文件，修改以下代码：

note:
  style: simple
  icons: true
  border_radius: 3

其中style字段表示显示的样式，有simple、modern、flat和disabled可供选择，一般选择simple和modern即可。icons: true表示开启图标。下图是我上述设置下的效果：

没有设置样式

这是默认样式

这是普通样式

这是采用success的样式

这是采用info的样式

这是采用warning的样式

这是采用danger的样式

五、总结

本文分享了在Next主题中引入网站访问量功能、实现顶部加载条功能以及修改Note Tag的显示效果。至此，关于Next主题的设置就告一段落了。当然，关于Next主题，还有很多很多的设置并没有提及，后面有机会的话，我再向大家分享哦。

我的前端后花园