Hexo是现在比较主流的静态博客生成框架，但我个人的感受来讲，Hexo 的主题虽然有两百多个，但是能拿出手的也就不到二十个。

本文主要记录了我从零开发 Hexo 主题时，遇到的一些问题，自己作为备份。

所有内容仅供参考

基础知识储备

模板引擎

传统的 HTML 写起来既不方便，又不能复用，因此在 Hexo 中通常使用模板引擎来呈现网站内容。

常用的几种模板引擎有：Swig、EJS、Haml 或 Jade。其中 Jade 由于商标问题，改名为 Pug，虽然它们是兼容的，但使用的时候，推荐安装 Pug 而不是 Jade。Hexo 内置了 Swig，将文件扩展名改为 .swig 即可使用，你也可以安装插件来获得另外几种模板引擎的支持，Hexo 会根据文件扩展名来决定使用哪一种。例如：

1
2
layout.pug   -- 使用 pug
layout.swig  -- 使用 swig

这里你需要做的是，选择一个自己喜欢的模板引擎，然后浏览文档，了解这个模板引擎的基本用法。

  • 英文文档地址分别如下：Swig、EJS、Pug、Haml。
  • 中文文档地址分别如下：Swig、EJS、Pug、Haml（无）。

这里我选择了 Pug，不过我还是推荐使用 Swig 或 EJS。

CSS 预处理语言

你可以使用原生 CSS 来写样式，但是原生 CSS 难以复用，不能使用循环，不能使用布尔判断，书写不够方便，等等。这会导致主题开发变得相对麻烦，甚至某些功能无法实现，因此最好是使用 CSS 预处理语言。

常见的 CSS 预处理语言有：Less、Sass、Stylus。至于它们的选择，根据自己的喜好即可。Hexo 默认使用的是 Stylus，它的功能足够强大，完全够用，因此我选用了 Stylus。

安装对应的Hexo插件

搭建完 Hexo 开发环境后，需要安装相关插件来支持你所使用的渲染引擎。Hexo 默认安装的渲染引擎是 EJS 和 Stylus，并且 Hexo 内置了 Swig，因此，如果你选用了 EJS + Stylus 或 Swig + Stylus，那么可以忽略这段，如果你选择了其他的渲染引擎，需要自行选择安装：

1
2
3
4
5
6
7
8
9
# Templates
npm install --save hexo-renderer-ejs
npm install --save hexo-renderer-pug
npm install --save hexo-renderer-haml

# Styles
npm install --save hexo-renderer-less
npm install --save hexo-renderer-sass
npm install --save hexo-renderer-stylus

编写主题的简化插件

使用hexo init newsite创建一个Hexo站点后，需要创建主题的文件目录，你可以参考着已有的主题的文件目录手动创建，也可以使用 Yeoman 自动生成，使用 Yeoman 自动生成的步骤如下。

  1. 安装

    1
    2
    npm install --global yo
    npm install --global generator-hexo-theme

  2. 生成

    进入 Hexo 的 themes 目录中，新建一个文件夹作为你的主题目录，然后进入该文件夹中，执行指令：

    1
    yo hexo-theme

    按照提示，填写或选择相应的信息，如下图：

    image-20210719163542668