本次介绍 Hexo 博客主题 NexT 进阶配置和使用。

页面浏览进度展示

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: false

将 scrollpercent 设为 true。

若想把 top 按钮放在侧边栏，将 sidebar 设为 true。

效果（侧边栏向上的小箭头）：

还是放到文章右侧吧：

页面加载进度展示

命令窗口进入目录【themes/next/】,然后下载安装 git clone https://github.com/theme-next/theme-next-pace source/lib/pace，在主题配置文件中找到下面的设置：

# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
# For more information: https://github.com/HubSpot/pace
pace:
  enable: false
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

将 enable 设为 true 即可，theme 表示不同的样式效果。

增加网站运行时间

找到底部设置的代码【themes extlayout_partialsfooter.swig】，在后面增加如下：

显示效果：

添加显示文章摘要

在首页默认为展示很多，可以显示【阅读全文】的链接，找到主题的配置文件 _config.yml 关于此的内容：

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

可以不用设置，只需要在截断处添加 标签，如（使用了 Hexo 可以不用自己添加目录了，上面的目录应该去掉）：

渲染效果：

如果要自动添加摘要，可以安装插件 npm install hexo-auto-excerpt，然后在 package.json 中添加 "hexo-auto-excerpt": "^1.1.2" ，显示效果：

打赏设置

找到主题的配置文件 _config.yml 关于此的内容：

# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: false
  animation: false
  #comment: Donate comment here.

reward:
  #wechatpay: /images/wechatpay.png
  #alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

本次使用支付宝和微信，准备好收款图片，将其存放到 source 的目录下或某个目录下如 images，设置修改如下：

# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: true
  comment: 您的支持是我最大的动力！

reward:
  wechatpay: /images/wechatpay.jpg
  alipay: /images/alipay.jpg
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

在文章末尾出现了打赏按钮：

点击打赏按钮则会跳出设置的图片：

animation 如果设置为 true，鼠标放上去图片下面的字会动。

网站访问次数统计

将 enable 设为 true：

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

渲染效果：

换个浏览器再次访问：

次数增加了，说明功能正常，使用域名访问，次数清空了：

文章阅读数：

本地搜索

设置内容：

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: false
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

# Swiftype Search API Key
swiftype_key:

将 local_search.enable 设为 true。

npm 安装 hexo-generator-searchdb 依赖，

然后在根目录下的 _config.xml 中添加如下内容：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

这样就会产生一个搜索框，然后点击会弹出一个窗口，文本框输入关键字即可实现搜索：

实现原理主要是 hexo-generator-searchdb 会预先生成一个文本库 search.xml，如：

本地搜索是，NexT就会直接使用 js 来调用这个文件，这样就实现了静态网站的本地搜索。

图片弹出

github 地址：https://github.com/theme-next/theme-next-fancybox

使用命令将远程代码下载下来：git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox，速度可能会很慢，可从本站下载：http://www.kungge.com/assist/theme-next-fancybox-master.zip

主题配置文件 fancybox: true。

点击图片即可弹出来，显示效果：

添加评论

目前hexo支持的评论系统很多，next 主题自带了 gitalk，需要配置下，但是需要 github 账号登录，很麻烦，网上也有人反馈国内会报网络错误，翻墙才能使用。

本次添加 Valine，比较简洁好用，官网：https://valine.js.org/

分三个版本：

个人直接使用开发版即可，一般够用。

next 本身也集成了 valine。

创建应用

去注册登录，然后创建应用，创建好的应用：

点击应用进入配置：

配置 valine

打开主题配置文件，找到 valine，初始信息：

# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: false
  appid: # Your leancloud application appid
  appkey: # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

将 appid 和 appkey 填入进来

显示效果：

测试评论效果

评论一下：

修改评论头像，属性是 avatar

查看评论数据

登录 leancloud 进入应用选择存储（如本次的地址是【https://leancloud.cn/dashboard/data.html?appid=WS9yN0bdMnmWCTEGdPtRjty5-gzGzoHsz】），然后选择的 Class 为 Comment，就可以看到评论数据了：

遇到的问题

本地搜索内容未更新

添加了几篇文章，但是发现本地搜索未能搜到，浏览器查看生成的 search.xml 文件发现报错了：

This page contains the following errors:

error on line 1088 at column 23: Input is not proper UTF-8, indicate encoding !
Bytes: 0x0C 0x7E 0x15 0x1D

Below is a rendering of the page up to the first error.

很明显是编码的问题，本地查看这个文件看下是哪个 markdown 文件引发的，在目录【publicsearch.xml】中，找到 1088 行，是一篇文章【内存流得到得字节数组保存文件打开失败问题解决记录】的内容，打开这个文件，发现有关将内存流读取到乱码的问题：

把这个乱码文字去掉，然后用个图片代替，然后清理再生成下。

再次打开，发现又在其它地方出现了：

找到这个文件：

把这两个箭头，换成输入法打出来的就好了。

一个个解决就好。

最后正常了：

某类别页面访问404

本地访问正常【http://kungge.com:4000/categories/NAS/】：

发布到 coding 则显示404页面：