Hexo 主题开发指南

前言

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

基础知识

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

搭建Hexo主题开发环境

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

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

另外我们的主题需要pugstylus的渲染引擎。

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

安装 hexo-serverhexo-browsersyncpugstylus

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

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

问题及解决

  1. 安装了hexo-browsersync之后也不能实现修改pug文件之后刷新出修改后的结果。只能实现自动刷新,但是刷新了之后还是修改前的页面。在你的node_modules文件夹里找到hexo-renderer-jade的文件夹,然后将里面lib/pug.jsjade同理)的其中一行代码注释掉:
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。完成之后,主题目录下就会生成一些如下结构的文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.
├── _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 启动博客,到浏览器看看效果吧。

坚持原创技术分享,您的支持将鼓励我继续创作!