使用Github Pages + Hexo搭建博客（三）—— 配置Next主题

在成功发布了第一篇文章后，我们来进行美化博客的工作。目前Hexo博客中使用最多的主题就是Next主题，在使用Next主题时，我们最好先查看官方的中文文档。我的文章也只是概括补充文档，并且介绍我个人配置过程中遇到的一些坑。

站点配置文件和主题配置文件

在进行主题的配置之前，我们必须先了解站点配置文件和主题配置文件的区别，两个配置文件的文件名都为_config.yml。其中，站点配置文件是指根目录下的_config.yml文件，主要内容是Hexo自身的配置；另一份则位于主题目录下，称作主题配置文件，主要用于配置主题相关的选项。

使用Next主题

• 下载

  在终端窗口定位到Hexo站点目录下，使用如下代码克隆最新版本：

  git clone https://github.com/iissnan/Hexo-theme-next themes/next

  或者前往Next版本发布页面，下载zip文件到本地，解压至站点的themes目录下，并将解压后的文件夹名称改为next。

• 启用

  打开站点配置文件，找到theme字段，将其值改为next。

  theme: next

  主题设定

• 选择Scheme

  在主题配置文件中搜索scheme关键字，就能够看到四行scheme的配置，将您需要启用的scheme前的注释#去掉即可。

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

• 设置语言

  在站点配置文件中，将language设置成网站使用的语言：

  #language: zh-Hans	#简体中文
  #language: en		#英语

• 设置站点信息

  在站点配置文件的头部就能看到配置站点信息的键值对。

  • title是网站标题
  • subtitle是网站副标题，可以写一些个人喜欢的格言
  • description主要用于网站描述
  • author用来设置作者名
  • language用来设置网站使用的语言
  • timezone用来设置时区，默认使用您电脑的时区

• 设置菜单

  菜单配置分为三个部分，分别是菜单项、显示文本以及对应图标。

  1. 菜单项

     我们在前一篇文章中介绍了设置文章的分类以及标签。在Next主题中，我们可以在主题配置文件中修改menu字段中的内容，来设定菜单内容。菜单内容的设置格式是：item name: link。其中item name是一个名称，这个名称并不直接显示在页面上，它将用于匹配图标以及翻译。

  2. 菜单项的显示文本

     Hexo在生成静态文件时使用第一步中设置的菜单名称查找对应语言的翻译，并提取显示文本，这些翻译保存在Next主题目录下的languages/{language}.yml中（{language} 为您所使用的语言）。

  3. 菜单项的图标

     菜单项图标对应字段是menu_icons。此设定格式是item name: icon name，其中item name与上一步所配置的菜单名字对应，icon name是Font Awesome图标的名字。而enable可用于控制是否显示图标，您可以设置成false来去掉图标。

• 设置侧边栏

  可以通过修改主题配置文件中的sidebar字段来设置侧边栏。

  其中，通过设定siderbar.position为left或者right来实现侧边栏的靠左靠右放置。

  通过设定sidebar.display的值为post、always、hide或是remove来实现侧边栏的默认显示、一直显示、在所有页面中隐藏（可手动展开）或是完全移除。

• 设置页面背景图片

  在theme/next/source/css/_custom文件夹下打开custom.styl文件，添加如下代码：

  body {
   /* 将背景图片放到站点目录下source/uploads目录下*/
   background: url(/uploads/background-cover.jpg) no-repeat;
   /* 背景图垂直、水平均居中 */
   background-position: center center;
   /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
   background-attachment: fixed;
   /* 让背景图基于容器大小伸缩 */
   background-size: cover;
   /* 设置背景颜色，背景图加载过程中会显示背景色 */
   background-color: rgba(0, 0, 0, 0.5);
  }

• 设置网站图标

  官方文档中并没有说如何配置网站的图标，其实配置方式也很简单，在主题配置文件中有一个favicon字段，将您的图标放到themes/next/source/images目录下，将favicon字段值设置为您的图标文件名称，便可设置网站图标。

• 设置头像

  修改主题配置文件中的avatar字段值来修改头像，头像文件可以放置在主题目录source/images目录下或者放置在站点目录source/uploads目录下（uploads不存在自行创建）。

• 设置阅读全文

  1. 可在每篇文章您想要分割的位置使用<!--more-->实现分割，我个人比较喜欢这种方式。

  2. 在主题配置文件中配置auto_excerpt字段

     auto_excerpt:
     enable: false	#改写为true
     length: 150	#默认显示高度

• 设置侧边栏社交链接

  在主题配置文件中配置链接以及链接图标

  1. social字段可配置链接，其键值格式为显示文本：链接地址

     social:
       GitHub: https://github.com/
       E-Mail: xxx@xxx.com
       #Google: https://plus.google.com/yourname || google
       Twitter: https://twitter.com/
       微博: https://weibo.com/
       #FB Page: https://www.facebook.com/yourname || facebook
       #VK Group: https://vk.com/yourname || vk
       #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
       #YouTube: https://youtube.com/yourname || youtube
       #Instagram: https://instagram.com/yourname || instagram
       #Skype: skype:yourname?call|chat || skype

  2. social_icons字段可以设置社交链接的图标，其键值格式是匹配键: Font Awesome图标名称，匹配键与上一步所配置的链接的 显示文本相同（大小写严格匹配），图标名称是Font Awesome图标的名字（不必带fa-前缀）。 enable选项用于控制是否显示图标，您可以设置成false来去掉图标。

     以上是官方文档中对于侧边栏社交链接图标设置方式的介绍，但是在实际设置过程中，我发现这是一个巨坑！！！！按照文档设置之后，图标并没有发生任何变化，依旧是默认的icon，在我百思不得其解时，我看到了social字段上的这样一句注释：

     # 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字段中，在||前放链接，在其后放图标的Font Awesome名称即可改变图标。social_icon字段丢在一边就行了。

• 设置站点建立时间

  站点建立时间将在站点底部显示，编辑主题配置文件，新增字段since即可。

结语

这篇文章主要介绍了两个配置文件中的一些配置项，在下一篇文章中，我将介绍如何在Next主题中集成第三方服务，例如评论系统，站内搜索以及阅读统计等等。