前言
Next主题是一款简洁大方、灵活、可定制的hexo主题，本文主要介绍了Next主题的基本配置、优化与风格定制。
添加、配置分类（标签、关于我）页面
当配置完Next主题后，还需要建立三个页面：分类页categories、标签页tags、关于页about，才能完善博客基本的内容，以创建分类页categories为例（其他两个页面步骤一样），创建页面的命令如下：
1 | hexo new page categories |
categories里index.md设置（comments：false，表示该页面禁用评论）：
1 | --- |
创建、配置完三个页面之后，需要修改主题配置文件中的对应配置：
1 | menu: |
侧边栏头像设置
第一步，编辑主题配置文件，修改字段avatar，值设置成头像的链接地址, 链接地址可以是完整的互联网URI或者站点内的地址。
第二步，头像变成圆形，鼠标悬停有旋转效果，具体实现方法为，打开\themes\next\source\css\_custom\custom.styl，添加以下代码：
1 | .site-author-image { |
配置腾讯公益404页面
新建 404.html 页面，放到站点的 source 目录下，页面内容如下：
1 |
|
添加本地搜索Local Search
第一步，安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：
1 | npm install hexo-generator-searchdb --save |
第二步，编辑站点配置文件，新增以下内容到任意位置：
1 | # Local Search |
第三步，编辑主题配置文件，启用本地搜索功能：
1 | # Local search |
配置文章阅读次数
访问LeanClound，注册账号并登陆，进行一番配置之后拿到AppID以及AppKey，然后编辑主题配置文件，启用统计文章阅读次数功能：
1 | leancloud_visitors: |
配置字数统计、阅读时长
第一步，安装hexo-symbols-count-time插件，在站点的根目录下执行以下命令：
1 | npm install hexo-symbols-count-time --save |
第二步，编辑站点配置文件，新增以下内容到任意位置：
1 | # Page Count and Time |
第三步，编辑主题配置文件，启用字数统计、阅读时长功能：
1 | # Post wordcount display settings |
配置站点UV和PV统计
编辑主题配置文件，配置busuanzi_count相关设置，如下所示：
1 | # Show PV/UV of the website/page with busuanzi. |
配置来比力评论
Next主题支持多款评论系统，不过来比力的服务相对而言，比较稳定，首先访问来比力，注册账号并登陆，获取uid字段，然后编辑主题配置文件，启用来比力评论功能：
1 | livere_uid: your uid |
配置Gitment评论
由于来比力评论系统，服务偶尔连不上，影响体验效果，于是在网上查了下，很多博主力荐Gitment评论系统（已集成进新版的Next主题中）。Gitment是一款基于GitHub Issuse的评论功能，主要面向程序员群体，尤为适合各种静态博客和项目页面，具体配置步骤如下：
第一步，前往GitHub注册一个新的OAuth Application，填写以下内容：
1 | Application name：Gitment #自己随便起名字 |
提示： 点击Register application后，你会得到一个client ID和一个client secret，这个将被用于之后的设置
第二步，创建存放Gitment评论仓库，那么博客的评论就会显示在仓库的issue中，例如我为Gitment新建的仓库为HexoBlogComments，那么在后面的配置中的仓库名设为HexoBlogComments。
第三步，然后编辑主题配置文件，启用Gitment评论功能：
1 | gitment: |
配置百度分享
编辑主题配置文件，修改字段 baidushare，值为true，如下所示：
1 | baidushare: |
配置RSS
第一步，安装hexo-generator-feed，在站点的根目录下执行以下命令：
1 | npm install --save hexo-generator-feed |
第二步，编辑站点配置文件，新增以下内容到任意位置：
1 | # RSS |
配置浏览进度
配置文章的浏览进度，编辑主题配置文件，修改scrollpercent，值为true，如下所示：
1 | # Scroll percent label in b2t button. |
配置打赏
配置打赏功能，编辑主题配置文件，如下所示：
1 | # Reward |
配置FancyBox
FancyBox插件，可以实现文章内的图片局部放大功能。
第一步，下载theme-next-fancybox3，放在\themes\next\source\lib目录下。
第二步，编辑主题配置文件，修改fancybox，值为true，如下所示：
1 | fancybox: true |
添加Fork me On Github
先到这里，挑选自己喜欢的样式，并复制代码添加到\themes\next\source\layout\_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址，如下所示：
1 | <!--添加Fork me on github --> |
博文压缩优化
生成的静态文件存在大量空白，在一定程度上影响了网页加载，可以使用hexo-neat插件，对博文进行压缩优化。
第一步，安装hexo-neat，在站点的根目录下执行以下命令：
1 | npm install hexo-neat --save |
第二步，编辑站点配置文件，新增以下内容到任意位置：
1 | # hexo-neat |
顶部添加加载进度条
第一步，先到这里，下载theme-next-pace，并放在\themes\next\source\lib目录下。
第二步，编辑主题配置文件，修改pace配置信息，如下所示：
1 | # Progress bar in the top during page loading. |
文章增加版权信息
在\themes\next\layout\_macro\post.swig模板中，加入版权信息div，如下所示：
1 | {% else %} |
更改文章底部的上一篇、下一篇顺序
在文章底部，有上下篇的链接（< >），但是点 > 发现进入的是页面中的的上面那篇文章，与操作习惯不符，别扭，这里修改一下顺序，修改\theme\next\layout\_macro\post.swig模板，具体修改如下所示：
1 | {% if not is_index and (post.prev or post.next) %} |
主页文章添加阴影效果
给文章首页添加阴影效果，具体实现方法为，在\themes\next\source\css\_custom\custom.styl文件中，添加以下代码：
1 | /*******首页文章阴影样式*******/ |
添加Readme.md文件
Hexo会把文件夹内的所有md文件，编译、解析成html，实现添加Readme.md文件，而且不会编译解析的具体方法为，编辑站点配置文件，修改skip_render配置，如下所示：
1 | skip_render: README.md |
修改文章底部带#号的标签
具体实现方法为，修改模板\themes\next\layout\_macro\post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>。
更改标签云颜色
默认的标签云页面，颜色搭配、字体大小可能看起来不太协调，修改标签云颜色的方法为，修改\themes\next\layout\page.swig模板，具体修改位置如下：
1 | {{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#bbb', end_color: '#111'}) }} |
提示： tagcloud中的对应参数说明，见Hexo官方TagCloud说明
代码块添加全选按钮
Hexo生成的博客中，代码片段是不支持选择全部功能的，若代码片段较长，手动选择非常的不方便，所以可以在代码块右侧添加一个全选按钮。具体实现方法为，在\themes\next\layout\_layout.swig模板中的<head>节点下添加如下代码：
1 | <script src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js" language="JavaScript"></script> |
我的站点配置和主题配置
分享一下我的站点配置、主题配置以及主题的自定义样式，如有疏漏或者问题，欢迎大家在下面评论区交流。
我的站点配置如下：
1 | # Hexo Configuration |
我的主题配置如下：
1 | # --------------------------------------------------------------- |
我的主题自定义样式如下：
1 | // Custom styles. |
总结
本文主要介绍了Next主题的配置与优化，主题的配置参考了网上很多相关博文的介绍，主题的优化与定制借鉴了很多优秀的个人博客（建议多用开发者工具，调试自己喜欢的元素style），文章有不足或者疏漏的地方，欢迎大家在下面评论区讨论。
本文地址：http://www.harderqian.cn/AboutNext/
转载请注明出处，谢谢！
