Hexo主题开发（Ginkgo）

Hexo
折腾
发布日期:   2021-01-31
更新日期:   2023-01-27
文章字数:   848
阅读时长:   3 分

经历了诸多岁月和诸多 Hexo 主题尝试以后，决定自己开发一版简洁的，能实现基本功能的 Hexo 主题，作为一个折腾的小目标，让博客写作过程完全可控（指不用折腾主题配置）。
作为一个常年后端搬砖工，前端满足于能看能点就 OK，不用去强求炫酷的特效和强大的功能。

持续更新

主题功能列表

第〇步，使用其他人的主题

使用时间最长的主题是 viosey 大佬的 hexo-theme-material，折腾一段时间后使用感觉良好，但对 MaterialDesign 渐渐审美疲劳。
目前是用的主题是hexo-theme-matery，虽然大框架也是 materialDesign（真香），github 上 fork 后进行了轻微的魔改，保留了一些基本功能。

第一步，Hexo 基础

文档

Hexo 官方提供了一个比较详细的指引文档，https://hexo.io/zh-cn/docs ，重点是关于 链接定义 ， 变量 部分的内容，hexo 的主要流程就是把 Markdown 根据主题内定义的方式生成指定的 HTML，主题的核心部分即为 HTML 的模板文件（ejs 等），最基础的是把 Markdown 中的内容显示出来，然后进行 UI 的优化，让页面更好看，最后可以适当集成部分功能，如评论、打点等。

主题基础结构

├── README.md
├── _config.yml # 主题配置文件
├── languages  # i18n语言目录，定义本地化展示语言，在模板中通过__('key')调用
│   ├── default.yml
│   └── zh-CN.yml
├── layout  # 主题结构目录，存放各个页面模板文件
│   ├── _partial
│   │   ├── aside.ejs
│   │   ├── footer.ejs
│   │   ├── head.ejs
│   │   └── header.ejs
│   ├── archive.ejs
│   ├── index.ejs
│   ├── layout.ejs
│   ├── links.ejs
│   └── post.ejs
├── package.json
├── scripts   # 脚本目录，是hexo构建过程中是用的脚本，而不是构建完成后页面是用的js脚本目录
│   ├── helper.js
│   └── lib
│       ├── bulma_paginator.js
│       └── bulma_toc.js
└── source  # 资源文件，构建完成后页面使用的css/js等，不会参与hexo构建，会原样复制到构建完成目录中
    └── css
        ├── bulma-timeline.min.css
        └── custom.css

第二步，UI 样式确定

Hexo 文档通读一遍后，确定好主题目录的基本结构，然后就开始进行 UI 的设计，目前现成的开源 UI 组件类型丰富，可供选择的很多，基于从简的原则，最基本的 css 组件即可满足要求，经过多方比较，最后选择了bulma 作为主题的基本 UI 框架。只要掌握一些基本的 css 知识就可以进行学习使用，无需特别高的前端开发能力。

第三步，开发

主题重点开发的几个页面为

  1. index ：主页内容
  2. archive ：归档页面内容（tags,categories 也会使用该页面)
  3. post ：文章详细内容页

页面主体模板为 layout.ejs ，用以确定整个页面的结构，包括一些公共组件的集成（基础 css），页面框架定义等。

页面模板采用 ejs 引擎渲染，标记为 <% %> ，文档，可以通过 <% partial('页面文件名称') %> 来进行 import 组合

Hexo
评论
  目录