原文转自博客：https://mser.xyz/2019/08/05/hexo_theme/
背景介绍
hexo 是一个免费简单的博客框架，有很多好看开源主题，但是当你看到别人的博客和你自己的博客一模一样的时候，还是有点奇怪，熟悉又陌生的感觉
Hexo 内建 Swig 模板引擎，但是可以另外安装插件来获得 EJS、Haml 或 Jade 支持，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>
参考文章
*hexo 主题制作官方文档： https://hexo.io/zh-cn/docs/permalinks
网友评论