Hexo搭建GitHub博客—打造炫酷的NexT主题--高级(四)

简介

上篇Hexo搭建GitHub博客—打造炫酷的NexT主题--高级(三)主要是对NexT整体布局的配置，达到完美喜欢的布局格式。
接下来继续对NexT主题博客进行配置，本篇主要是添加一些常用的第三方访问或者服务。请跟着脚步开启新的旅行吧。

配置

1.Math Equations Render Support 数学方程式渲染支持

这里可能有时需要在文章中使用到时数学公式了，在这里设置一下。

math:
  enable: true  #默认为false
  per_page: true
  engine: mathjax   #两种方式  mathjax / katex
  mathjax:
    cdn: //cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML  #默认 这里大家根据自己需求
  katex:
    cdn: //cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css   #默认

2.Han Support 支持汉字

设置汉字支持，我没配置，如果大家想配置的话就按照以下步骤：
1.打开Git Bash Here,进入theme/next目录下

$ cd theme/next

2.获取该汉字支持Git module,执行命令以下命令获得

$ git clone https://github.com/theme-next/theme-next-han source/lib/Han

3.设置汉字支持

han: true  

4.更新update

$ cd themes/next/source/lib/Han
$ git pull

• 注：通过该链接可以查看以上步骤 https://github.com/theme-next...

3.添加图标链接到GitHub

一般在右上角或者左上角，如下我的博客配置。

• 配置右上角Fork_me_on_GitHub,按以下步骤进行

1.打开Fork_me_on_GitHub链接，里面有许多样式，选择自己喜欢的样式，将其复制下来。

2.打开自己博客项目中的themes/next/layout/_layout.swig文件，搜索<div class="headband"></div> 将复制的内容粘贴到<div class="headband"></div>下面，如下：

• 注：要修改红色框里面的连接为自己在GitHub上的连接。

• 配置右上角的Fork_me_on_GitHub

本例的方式和上面的方式一样的步骤，但是获取的连接不同了，本例的连接地址是GitHub Corners

4.将文章底部#标签修改带为带图标的形式

在博客项目中找到/themes/next/layout/_macro/post.swig，搜索 rel="tag"，将 #号 换成<i class="fa fa-tag"></i>

• 原先#号的样式

• 修改为图标的样式

5.font字体设置

在themes/next/_config.yml搜索font

font:
  enable: true #默认false 如果要进行字体修改那么设置为true

  global:
    external: true
    family: Lato   #设置字体  下同
    size:   #字体大小  下同

  headings:
    external: true
    family:
    size:
  posts:
    external: true
    family:
  logo:
    external: true
    family:
    size:
  codes:
    external: true
    family:
    size:

6.设置背景动画样式

NexT里面有几种动画背景样式canvas_nest、three_waves、canvas_lines、canvas_sphere等

• canvas_nest如下图所示

按照以下步骤完成

1.打开Git Bash Here进入自己文件夹下/themes/next文件夹下

$ cd /themes/next

2.下载安装 canvas_nest module 执行

$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

在 /themes/next/source/lib查看会看到canvas_nest文件夹

3.在/themes/next/_config.yml设置

canvas_nest: true

• 注：canvas_nest连接
• 注：这里也可以查看设置步骤：canvas_nest设置
• three_waves如图所示

打开three_waves 查看设置步骤，这里和canvas_nest步骤是一样的，这里就不写咯。
下载完成后，在/themes/next/_config.yml设置

three_waves: true
#OR
canvas_lines: true
#OR
canvas_sphere: true

• canvas_ribbon只适合 scheme Pisces 这里不测试了，大家可以进入canvas_ribbon安装

7.在网站底部添加访问量

1.进入\themes\next\layout\_partials\footer.swig文件顶部第一行添加

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

2.搜索{% if theme.footer.powered.enable %}在这个位置上添加以下代码

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

• 注：这里的id值可以选择两种

# busuanzi_value_site_uv  表示用户连续点击n篇文章，只记录1次访客数
# busuanzi_value_site_pv  表示用户连续点击n篇文章，记录+n次访问量
# 这里对应的是2上的id值

8.给每篇文章添加类别和标签

在创建的文章都在source/_post目录下找到，每篇文章添加tags、categories

9.添加进度条

• 注：添加进度条的话在手机浏览的时候一般情况都有自带的进度条了，例如微信浏览、浏览器浏览等等，这样就出现重复的进度条了，这里看个人是否添加。但是在电脑浏览器浏览却是不错的。

本例设置的如下pace-theme-center-circle显示

按照以下步骤进行

• 注：或者进入这里 Progress配置查看如何配置

1.打开Git Bash Here进入自己文件夹下/themes/next文件夹下

$ cd /themes/next

1. 下载安装 Progress module 执行

$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace

在 /themes/next/source/lib查看会看到pace文件夹
3.在/themes/next/_config.yml设置

pace: true  #设置为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
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-center-circle #这里任选其中一种

• 注大家在这里想用什么样式就自己测试。

10.添加站内搜索

由于可能我需要快速查找相关文章，那么就需要添加站内搜索。

按以下步骤进行

• 注：或者进入NexT配置站内搜索文档查看如何配置

1. 安装站内搜索插件

$  npm install hexo-generator-searchdb --save
或者
$ cnpm install hexo-generator-searchdb --save

2.在根目录下的_config.yml添加

#表示站内搜索
search:  
    path: search.xml
    field: post
    format: html
    limit: 10000

3.在themes/next/_config.yml文件中搜索local_search,进行设置

local_search:
  enable: true  #设置为true
  trigger: auto  # auto /  manual，auto 自动搜索、manual：按回车[enter ]键手动搜索
  top_n_per_article: 1
  unescape: true

11.添加打赏功能

查看配置如下

NexT主要提供三种打赏方式分别是微信、支付宝、比特币
在themes/next搜索Reward,三个都打开吧

# Reward
reward_comment: Donate comment here  # 描述
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
bitcoin: /images/bitcoin.png

总结

本篇我们进行了NexT主题的相关配置，这让我们的博客已经非常漂亮了，接下来我们主要进行添加NexT的评论系统、添加百度、Google检索等高级配置，希望各位读者在配置时遇到问题是，随时评论，我们一起解决相关问题。

推荐

大家也可以查看关于Hexo相关文章。

Hexo搭建GitHub博客--初级(一)
Hexo搭建GitHub博客--初级(二)
Hexo搭建GitHub博客—打造炫酷的NexT主题--高级(三)
Hexo搭建GitHub博客—打造炫酷的NexT主题--高级(四)

我的博客

欢迎大家随时进入我的博客学习，我们一起探究。