原文轉(zhuǎn)自博客：https://mser.xyz/2019/08/05/hexo_theme/
背景介紹
hexo 是一個免費簡單的博客框架，有很多好看開源主題，但是當你看到別人的博客和你自己的博客一模一樣的時候，還是有點奇怪，熟悉又陌生的感覺
Hexo 內(nèi)建 Swig 模板引擎，但是可以另外安裝插件來獲得 EJS、Haml 或 Jade 支持，Hexo 根據(jù)模板文件的擴展名來決定所使用的模板引擎，例如：layout.ejs，layout.swig
我有嘗試過用 Swig，畢竟不需要安裝插件，但是用過之后還是果斷換回了 Pug(原 jade )，如果你兩種模板引擎都沒接觸過那推薦你用 Swig，上手簡單會快些，但如果你也是 Pug 的忠實粉絲，那么還是安裝插件吧
你需要安裝 2 個插件，渲染 jade 頁面的插件和熱更新的插件，并保存在 packagejson devDependencies 是開發(fā)時需要的插件
npm install hexo-server hexo-browsersync hexo-renderer-jade --save-dev
手動構(gòu)建
在...\blog\themes 新建一個文件夾，文件夾名稱是你主題的名字，一個主題可能是這樣的結(jié)構(gòu)
├── languages 語言文件，用于國際化
├── layout 頁面模板文件
├────── index 首頁，url 根目錄默認加載首頁
├────── Archive 歸檔頁
├────── Tag 標簽頁
├────── Category 分類頁
├────── Post 文章頁
├────── Page 頁面詳情，像404、友鏈這種自定義頁面都是在 page 頁面
├── scripts 腳本文件夾，在啟動時，Hexo 會載入此文件夾內(nèi)的 JavaScript 文件
├── source 主題資源文件，包括頁面樣式，腳本，字體等
├────── css
├────── js
├────── img
如果你的網(wǎng)站在二級目錄可以在網(wǎng)站配置文件_config.yml 更改 url
每個主題都可以有一個 layout 的頁面布局文件，因為像 footer、header 等都是可以做復用的，所以我們可以最大化的利用 pug 或者 swig 等模板引擎的局部模板功能
比如 pug，更多詳細內(nèi)容可以查看官方文檔
extends // 被繼承的模板路徑
block // 定義一個代碼塊，可以被子模塊填充、修改、覆蓋
prepend // 向塊的頭部添加內(nèi)容
append // 向塊的尾部添加內(nèi)容
Yeoman 生成基本框架
npm install yo -g // 全局安裝 Yeoman
npm install generator-hexo-theme -g // 主題生成工具
yo hexo-theme // 生成主題
數(shù)據(jù)填充
hexo 提供了很多輔助函數(shù)和變量
在開發(fā)過程中 hexo 是服務端渲染，所以他的所有變量是 node 的全局變量，非頁面的
部署后點擊分類 404
分類是使用輔助函數(shù) list_categories() 生成, 本地一切正常部署后點擊分類是 404,我原來的分類名稱是小寫字母，后來我自己改成全部大寫，就出現(xiàn)了這個問題, 這是因為git 遠程倉庫文件名稱沒有改變，清空后重新上傳就好
一些插件
WordCount 字數(shù)統(tǒng)計
// 安裝
yarn add hexo-wordcount
# or
npm i --save hexo-wordcount
// 字數(shù)統(tǒng)計
wordcount(post.content)
// 閱讀時長預計
min2read(post.content)
// 設置閱讀速度
min2read(post.content, {cn: 300, en: 160})
// 總字數(shù)統(tǒng)計
totalcount(site)
卜蒜子 閱讀量統(tǒng)計
<script async src="http://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
