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