Hexo 主题开发指南

前言

本文记录开发一个Hexo主题的流程，尽量用简洁、通俗易懂的文字内容呈现给大家。

基础知识

制作 Hexo 主题，除了需要了解 HTML / CSS / JavaScript 之外，还需要了解两个主要的技术。首先一个是模板引擎：Hexo支持主流的模板引擎，像 EJS / Jade / Swig 等；另外一个是 CSS 预处理：如 SASS / LESS / Stylus ；当然，这两个不用，直接使用 HTML / CSS 也是可以的，只不过可能效率会低一点。在本文中，选择使用如下两个：

Stylus : 语法文档
Pug : 语法文档

搭建Hexo主题开发环境

首先需要搭建一个Hexo的博客环境。去Hexo的官网，按提示安装hexo-cli，然后在本地创建一个Hexo博客的目录。它会预先置入一个默认主题landspace以及一篇默认的hello world文章。当然我们不是在landspace上修改，我们需要自己撰写。

主题在写的时候我们需要实时看到效果，而不是写完重新构建一遍才能看到效果，所以需要借助hexo-server和hexo-browsersync的帮助。

另外我们的主题需要pug和stylus的渲染引擎。

hexo-server : 能够开启一个小型服务器，自动构建来展示hexo博客的页面。
hexo-browsersync : 能够在你修改了主题文件的时候自动帮你刷新浏览器，帮你省去刷新的动作。

安装 hexo-server、hexo-browsersync、pug和stylus：

1	npm install hexo-server hexo-browsersync hexo-renderer-jade hexo-renderer-stylus --save-dev

注意，新版的hexo-renderer-jade已经包括了处理pug的渲染引擎。

问题及解决

安装了hexo-browsersync之后也不能实现修改pug文件之后刷新出修改后的结果。只能实现自动刷新，但是刷新了之后还是修改前的页面。在你的node_modules文件夹里找到hexo-renderer-jade的文件夹，然后将里面lib/pug.js（jade同理）的其中一行代码注释掉：

1	// pugRender.compile = pugCompile

使其能够达到预期的刷新并修改的效果.

主题的基本结构

Hexo主题主要由以下几个页面组成：

index 首页
archive 存档页
tag 标签文章列表页
category 分类文章列表页
post 文章详情页
page 页面详情页

这些页面是Hexo在生成HTML文件时要用到的，全部放在layout文件夹中。由于这些页面里有很多代码是重复的（比如HTML文件的head部分、页面的顶部导航、底部版权部分等），为了修改方便，结构简洁，一般会将可重复的部分提出来，再利用模版引擎来引入。
此外，还有些JS/CSS/图片/favicon.ico一类的文件，不需要Hexo进行转换，直接就在HTML页面引用了，所以全部放在主题的source文件夹中。

使用 yeoman 生成基础代码

如果我们创建了一个主题文件夹后，一个一个的创建主题文件是不是很麻烦呢？现在有yeoman库，我们称之为“主题脚手架”，可以很方便的创建主题所需要的基本结构。

1.安装 yeoman

1	npm install yo -g # 全局安装

2.安装生成器的库

1	npm install generator-hexo-theme -g # 全局安装

现在我们就拥有了一个可以生成主题目录结构的脚手架工具。

3.创建主题目录

然后到自己的博客目录之下，进入到 themes 目录，创建一个用主题名命名的新文件夹，比如test，进入新文件夹，先设置一下目录的权限，否则 yeoman 会提示权限不足：

1	chmod 675 ./

4.生成主题基本结构

执行如下命令，开始生成代码

1	yo hexo-theme

然后选择一些基本的配置，比如使用什么模板引擎，使用什么 CSS 预编译等，这里分别选择 pug 和 Stylus。完成之后，主题目录下就会生成一些如下结构的文件：

.
├── _config.yml # 主题配置文件
├── layout # 布局文件夹
│   ├── archive.pug # 归档页
│   ├── category.pug # 分类页
│   ├── includes # 复用的公共页
│   │   ├── layout.pug # 页面布局
│   │   ├── pagination.pug # 翻页模板
│   │   └── recent-posts.pug # 文章列表模板
│   ├── index.pug # 主页
│   ├── page.pug # 页面详情页
│   ├── post.pug # 文章详情页
│   └── tag.pug # 标签页
└── source # 资源文件夹
    ├── css # CSS
    │   └── test.styl
    ├── favicon.ico # 站点图标
    └── js # JS
        └── test.js

使用新主题

在 Hexo 的主配置文件中使用新主题，到博客根目录下找到 _config.yml 文件，找到theme行，修改如下：

1	theme: test

hexo s 启动博客，到浏览器看看效果吧。