说实话我已经停止更新 hexo 博客很长时间了，最近突然有更新博客的想法，所以就开始了博客更新之路，既然重新开始写博客，那就要换个主题换个心境把，下面的故事由此展开

前言：

　　 hexo theme 主题五花八门，基本上种类有很多，我这次选择更新的主题为 NexT。NexT主题是在GitHub有着10k+star的高人气Hexo主题，可方便切换多种方案(Scheme)，内置标签分类、代码高亮、载入动画等功能，支持评论系统、站内搜索、数据统计与分析等第三方服务。算是比较省事的代名词吧。

hexo 博客搭建

　　关于 hexo 博客的搭建，请大家移步我的这篇文章如何使用 hexo+github 搭建个人博客

hexo 博客使用 github 和 coding

更新主题

　　关于主题的更换我之前写过一篇文章，请大家移步我的这篇文章如何更换 hexo 主题

hexo Next 主题配置

　　添加分类/标签/关于我们

hexo next 主题有个比较气人的地方就是你不创建一个页面，你就没法打开以上的三个
创建分类, 一下我以创建一个标签为例：

1
2


# 在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面，命名为 tags ：
$ cd your-hexo-site$ hexo new page tags

设置博客信息

　　自 next 更新到 6.x 以后百度搜索到的官方文档都是有错误的。因为 next 6.x 已经由 github 上的组织 theme-next 进行维护，所以有些文档更新不及时

　　打开站点配置文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


# 网站信息
[[标题]]
title: 孤城落寞的博客
[[副标题]]
subtitle: 记录学习的技能和遇到的问题
[[网站描述]]
 做自己爱做的事，爱自己在做的事！
[[作者昵称]]
 孤城落寞
[[网站语言，默认英语，设置简体汉语]]
# Next 6.x 中文简体已有 zh-Hans 更换成 zh-CN
language: zh-CN

选择 Scheme

　　Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 主题可以方便切换多种不同的方案。

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

　　我使用的是 Gemini，打开~\blog\themes\next\里的_config.yml 这个主题配置文件，删去scheme: Gemini前面的注释#即可启用该 scheme，如下所示：

1
2
3
4
5


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

设置菜单

　　打开主题配置文件，设置启用的菜单：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


menu:
  home: / || home
  archives: /archives/ || archive
  categories: /categories/ || th
  tags: /tags/ || tags
  [[schedule]]: /schedule/ || calendar
  about: /about/ || user
  [[sitemap]]: /sitemap.xml || sitemap
  [[commonweal]]: /404/ || heartbeat

# Enable/Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

　　同前面一样，带#的为不启用。

设置侧标栏

　　在博客左边/右边除了菜单外，还有一个侧栏，可以放置头像和其他社交链接，并在阅读文章时会自动显示文章目录。

　　侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标，图标名称是**Font Awesome **提供图标的名字（不必带 fa- 前缀）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


social:
  GitHub: https://github.com/gclm || github
  E-Mail: http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=2uvt6_Pj4ujt7_6aq6v0ubW3 || envelope
  QQ: http://wpa.qq.com/msgrd?v=3&uin=1719982754&site=qq&menu=yes || fa-qq
  YouTube: https://www.youtube.com/channel/UCPPIRDg6H5aOufa9OaYM-yA?view_as=subscriber || youtube
  [[Google]]: https://plus.google.com/yourname || google
  [[Twitter]]: https://twitter.com/yourname || twitter
  [[FB]] Page: https://www.facebook.com/yourname || facebook
  [[VK]] Group: https://vk.com/yourname || vk
  [[StackOverflow]]: https://stackoverflow.com/yourname || stack-overflow
  [[Instagram]]: https://instagram.com/yourname || instagram
  [[Skype]]: skype:yourname?call|chat || skype

　　设置头像，把头像图片放在~/blog/themes/next/source/images中（如无此路径自行创建即可），图片命名为avatar.jpg：

1
2
3
4
5
6
7
8
9


# 头像设置
avatar:
  url: /images/head.jpg
  # If true, the avatar would be dispalyed in circle.
  rounded: false
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # 设置为true 开启头像旋转
  rotated: true

　　开启侧栏文章目录，在阅读文章时自动展开：

1
2
3
4


toc:
  enable: true [[开启侧栏文章目录，目录由一级、二级标题形成]]
  number: true [[自动为目录编号]]
  wrap: false [[不展示目录中全部文字]]

　　设置侧栏位置、返回顶部按钮等：

1
2
3
4
5
6
7
8


sidebar:
  position: left //侧栏位置
  display: post
  offset: 12
  offset_float: 12
  b2t: true //显示返回顶部按钮
  scrollpercent: true //显示百分比
  onmobile: false //在移动设备上不显示侧边栏

开启站内搜索

1

npm install hexo-generator-searchdb –save

　　编辑站点配置文件，新增以下内容到任意位置：

1
2
3
4
5


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

　　编辑主题配置文件，启用本地搜索功能：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# Local search  站内搜索
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # unescape html strings to the readable one
  unescape: false

配置 gittalk 评论

　　关于 gittalk 评论插件的配置，请大家移步我的这篇文章如何更换 hexo 主题

自定义主题

　　作为一个新世纪的优秀青年，光用默认主题怎么行呢，接下来开始进行主题的自定义模式。

　　点击我开始主题的自定义模式