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
现在,你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定,包括个性化以及集成第三方服务。
主题设定
选择 Scheme
Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:
- Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
- Mist - Muse 的紧凑版本,整洁有序的单栏外观
- 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 字段来控制侧栏的行为。侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。
- 设置侧栏的位置,修改 sidebar.position 的值
- 设置侧栏显示的时机,修改 sidebar.display 的值
侧边头像设置
在next主题文件夹中的 source 目录中,创建 uploads 目录,将你的头像avatar.png放入该目录下。编辑 站点配置文件,增加avatar字段
# Avatar
avatar: /uploads/avatar.png
设置作者昵称
编辑 站点配置文件, 设置 author 为你的昵称。
站点描述
编辑 站点配置文件, 设置 description 字段为你的站点描述。站点描述可以是你喜欢的一句签名:)
多说评论
多说站点
使用多说前需要先在 多说 创建一个站点。具体步骤如下:
- 登录后在首页选择 “我要安装”。
- 创建站点,填写站点相关信息。 多说域名 这一栏填写的即是你的 duoshuo_shortname,如图:
- 创建站点完成后在
主题配置文件中duoshuo_shortname 字段的值设置成上一步中的值。
|
|
至此,当你重新访问你的博客时,在每篇博文后面就会有多说的评论框。
但是,你会发现在分类页和标签页也会看到评论框,如果你感觉不爽可以通过下面的方法去掉。
去除分类页标签页多说评论
修改站点的/source/categories/目录下的 index.md 文件
---
title: categories
date: 2016-12-06 15:58:52
type: "categories"
comments: false #去除多说评论框
---
同样修改站点的/source/tags/目录下的index.md文件即可去掉标签页的评论框.
数据统计与分析
官方提供的 数据统计与分析 配置了一下,感觉影响主题的整体美观,所以放弃了。如果有需要可以参考官网文档设置一下。
内容分享服务
官方提供的 内容分享服务 配置了一下,感觉影响主题的整体美观,所以放弃了。如果有需要可以参考官网文档设置一下。
搜索服务
官方提供的 搜索服务 有兴趣的可以折腾一下。
至此,我们的博客就搭建完成了。O(∩_∩)O哈哈~