Hexo主题配置

写在前面的话 ：通过上一篇文章的学习，我们对Hexo框架已经有了一定的了解了，下面我们将对我们的网站进行一些界面上的优化配置，包括更换NexT主题和相关的主题配置

温馨提示 ：想要了解更规范的官方配置说明，可参考以下文档：

http://theme-next.iissnan.com/getting-started.html

https://github.com/iissnan/hexo-theme-next/wiki

想要了解更多的第三方服务以及插件，可参考以下文档：

http://theme-next.iissnan.com/third-party-services.html

https://hexo.io/plugins/

整体效果演示可参照我的个人网站

一、准备阶段

在Hexo中有两份重要的配置文件，它们的文件名称都是 _config.yml，一份是网站配置文件，位于站点根目录下，用于网站的基础配置；另外一份是主题配置文件，位于主题文件themes目录下，用于主题的相关配置。

不同的主题会有不同的主题配置文件，由主题作者所提供，可以根据自己的需要使用适当的主题，而这里所讲解的是目前受欢迎的一个主题之一：NexT主题

二、NexT安装

1. 下载NexT

到先前创建的站点文件夹中打开git bash窗口

user@machine MINGW64 ~/Desktop/test
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
Cloning into 'themes/next'...
remote: Counting objects: 12033, done.
remote: Total 12033 (delta 0), reused 0 (delta 0), pack-reused 12033
Receiving objects: 100% (12033/12033), 13.00 MiB | 1.37 MiB/s, done.
Resolving deltas: 100% (6991/6991), done.
Checking out files: 100% (351/351), done.

注意：如果出现以下的错误

error: RPC failed; curl 18 transfer closed with outstanding read data remaining
fatal: The remote end hung up unexpectedly
fatal: early EOF
fatal: index-pack failed

请尝试使用以下的命令

$ git clone git://github.com/iissnan/hexo-theme-next themes/next

2. 启用主题

打开站点配置文件将theme的值改成next，注意在属性和值之间要加上一个空格

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

此时登陆自己的站点应该可以看到更改已经成功了

三、NexT配置

1. 设置Scheme

Scheme是用于改变网站布局的一个设置项，NexT目前提供了四种Scheme：

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新
Gemini - 新增 Scheme

更改 Scheme 时只需打开主题配置文件，通过搜索关键字Scheme Settings，然后把所要使用的 Scheme 打开注释即可，以下示例为使用Pisces Scheme

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

2. 设置动态背景

打开主题配置文件，将canvas_nest设置项改成true即可，注意属性与值之间要有一个空格

# Canvas-nest
canvas_nest: true

注意，此种方法只适用于NexT主题在5.1.1以上版本的哦

3. 设置侧栏

默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置，

可以通过修改主题配置文件中的 sidebar 字段来控制侧栏的行为。

（1）侧栏位置：position

Key	描述
left	靠左放置
right	靠右放置

（2）侧栏显示的时机：display

Key	描述
post	默认行为，文章页面（拥有目录列表时）显示
always	在所有页面中都显示
hide	在所有页面中都隐藏
remove	完全移除

4. 设置头像

打开主题配置文件，通过搜索关键字avatar ，将值设置成头像的链接地址即可

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: <url>

头像的链接地址可以是：

地址	值
完整的互联网URL	例如：https://www.example.com/avatar.jpg
站点内地址	例如：若图片存放在source/images/目录下，则是/images/avatar.jpg

5. 设置菜单

（1）设置菜单项

打开主题配置文件，搜索关键字Menu Settings，各个菜单项通过#注释开启或关闭

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

部分菜单项功能描述如下

Key	描述
home	主页
about	关于
tags	标签
categories	分类
archives	归档

（2）创建菜单文件夹

在站点根目录下，打开git bash，输入命令$ hexo new page "categories"

user@machine MINGW64 /c/Desktop/test
$ hexo new page "categories"
INFO  Created: C:\Desktop\test\source\categories\index.md

这里示例是添加了categories分类页面的文件夹，其它菜单项的添加类似

（3）添加文档头部

打开新建的~\source\categories\index.md文件，在文档头部添加以下描述

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

这里示例是添加了categories分类页面的文档头部设定，其它菜单项的添加类似

6. 设置社交链接

打开主题配置文件，添加如下内容，这里的示例为GitHub链接和CSDN链接，可根据自己的需要增减

# Social Links
social:
  GitHub: https://github.com/Forwhfang
  CSDN: https://blog.csdn.net/wsmrzx

7. 添加文字统计功能

进入站点根文件夹，打开git bash窗口，输入如下命令安装插件

$ npm install hexo-wordcount --save

然后打开主题配置文件，进行如下配置即可

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: true
  separated_meta: true

8. 添加阅读量统计功能

在主题配置文件中修改 busuanzi_count 字段启用不蒜子统计功能

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 本站总访客数
  site_uv_footer: 
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 本站总访问量
  site_pv_footer: 
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 本文总阅读量
  page_pv_footer:

注意，此种方法只适用于NexT主题在5.0.1以上版本的哦

写在后面的话 ：通过上面的学习，我们已经对我们的网站做了一次全面的优化配置，下一篇文章我们将会开始书写我们的第一篇博客文章，谢谢大家