说实话，系统提供的主题看起来真的丑，找来找去发现，next这个主题还是可以的，低调奢华有内涵，就很适合我这种高端大气上档次的boy。接下来我就说说怎么使用next主题打造一个狂拽炫酷吊炸天的个人博客，顺便po一下自己在搭建过程中遇到一些的问题和爬坑过程。
next入门
安装主题
- 在hexo文件夹的根目录下，使用git 下载最新的next主题
git clone https://github.com/iissnan/hexo-theme-next themes/next
启用主题，在hexo 的配置文件中，修改字段theme的值为next
验证主题，在命令行中执行下列代码，如果没有报错，就按照显示的地址在本地查看博客吧。
hexo s
设置主题
next中有4个主题，可以通过选择 Scheme ，修改next的主题样式，一个一个去试就好了，我还是觉得Pisces比较干净。
设置语言
编辑hexo的配置文件， 将字段 language 设置成你所需要的语言，修改完成后需要重新编译静态文件。乡下人英语不好，还是简体中文看着舒服。
language: zh-Hans
目前 NexT 支持的语言如以下表格所示：
设置菜单
编辑hexo的配置文件， 将字段 menu下打开需要属性。||前面是对应的页面，后面是icon小图标名称，使用的是fontawesome图标库，直接去fontawesome官网找吧，把名字复制过来替换即可。
menu:
home: / || home
about: /about/ || user
categories: /categories/ || th
tags: /tags/ || tags
archives: /archives/ || archive
有些新建的菜单选项可能没有文件夹，在点击时会报404页面，需要手动创建文件夹。可以在hexo根目录下执行下列命令
hexo new page "目录名称"
设置头像和网站的favicon图标
编辑next文件夹中的主题配置文件（_config.yml）， 修改字段 avatar和favicon， 值设置成头像的链接地址。我一般把图片放在hexo根目录的source文件夹下自己创建的image文件夹中。
设置侧边栏社交链接和推荐链接
打开主题配置文件（_config.yml）
搜索social_icons:,在fontawesome官网找喜欢的小图标，将名字复制在如下位置。
搜索
links：，在这里可以添加推荐阅读的链接，如下图
next进阶
网站底部加上访问量
打开\themes\next\layout\_partials\footer.swig文件,在copyright前加上画红线这句话
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
然后再合适的位置添加显示统计的代码
<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>
在这里有两中不同计算方式的统计代码：
- pv的方式，单个用户连续点击n篇文章，记录n次访问量
- uv的方式，单个用户连续点击n篇文章，只记录1次访客数
注意这个东西在本地服务器上的数据都是假的，只有线上服务器才是真实数据。
引入网易云音乐
我们可以通过网易云提供的外链播放器，让自己的博客自动播放音乐。
将下面的代码复制到自己想要放置播放器的地方
这个播放器可以放在任何地方。我选择放在侧边栏中。
<div id="music163player">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="https://music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
</iframe>
</div>
注意 这里复制下来的地址中src是没有https:的 需要自己添加，不然无法生成播放器，这个坑我爬了一个晚上...
实现统计功能
使用hexo-wordcount插件，实现博客字数和阅读时间的统计
在hexo根目录下执行下列命令，安装插件
npm install hexo-wordcount --save
然后在主题配置文件中找到post_wordcount，将需要的东西改成true，即可实现该功能。
阅读次数统计
我是使用leancloud来实现阅读次数的统计。
首先需要去leancloud官网注册一下
注册完成后，进入控制台，点击箭头指向的东西
在存储中创建一个类 Counter 必须是这个命名
然后获取appid和appkey
将这两个值放到主题配置文件中leancloud_visitors下对应的字段
leancloud_visitors:
enable: true
app_id: yourapp_id
app_key: yourapp_key
最后在安全中心中，设置Web 安全域名
同样这个数据在本地是无法计算的，而且会报错，只有上线后才能计算每次浏览的次数。
设置评论功能
网上有一大堆开源的评论插件，类似来必力(韩国棒子出品，这不抵制一下？）、畅言、友言。最后发现上面一个leancloud也可以用来做评论，只不过需要配合Valine一起使用。
- 下载最新的Valine.min.js核心代码库到本地
- 将下载好的
Valine.min.js放置于next\source\js\src\下 - 打开valine配置文件进行配置,valine配置文件路径：
next\layout\_third-party\comments\valine.swig
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unjkp.com/valine/dist/Valine.min.js"></script> //删除Valine核心代码库外链调用
<script src="/js/src/Valine.min.js"></script> //调用刚下载的本地文件以加速加载速度
{% set valine_uri = '/js/src/Valine.min.js' %} //这里改为从本地加载
{% if theme.vendors.valine %}
{% set valine_uri = theme.vendors.valine %}
{% endif %}
<script src="{{ valine_uri }}"></script>
<script type="text/javascript">
var GUEST = ['nick','mail','link'];
var guest = '{{ theme.valine.guest_info }}';
guest = guest.split(',').filter(function (item) {
return GUEST.indexOf(item)>-1;
});
new Valine({
el: '#comments' ,
verify: {{ theme.valine.verify }},
notify: {{ theme.valine.notify }},
appId: '{{ theme.valine.appid }}',
appKey: '{{ theme.valine.appkey }}',
placeholder: '{{ theme.valine.placeholder }}',
avatar:'{{ theme.valine.avatar }}',
guest_info:['nick'] , //评论者只需要提供评论的昵称即可
pageSize:'{{ theme.valine.pageSize }}' || 10,
});
//增加以下六行代码去除 power by valine
var infoEle = document.querySelector('#comments .info');
if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0){
infoEle.childNodes.forEach(function(item) {
item.parentNode.removeChild(item);
});
}
</script>
{% endif %}
- 然后去主题配置文件中进行修改，下面是我的配置
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true //打开valine评论功能
appid: 你的leancloud appid
appkey: 你的leancloud appkey
notify: false //邮件提醒
verify: true //评论时是否有验证码，需要在Leancloud 设置->安全中心 中打开
placeholder: 说点什么吧！ //评论框默认显示
avatar: hide //评论者的头像,我这里设置的不显示
guest_info: nick # custom comment header
pageSize: 10 # pagination size
下面是效果图
为博客加上萌萌的宠物
这个也是在找资料的时候发现的，虽然很好看，但是跟那个canvas背景图一样，有点占资源，可能会导致网站打开有点慢。下面是设置方法。
- 在hexo根目录下安装插件
npm install -save hexo-helper-live2d
- 宠物样式列表，选择你喜欢的萌妹子或者小动物，然后安装。
npm install live2d-widget-model-"宠物代码"
- 在hexo的配置文件中添加下列配置
live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-z16
display:
position: right
width: 100
height: 150
mobile:
show: true
我这个在本地运行好像不是很流畅，建议把mobile设置为false，因为手机上真的好占位置。。。
下面是效果图
别问我为啥选这个，老子晕奶！！！
好了，暂时写这么多吧，感觉还有好多坑没有写进来。写完了还是蛮有成就感的，至少对得起掉下的这么多头发了。。。
