使用 Hexo 搭建属于自己的博客（二）

说实话，系统提供的主题看起来真的丑，找来找去发现，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前加上画红线这句话

然后再合适的位置添加显示统计的代码


  
  
    本站访客数:

在这里有两中不同计算方式的统计代码：

pv的方式，单个用户连续点击n篇文章，记录n次访问量
uv的方式，单个用户连续点击n篇文章，只记录1次访客数
注意这个东西在本地服务器上的数据都是假的，只有线上服务器才是真实数据。

引入网易云音乐

我们可以通过网易云提供的外链播放器，让自己的博客自动播放音乐。

将下面的代码复制到自己想要放置播放器的地方

这个播放器可以放在任何地方。我选择放在侧边栏中。

注意这里复制下来的地址中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

  
    //删除Valine核心代码库外链调用
    //调用刚下载的本地文件以加速加载速度

  {% set valine_uri = '/js/src/Valine.min.js' %}  //这里改为从本地加载
  {% if theme.vendors.valine %}
    {% set valine_uri = theme.vendors.valine %}
  {% endif %}
  
  
  
{% 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背景图一样，有点占资源，可能会导致网站打开有点慢。下面是设置方法。

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，因为手机上真的好占位置。。。
下面是效果图

别问我为啥选这个，老子晕奶！！！

好了，暂时写这么多吧，感觉还有好多坑没有写进来。写完了还是蛮有成就感的，至少对得起掉下的这么多头发了。。。