Hexo搭建GitHub博客(三)- NexT主题配置使用

NexT是一款简洁优雅且易于使用的主题,配置比较简单,只需要稍微修改配置文件即可,功能也比较全,分类、归档、标签显示明了,让人一看就知道干嘛的。

NexT主题官方文档还算详细,但是有些部分的介绍不够详细,这里我做部分补充,并对自己做了修改的部分作介绍。

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件

安装 NexT

Hexo 安装主题的方式非常简单,只需要将主题文件拷贝至站点目录的 themes 目录下, 然后修改下配置文件即可。具体到 NexT 来说,安装步骤如下。

下载主题

如果你熟悉 Git, 建议你使用 克隆最新版本 的方式,之后的更新可以通过 git pull 来快速更新, 而不用再次下载压缩包替换。
在终端窗口下,定位到 Hexo 站点目录下。使用 Git checkout 代码

$ cd your-hexo-site                                                            
$ git clone https://github.com/iissnan/hexo-theme-next themes/next               

启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next。

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

验证主题

首先启动 Hexo 本地站点,并开启调试模式(即加上 –debug),整个命令是 hexo s –debug。 在服务启动的过程,注意观察命令行输出是否有任何异常信息,如果你碰到问题,这些信息将帮助他人更好的定位错误。 当命令行输出中提示出:

INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.        

此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。

当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse
Muse Scheme
现在,你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定,包括个性化以及集成第三方服务。

主题设定

选择 Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:

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

Scheme 的切换通过更改 主题配置文件,搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 即可。

设置 语言

编辑 站点配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:

language: zh-Hans        

目前 NexT 支持的语言如以下表格所示:
语言

设置 菜单

NexT主题菜单设置,用于设置博客上方导航栏,在 主题配置文件 中修改。

menu:
  home: /                       #主页
  categories: /categories    #分类页(需手动创建)
  #about: /about        #关于页面(需手动创建)
  archives: /archives        #归档页
  tags: /tags            #标签页(需手动创建)
  #commonweal: /404.html        #公益 404 (需手动创建)                

只是在menu选项中设置还不能让标签页面、分类页面生效,需要我们手动创建

标签页面

1>运行以下命令

hexo new page "tags"            

同时,在/source目录下会生成一个tags文件夹,里面包含一个index.md文件

2>修改/source/tags目录下的index.md文件

title: tags
date: 2015-09-29 14:37:02
type: "tags"

---            

3>修改主题配置文件
去掉tags的注释

menu:
  home: /                       #主页
  categories: /categories    #分类页(需手动创建)
  #about: /about        #关于页面(需手动创建)
  archives: /archives        #归档页
  tags: /tags            #标签页(需手动创建)
  #commonweal: /404.html        #公益 404 (需手动创建)

分类页面

1>运行以下命令

hexo new page "categories"                        

同时,在/source目录下会生成一个categories文件夹,里面包含一个index.md文件

2>修改/source/categories目录下的index.md文件

title: categories
date: 2015-09-29 14:47:21
type: "categories"

---            

3>修改主题配置文件
去掉categories的注释

menu:
  home: /                       #主页
  categories: /categories    #分类页(需手动创建)
  #about: /about        #关于页面(需手动创建)
  archives: /archives        #归档页
  tags: /tags            #标签页(需手动创建)
  #commonweal: /404.html        #公益 404 (需手动创建)                                 

设置侧栏

默认情况下,侧栏仅在文章页面(拥有目录列表)时才显示,并放置于右侧位置。可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。

  1. 设置侧栏的位置,修改 sidebar.position 的值
  2. 设置侧栏显示的时机,修改 sidebar.display 的值 侧栏

侧边头像设置

在next主题文件夹中的 source 目录中,创建 uploads 目录,将你的头像avatar.png放入该目录下。编辑 站点配置文件,增加avatar字段

# Avatar
avatar: /uploads/avatar.png

设置作者昵称

编辑 站点配置文件, 设置 author 为你的昵称。

站点描述

编辑 站点配置文件, 设置 description 字段为你的站点描述。站点描述可以是你喜欢的一句签名:)

多说评论

多说站点

使用多说前需要先在 多说 创建一个站点。具体步骤如下:

  1. 登录后在首页选择 “我要安装”。
  2. 创建站点,填写站点相关信息。 多说域名 这一栏填写的即是你的 duoshuo_shortname,如图: 多说
  3. 创建站点完成后在 主题配置文件 中duoshuo_shortname 字段的值设置成上一步中的值。
1
2
# Duoshuo ShortName
duoshuo_shortname: wgfxcu

至此,当你重新访问你的博客时,在每篇博文后面就会有多说的评论框。
但是,你会发现在分类页和标签页也会看到评论框,如果你感觉不爽可以通过下面的方法去掉。

去除分类页标签页多说评论

修改站点的/source/categories/目录下的 index.md 文件

---
title: categories
date: 2016-12-06 15:58:52
type: "categories"
comments: false   #去除多说评论框

---

同样修改站点的/source/tags/目录下的index.md文件即可去掉标签页的评论框.

数据统计与分析

官方提供的 数据统计与分析 配置了一下,感觉影响主题的整体美观,所以放弃了。如果有需要可以参考官网文档设置一下。

内容分享服务

官方提供的 内容分享服务 配置了一下,感觉影响主题的整体美观,所以放弃了。如果有需要可以参考官网文档设置一下。

搜索服务

官方提供的 搜索服务 有兴趣的可以折腾一下。

至此,我们的博客就搭建完成了。O(∩_∩)O哈哈~