挑选和初步配置Hexo主题

在从零开始了解Hexo博客和从零开始新建Hexo博客中已经阐述了Hexo博客搭建的基本配置。如果所有的博客都是千篇一律，独立博客失去了自身的活力。挑选一个心仪的主题会是给博客添加活力，为自己增添动力的好办法。

选择喜欢的主题

Hexo博客社群中存在大量的优质主题，可以在官方主题展示中挑选自己喜欢的。当然，你也可以自己新建。对于新手，建议先从模仿开始，了解优秀主题之后，再着手创造。
有选择苦难症的可以参考知乎的帖子：有哪些好看的 Hexo 主题？。个人建议还是以官方主题展示为主。优秀的主题都已经为使用者做足了功夫，下载安装方便，配置简单，并且PC、移动端各个屏幕适配毫无压力。

优秀主题

优秀主题太多，这里列出目前自己喜欢的风格。

NexT.Mist：目前自己的主力模版。
tranquilpeak：喜欢这个风格，所以保留。
apollo:发现这个主题是因为无意中搜到了这个博客。主题的灵感来源:modified from SANOGRAPHIX.NET。对简洁有美感的设计没有抵抗力。

更多的优秀主题，可以参见优秀Hexo博客主题

主题配置通用方法

主题配置的方法主要有这几个步骤：

下载-下载对应的主题文件放到对应的目录。
连接-修改自己的“_config.yml”文件，能够读取到主题目录。
测试-本地环境测试主题是否正常工作。

在第一步“下载”有两种方法：命令行安装 & 直接下载文件拷贝安装。具体的安装方法一方面根据主题的官方文档要求做，另一方面结合自己的技术水平选择。

下载方法一：命令行安装

在一些主题的安装文档里，都会给出下面的代码。

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

这段代码的含义是把“https://github.com/iissnan/hexo-theme-next ”这个网址的仓库的内容拷贝到你的本地目录下的子目录”themes/next”中。这里用“next”举例，https后面是你期望安装的仓库目录，“themes／nest”中的“next”会根据选择的主题有所变化。

注意：如果你是新手，我强烈建议你把这段代码修改一下，把 “clone” 改为 “submodule add” ，示例代码如下

1	git submodule add https://github.com/iissnan/hexo-theme-next themes/next

因为一般Hexo主题是一个独立的仓库，用 git clone 是在把一个独立的仓库拷贝到你的Hexo源码中，你的Hexo源码也是一个仓库。所以就产生了父子关系，也就是说主题仓库成为了你的主仓库下的一个独立子仓库。所以你还需要执行submodule的操作。如果不做这个操作，本地环境没有问题，在github上传文件部署时会收到报错的邮件，无法生成博客。我就掉过这个大坑。关于submodule的相关知识会在以后的博客介绍。

如果你坚持要用“git clone”操作，有两个办法处理问题：

手工添加.gitmodule的文件到自己仓库的目录下。
把submodule中的git文件删除

到这里，文件下载工作就算完成了。

下载方法二：直接下载文件拷贝安装

官方文档会给出下载地址，如果没有找到，可以在GitHub仓库->Code->Releases中找到对应的发布版本。
下载压缩包之后解压缩，把文件放到自己的博客“themes”文件夹下。文件下载的工作就完成了。

两种方法各有利弊

方法一：后续的主题更新直接pull就可以，因为主题的数据源是仓库的一个源。在初步的配置时按照上面的方法做就好了。对于初学者有一定的难度。
方法二：初步的安装简单，如果后续主题升级，还需要下载安装包，覆盖原来的文件可能出错。如果不覆盖，需要重新配置主题。

个人建议：方法一更适合长期的博客维护，submodule的知识学习一下，稍后我也会写博客说明。

后续的配置步骤

在文件下载完毕后，需要在你的博客配置文件”_config.yml”中修改主题。代码如下：

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

可以理解为告诉hexo，当我要调用主题文件时，调用自己的”themes/next”文件夹下的文件。

下一步进行本地的环境测试，如果 http://localhost:4000 主题的安装配置初步完成！

hexo s

案例说明

我的选择

根据不同的个人喜好，每个人会有不同的选择。我选择时主要考虑：可供性强、界面简洁、素雅、交互设计、移动适配、文档技术支持完善程度等。最终选择了Next.Mist。

主题故事

iissnan在主题一周年的时候写下了当时设计主题的故事

我用了一圈就没一个对的上眼的主题。我要的其实很简单啊（遇到说这种话的客户，请直接拒绝，不要问我为什么），只要显示文章内容就好了啦，不要侧边栏啦，不要社交啦，最好字体好看点，排版优美点，颜色搭配舒服点，整体大气点，访问速度快一点，动画特效多一点。于是就有了 Notes（果然记录什么的这种事情不重要）。
在制作 NexT 的过程中，第一要素是保证其易用性。如果一个功能超级炫丽，但难于使用，那宁可不做（真是漂亮的借口）。这一点可以追溯到偶像诗人白居易，他的诗可以通俗到妇孺皆知，确实有一定手段。那么 NexT 目标亦即如此，谨慎对待自己使用都觉得麻烦的功能。比如说，自定义 Icon Font 这个功能，其实我自己都觉得修改很麻烦，所以一直想把这个功能去除掉（在最近的一个版本中，我终于克服拖延症把它给去掉了）。

这就是我想要的主题，和当初我选择它的原因如出一辙，有一种莫名的激动。

下面以我的初步配置为例讲解，如果是选择同一个主题的初级小伙伴，可以考虑直接拷贝粘贴代码。

下载主题（直接使用submodule方法）

1	git submodule add https://github.com/iissnan/hexo-theme-next themes/next

修改Hexo的配置文件（如果对vi不熟悉，建议直接打开文件修改）

1	vi _config.yml

文件修改为

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

由于Next主题自带下面的三种

Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新
找到主题文件中的_config.yml,修改如下：
1
2
3
4
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

本地环境验证

hexo s

输入代码后在本地localhost验证。

其他配置

对于改主题的其他配置会单独写一篇播客作为记录。

陌生主题举例

用一个自己完全陌生的主题tranquilpeak举例，如何在十分钟时间配置一个demo。关于Hexo博客建立的问题，这里就不详述了。

了解到这个主题纯粹是机缘巧合，看到了Tags plugins showcase这篇文章，觉得这个主题不错，稍加留心，就会发现一般在页脚会有主题的信息，很容易找到github的文件，如果页脚没有，就找博主的github账户寻找信息。

找到了hexo-theme-tranquilpeak的源文件，下一步是找到安装和配置方法，一般来说，制作精良的主题都会有文档介绍。果然，在README.md里找到了User documentation。

快速翻看文档，找到了Installation和Configuration部分。一般主题安装或者是直接代码部署，要么是下载安装包。这里文档推荐了后者，按照要求下载压缩包，解压缩放到自己的博客源文件themes文件夹下。为什么放在这里，这是Hexo的文件目录结构决定的。

进行基本配置，首先修改_config.yml中的theme文件，让博客更换到这个主题，只要本地环境能正常显示，博客初步完成了主题连接。然后是配置了，关于配置，都是根据文档加上自己的经验来操作，文档里都有，就不细说了。

这个过程里自己遇到了一点小麻烦，一般要修改作者的头像和基本介绍信息，或者在”about”页面，或者在全局的_config.yml中，但是在这里是在主题的_config.yml以及language配置页中，非常出乎我的意料。怎么找到呢？直接在文档里搜索关键字就好了，比如说搜author、picture等等，找到了相关信息，一步一步按照线索继续顺藤摸瓜，很快就会熟悉起来。在这过过程里还找到了一些文档里的小bug，文档说语言是zh-CN，其实是zh-cn。大小写之差导致文件不生效。这样的小问题的解决，随着积累的经验够多，很快就会有建立起自己的内隐知识。

Reference

完

声明: 本文转载需标明出处，禁止用于商业目的。

ChangeLog

161108 新建博客
161109 更新博客内容
161110 发布博客内容
161123 新增主题来源故事