Hexo 框架允许我们更换合适的主题，以便于构建不同风格的网站，这里介绍目前最常使用的一款主题之一 —— NexT
一、NexT 安装
在正式开始讲解 NexT 安装之前，我们必须明确以下几个概念：
在使用 Hexo 框架建立的网站中，存在两份重要的配置文件，它们的文件名称都是 _config.yml
一份是 站点配置文件，位于 站点根目录 下，用于网站的基础配置
另外一份是 主题配置文件，位于 themes 目录 下，用于主题的相关配置
不同的主题会有不同的主题配置文件，由主题作者所提供
1、下载 NexT
在 站点根目录 中打开 git bash 窗口，使用如下命令下载 NexT 主题文件到 themes 目录 中
$ 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、启用 NexT
打开 站点配置文件， 将 theme 选项的值改为 next，注意要在属性和值之间要加上一个空格
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next
此时，登陆自己的站点，应该可以看到更改已经成功
二、NexT 配置
1、设置 Scheme
Scheme 是用于 改变网站布局 的一个设置项，NexT 目前提供四种 Scheme：
Muse：默认 Scheme，黑白主调，大量留白Mist：Muse 的紧凑版本，整洁有序的单栏外观Pisces：双栏 Scheme，小家碧玉的清新Gemini：新增 Scheme
更改时，打开 主题配置文件，通过搜索关键字 Scheme Settings 定位，然后将使用的 scheme 打开注释即可
# --------------------------------------------------------------- # Scheme Settings # --------------------------------------------------------------- # Schemes #scheme: Muse #scheme: Mist scheme: Pisces #scheme: Gemini
2、设置动态背景
更改时，打开 主题配置文件，通过搜索关键字 Canvas-nest 定位，然后将 canvas_nest的值改成 true 即可
# Canvas-nest canvas_nest: true
3、设置侧栏行为
默认情况下，侧栏仅在文章页面（拥有目录列表时）才显示，并放置于右侧位置
可以通过修改 主题配置文件 中的Sidebar Settings 字段控制侧栏的行为
（1）侧栏位置：position
left：靠左放置right：靠右放置
（2）侧栏显示时机：display
post：默认行为，在文章页面（拥有目录列表时）显示always：在所有页面中都显示hide：在所有页面中都隐藏remove：完全移除
# Sidebar Position, available value: left | right (only for Pisces | Gemini). position: left #position: right # Sidebar Display, available value (only for Muse | Mist): # - post expand on posts automatically. Default. # - always expand for all pages automatically # - hide expand only when click on the sidebar toggle icon. # - remove Totally remove sidebar including sidebar toggle. display: post #display: always #display: hide #display: remove
4、设置菜单
（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
部分菜单项的功能描述如下：
home：主页about：关于tags：标签categories：分类archives：归档
（2）创建文件夹
这里演示创建 categories 分类页面的文件夹，其它菜单项的添加类似
在 站点根目录 下，打开 git bash，输入命令 $ hexo new page "categories"
$ hexo new page "categories" INFO Created: C:\Desktop\test\source\categories\index.md
（3）添加文档头部
这里演示添加 categories 分类页面的文档头部，其它菜单项的添加类似
打开新建的 index.md文件，在 文档头部 添加以下描述：
--- title: categories date: 2015-12-04 15:37:22 type: "categories" comments: false ---
5、设置头像
打开 主题配置文件， 搜索关键字 Sidebar Avatar 进行定位，将 avatar 的值设置成头像图片的链接地址即可
# Sidebar Avatar # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif avatar: <url>
- 完整的互联网地址：例如，https://www.example.com/avatar.jpg
- 站点内的相对地址：例如，假设图片命名为 avatar.jpg，存放在 source/images/ 目录下，则链接地址可以写成 /images/avatar.jpg
6、添加社交链接
打开 主题配置文件，搜索关键字 Social Links 进行定位，social 的值按Key: permalink || icon 格式设置
# Social Links. # Usage: `Key: permalink || icon` # Key is the link label showing to end users. # Value before `||` delimeter is the target permalink. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded. social: csdn: https://blog.csdn.net/wsmrzx || csdn cnblogs: https://www.cnblogs.com/wsmrzx || cnblogs
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:
【参考资料】
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
