hexo 主题制作

原文转自博客:https://mser.xyz/2019/08/05/hexo_theme/

背景介绍

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

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

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

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

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

手动构建

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

├── 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,更多详细内容可以查看官方文档

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

Yeoman 生成基本框架

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

数据填充

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

部署后点击分类 404

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

一些插件

WordCount 字数统计

// 安装
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)

卜蒜子 阅读量统计

<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