Hexo个性化设置

极简的基础上做个性化，取悦自己同时满足功能需求。

本文价值：实践记录主题网上提供的部分优化思路

参考清单：

路人SSSHexo+Next主题优化
jeyzhang NexT主题个性化设置
阿丹博客hexo的next主题美化
violinlinHexo-设置阅读全文
Luweir23 新版本NexT 调动态背景、调canvas_nest的解决方案
VinceZzzNext添加评论

遇见的问题

hexo new page 不能写成 pages 不然就不是创建页面了是生成post文件了
Hexo由于更新，很多文件内容与网上的教程不一样,比如nest动画效果都调不出来
给文章加密输入密码可读，设置失败了
总体调整都是针对主题文件和站点文件修改，其实只要懂一点建站的知识，应该都是可拓展的，但目前还不具备。当然对于现在这个阶段其实可以整理出针对这两个文档的重要配置清单，这样在下次建站就会很方便。
Hexo在部署到Github后CNAME文件会消失，办法:修改 hexo目录下 source 新建一个CNAME文件
音乐播放问题，不能全局播放,已解决通过pja插件开启，具体可参考下面正文

总结：注意文档版本，配置文件还有很多可以发掘开启的功能，通过它的说明文件可以有更多的做法，但这些不是现阶段的重点。重点放在完善博客内容上面，至于个性化配置可以作为平时一个拓展小兴趣。

提前说明

假设网站的根目录为D:/Hexo/，也称为站点目录

站点配置文件是指网站目录下的_config.yml文件，即D:/Hexo/_config.yml

主题配置文件是指网站目录下对应的主题文件夹下的_config.yml文件，即D:/Hexo/themes/next/_config.yml

当我们把功能设置完成后，记得 hexo s 进行预览，然后 hexo g -d以完成网站的生成和部署。

基础配置项目

添加分类、标签云、关于等页面

添加页面

以添加分类页面为例，在站点目录下，
打开git bash，输入

hexo new page "categories"

之后在站点目录下的source文件夹下，会新增一个categories的文件夹，里面有一个index.md文件，
打开如下

title: categories
date: 2015-12-04 15:37:22
type: "categories"
comments: false

—其中，comments可以设置为false，含义是打开分类页面，评论插件不显示；如要显示则改为true。
tags, about页面的创建类似，输入

hexo new page "tags"
hexo new page "about"

建立好页面文件然后还需要修改theme的menu文件,才会显示。

配置页面图标顺序

NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下图标模糊的问题。

打开 themes/next/_config.yml文件，搜索 menu_icons 关键字，修改对应图标名称或者新增对应 menu 的图标。

新建公益404界面

在站点根目录下,输入 hexo new page 404 ,默认在 Hexo 站点下/source/404/index.md 打开新建的404界面，
在顶部插入一行，写上 permalink: /404 ，这表示指定该页固定链接为 http://“主页”/404.html。

title: #404 Not Found：该页无法显示
date: 2017-09-06 15:37:18
comments: false
permalink: /404

如果你不想编辑属于自己的404界面,可以显示腾讯公益404界面,代码如下：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

这里如果不想404出现在主页栏，只在缺失页面时显示，可以在menu将404加#号。

本地搜索

站点的根目录下

$ npm install hexo-generator-searchdb --save

打开 Hexo 站点的 _config.yml,添加配置

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

打开 themes/next/_config.yml ,搜索关键字 local_search ,设置为 true：

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true

头像,图标等设置

添加头像

方法一
打开 themes/next/_config.yml 文件，搜索 Sidebar Avatar 关键字，去掉 avatar 前面的#：

  # Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

方法二
编辑站点配置文件，添加如下内容

avatar: your avatar url

其中，your avatar url可以是
(1) 完整的互联网URL，你可以先将设置的头像图片放到图床上；
(2) 本地地址：如/upload/image/avatar.png (你需要将avatar.png文件放在/站点目录/source/upload/image/里面)。

这种的好处是换主题了也不用换，但是推荐方法一。

设置favicon图标

Step 1:
首先要有一个常见格式名(如.jpg, .png等)的图片作为备选favicon，选择一个favicon制作网站完成制作，例如比特虫是一个免费的在线制作ico图标网站。
Step 2:
将favicon.ico文件放在网站根目录下的source文件夹内即可。刷新网站，就可以看到效果了
其实默认的N图标也挺好看。

添加社交、友情链接

这部分也可以在 themes/next/_config.yml 找到对应位置直接修改。
也可以
编辑站点配置文件，添加

social:
  github: https://github.com/your-user-name
  twitter: https://twitter.com/your-user-name
  weibo: http://weibo.com/your-user-name
  douban: http://douban.com/people/your-user-name
  zhihu: http://www.zhihu.com/people/your-user-name
  # 等等

可根据自身需要自行删减。

以添加github官网(https://www.github.com)为友情链接为例编辑站点配置文件，添加如下内容

 # title
links_title: Links
# links
links:
  Github: https://www.github.com

RSS (没成功)

1.安装插件：npm install hexo-generator-feed
2.在主目录blog下的配置文件_config.yml的末尾添加以下内容：

# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

3.theme配置文件_config.yml,修改相应配置为：

rss: /atom.xml

修改文章间分割线

打开 themes/next/source/css/_common/components/post/post-eof.styl ,修改：

.posts-expand {
  .post-eof {
    display: block;
    margin: $post-eof-margin-top auto $post-eof-margin-bottom;
    width: 8%;  长度
    height: 1px; 高度
    background: $grey-light;
    text-align: center;
  }
}

显示文章摘要

theme配置文件_config.yml添加（测试新版本中已经失效不知道啥原因）

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

但我们也可以手动控制需要摘要出现在文章的位置，比较好用。
具体参考Hexo-设置阅读全文

修改网页底部

在图标库中找到你自己喜欢的图标, 修改桃心,打开 themes/next_config.yml ,
搜索关键字 authoricon,替换图标名

# icon between year and author @Footer
authoricon: id-card

隐藏网页底部 Hexo 强力驱动打开主题配置文件,搜索关键字 copyright ，如下:

# Footer `powered-by` and `theme-info` copyright
copyright: false

动画效果

更新后的不支持next nest 的动画特效。可惜了，其它几个不喜欢，也罢。
但是如果你喜欢的话也可以参考这里的方案开启现存的3个动效。
nest试过但是没成功。

为Next主题添加Valine评论系统

注册Lean Cloud，要实名认证，创建应用，得到应用keys
配置到主题配置文件中
即可。

valine:
  enable: true
  appid: MQc67RHMxxxxxxxxGzoHsz
  appkey: RtCeTEV1A0xxxxxxxxxxU6yzeD
  notify: true # Mail notifier
  verify: false # Verification code

详细步骤可以参考
VinceZzz添加评论

字数统计之类

主题配置文件找到 busuanzi_count 改为True

  busuanzi_count:
      enable: true
      total_visitors: true
      total_visitors_icon: fa fa-user
      total_views: true
      total_views_icon: fa fa-eye
      post_views: true
      post_views_icon: fa fa-eye

aplayer添加音乐

在Github上下载Aplayer 。解压后将dist文件复制到themes->next->source文件夹下。

在新加的dist目录下新建一个music.js文件，添加代码（需要自己更新歌曲信息）：

    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: false,
    audio: [
      {
        name: "保留",
        artist: '黄义达',
        url: 'http://music.163.com/song/media/outer/url?id=26084247.mp3',
        cover: 'http://p4.music.126.net/91x8fsHx6_9wzrlqtcK6qA==/2485995790424429.jpg',      
      },
      {
        name: 'Ship In The Sand',
        artist: 'Marble Sounds',
        url: 'http://music.163.com/song/media/outer/url?id=26511658.mp3',
        cover: 'http://p4.music.126.net/mRPJzDzQlELlfQ6qSlnItA==/4428832836684306.jpg',
      }
    ]
    });

代码中对应参数的解释，请查看：[Aplayer中文文档]（https://aplayer.js.org/#/zh-Hans/）

在_layout.swig中添加信息,打开~themesnextlayout_layout.swig文件，将

<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>

添加到<div class="container">标签的后面，即添加到的下一级子标签里面。

解决切换页面播放中断问题
上面操作完就已经可以看到播放器了。但是会出现切换页面播放中断的问题。
现在的Next主题里已经集成了pjax插件，利用它就可以解决问题。
在~/themes/next/目录下右键git bash here，输入命令：

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

下载完成后打开主题目录下的_config.yml文件，定位到pjax处，启用就可以了：

pjax: true

关于如何快的获取音乐链接和封面
推荐用这个刘志进实验室
多个平台链接都有。

待续。。

CHENHUI