背景介绍

hexo 是一个免费简单的博客框架，有很多好看开源主题，但是当你看到别人的博客和你自己的博客一模一样的时候，还是有点奇怪，熟悉又陌生的感觉

Hexo 内建 Swig 模板引擎，但是可以另外安装插件来获得 EJS、Haml 或 Jade 支持，Hexo 根据模板文件的扩展名来决定所使用的模板引擎，例如：layout.ejs，layout.swig

我有尝试过用 Swig，毕竟不需要安装插件，但是用过之后还是果断换回了 Pug(原 jade )，如果你两种模板引擎都没接触过那推荐你用 Swig，上手简单会快些，但如果你也是 Pug 的忠实粉丝，那么还是安装插件吧

你需要安装 2 个插件，渲染 jade 页面的插件和热更新的插件，并保存在 packagejson devDependencies 是开发时需要的插件

1

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

手动构建

在…\blog\themes 新建一个文件夹，文件夹名称是你主题的名字，一个主题可能是这样的结构

1
2
3
4
5
6
7
8
9
10
11
12
13

├── languages       语言文件，用于国际化
├── layout          页面模板文件
├────── index       首页，url 根目录默认加载首页
├────── Archive     归档页
├────── Tag         标签页
├────── Category    分类页
├────── Post        文章页
├────── Page        页面详情，像404、友链这种自定义页面都是在 page 页面
├── scripts    脚本文件夹，在启动时，Hexo 会载入此文件夹内的 JavaScript 文件
├── source     主题资源文件，包括页面样式，脚本，字体等
├────── css
├────── js
├────── img

如果你的网站在二级目录可以在网站配置文件_config.yml 更改 url

每个主题都可以有一个 layout 的页面布局文件，因为像 footer、header 等都是可以做复用的，所以我们可以最大化的利用 pug 或者 swig 等模板引擎的局部模板功能
比如 pug，更多详细内容可以查看官方文档

1
2
3
4

extends // 被继承的模板路径
block   // 定义一个代码块，可以被子模块填充、修改、覆盖
prepend // 向块的头部添加内容
append  // 向块的尾部添加内容

Yeoman 生成基本框架

1
2
3

npm install yo -g // 全局安装 Yeoman
npm install generator-hexo-theme -g // 主题生成工具
yo hexo-theme // 生成主题

数据填充

hexo 提供了很多辅助函数和变量
在开发过程中 hexo 是服务端渲染，所以他的所有变量是 node 的全局变量，非页面的

部署后点击分类 404

分类是使用辅助函数 list_categories() 生成, 本地一切正常部署后点击分类是 404,我原来的分类名称是小写字母，后来我自己改成全部大写，就出现了这个问题, 这是因为git 远程仓库文件名称没有改变，清空后重新上传就好

一些插件

WordCount 字数统计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 安装
yarn add hexo-wordcount
# or
npm i --save hexo-wordcount

// 字数统计
wordcount(post.content)

// 阅读时长预计
min2read(post.content)

// 设置阅读速度
min2read(post.content, {cn: 300, en: 160})

// 总字数统计
totalcount(site)

卜蒜子 阅读量统计

1
2

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

gitalk, gitment 评论模板

参考文章

*hexo 主题制作官方文档： https://hexo.io/zh-cn/docs/permalinks