深入HEXO博客配置

发表于 | 分类于 |

这一篇博客将用来说明HEXO博客一些高（zhuang）端（bi）的设置，包括主题、主题中的一些炫酷技巧、评论等等。

声明

这里所有关于博客的设置都以NexT主题为例。博客内容为NexT官方视同文档及本人经验总结。
在 Hexo 中有两份主要的配置文件，名称都是_config.yml。 其中，站点配置文件在根目录下，主要包含 Hexo 本身的配置；主题配置文件位于主题目录下，主要用于配置主题相关的选项。

主题

首先来选择一个自己钟爱的主题吧~在知乎上看到一个介绍得挺好的回答： 传送门
选好之后，到GitHub上下载主题文件到你的blog中themes文件夹下。然后打开站点配置文件，找到theme，把值改成next。

1
theme：next

修改之后可以在本地hexo s运行一下，如果你看到命令行中出现

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

你就可以在浏览器中输入网址来确定自己的主题是不是真的启动了。

设置语言

主题设置好了之后，看看自己的博客，总感觉有点难受啊…改一波语言！
打开站点配置文件，将language设置成你所需要的语言。相信一般都是用简体中文吧。

1
language: zh-Hans

或者你喜欢繁体的话，代码为language: zh-hk

主题设定

选择 Scheme

Scheme是NexT提供的一种特性，借助于Scheme，NexT为我们提供了多种不同的外观。同时，几乎所有的配置都可以在Scheme之间共用。目前 NexT 支持三种Scheme，他们是：
• Muse - 默认Scheme，这是 NexT 最初的版本，黑白主调，大量留白
• Mist - Muse 的紧凑版本，整洁有序的单栏外观
• Pisces - 双栏Scheme，小家碧玉似的清新
Scheme的切换通过更改主题配置文件，搜索scheme关键字。 你会看到有三行scheme的配置，将你需用启用的scheme前面注释#去掉就可以了。

1
2
3
#scheme: Muse
#scheme: Mist
scheme: Pisces

设置菜单

1
关于这里菜单的设置还不太熟悉，所以只能完全搬运了...

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是Font Awesome提供的图标，Font Awesome提供了600+的图标，可以满足绝大多数的场景，同时无须担心在Retina屏幕下图标模糊的问题。
编辑主题配置文件，修改以下内容：

  1. 设定菜单内容，对应的字段是menu。菜单内容的设置格式是：item name： link。其中item name是一个名称，这个名称并不直接显示在页面上，它将用于匹配图标以及翻译。
1
2
3
4
5
6
7
menu： 
	home： /
	archives： /archives
	#about： /about
	#categories： /categories
	tags： /tags
	#commonweal： /404.html

如果你的站点运行在子目录中，请将链接前缀的/去掉。
NexT默认的菜单项有：

键值 设定值 显示文本（简体中文）
home home: / 主页
archives archives: /archives 归档页
categories categories: /categories 分类页
tags tags: /tags 标签页
about about: /about 关于页面
commonweal commonweal: /404.html 公益 404
  1. 设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/language0.yml （language0为你所使用的语言）。 
以简体中文为例，若你需要添加一个菜单项，比如 something。那么就需要修改简体中文对应的翻译文件languages/zh-Hans.yml，在menu字段下添加一项： 
1
2
3
4
5
menu: 
	...
	...
	commonweal： 公益404
	something： 有料

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

    菜单图标配置示例:


    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu_icons:
    	enable: true
    	# Icon Mapping.
    	home: home
    	about: user
    	categories: th
    	tags: tags
    	archives: archive
    	commonweal: heartbeat


* 在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的Font Awesome图标名字） 的情况下，NexT 将会使用 作为图标。

  • 请注意键值（如home）的大小写要严格匹配

设置侧栏

默认情况是，侧栏只会在文章页面（拥有目录列表）的时候才会显示，并且在右侧。我们可以通过更改主题配置文件里面的sidebar来设置他的位置和显示的时机。

  1. 侧栏的位置，修改sidebar.position的值，这里有两个选项：

    • left - 靠左
    • right - 靠右

  2. 侧栏显示的时机，修改sidebar.display的值（侧栏在use motion: false的情况下不会展示）:

    • post - 默认行为，在文章页面（拥有目录列表）时显示
    • always - 在所有页面中都显示
    • hide - 在所有页面中都隐藏（可以手动展开）
    • remove - 完全移除

设置头像

相信没有人会喜欢原来的那种尬图吧- -
头像有两种设置方式：

  1. 第一个是官方文档推荐的：编辑主题配置文件， 修改字段avatar， 值设置成头像的链接地址。其中，头像的链接地址可以是：
地址 值
完整的互联网 URI http://example.com/avatar.png
站点内的地址 将头像放置主题目录下的 source/uploads/ （如果没有uploads，就新建一个）
配置为：avatar: /uploads/avatar.png

或者放置在source/images/目录下
配置为：avatar: /images/avatar.png
  1. 当然是暴力覆盖啦~我们可以从上面说的文件夹里面看到我们默认的头像，我们只需要将我们想要设置的头像改成一样的名字然后替换原来的图就行了。

其他设置

我们打开站点配置文件，可以看到最上面一排的内容是下面这样的，可以参照一下我自己的：

1
2
3
4
5
6
7
#Site
	title: One Room	//博客标题
	subtitle: 一个人没什么不能征服。	//副标题
	description: 遇见你的时候	//个性签名
	author: CSeventh	//你的昵称
	language: zh-Hans	//语言设置
	timezone:	//时区，不懂就别碰他- -

未完待续