Hexo 主题开发

最后更新:

去年就开始说要更新博客主题了,拖到现在终于有点空闲时间和动力了,相信大家已经使用过 Hexo 了,安装之类的我都不多废话了,直接开始。

想要自定义一个 Hexo 主题大概需要了解一个 模板引擎,Hexo 内置了 Swig,我所用的是默认安装的 EJS,反正都差不多,都提供了一些模板语法,书写还是按照Js的方法来的。
然后先按照文档创建完主体目录结构和模板组件,就可以开始开发了,我比较偷懒没有使用 yeoman + generator-hexo-theme 来创建,直接复制了原先的 landscape 主题。

哦,对了!还要选择一个CSS预编译器,我还是没有选择适用了默认安装的 Stylus,你也可以按照习惯去安装,并且 install 对应的 Hexo 插件。

# 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 会自动按照文件后缀名使用对应的拓展编译文件。

📚 前置学习

以上三个文档希望你可以完整阅读完,特别是辅助函数,会在制作过程中反复用到,也是最关键的部分,我相信大家已经对 [html, css, js] 三剑客很熟悉了,就不提他们了。

完整目录如下:

.
│
├─ layout    # 布局文件夹
│   ├─ partials  # 局部模版
│   │   └─ recent-posts.ejs # 列表页文章Item
│   ├─ index.ejs      # 首页模板
│   ├─ layout.ejs     # html结构
│   ├─ post.ejs       # 文章列表模板
│   ├─ archive.ejs    # 归档列表模板
│   ├─ category.ejs   # 分类归档列表模板
│   ├─ tag.ejs        # 标签归档列表模板
│   └─ page.ejs       # 单页模板
├─ scripts  # 脚本文件夹
├─ source   # 资源文件夹
│   ├─ css
│   ├─ js
│   └─ favicon.ico
├─ .editorconfig  # 编辑器配置文件
├─ _config.yml    # 主题配置文件
└─ package.json   # 项目包管理文件

—– 未完成 ——


遇到问题

# 使用 is_current(path) 判断生成的 ‘active’ 类不会在对应分类添加,只会执行一次
查看引入的部件 <%- partial('partial/xxx',{ cache: <Boolean> }) %> 部分是否开启了缓存,文档 模版 | Hexo

# 使用 hexo-prism-plugin 进行代码高亮处理,但是在列表页的预览内容中的代码块不会被处理
其实会被处理,只是我在用 hexo-theme-unit-test 测试的时候有使用 代码块标签插件 的测试文章,类似这样:

{% codeblock lang:js mark:1,7-8,10 %}
const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
{% endcodeblock %}

需要开启 prismjs,默认是关闭的,在 _config.yml 中开启即可。

# orderby 有哪些可选参数?

  • name 名称
  • length 文章数
  • random 随机排列

尾声

如果需要发布你的主题,那么我会在另一篇文章中来记录。我先挖一个坑,因为自己制作完主题之后还没有按照文档规范走完流程。

资源