hexo是如何运作的

说来惭愧，用hexo几个月了，却对hexo本身没什么了解，今天看了下vue-cli的原理，感觉和hexo有相似之处，才打算深入了解一下hexo的构建原理。

hexo的文件结构

新建一个hexo项目，就可以看到hexo的核心文件结构了，如下

├── _config.yml 
├── db.json
├── node_modules 
├── package.json
├── public 
├── scaffolds 
├── source #所有文章文件放在这里
└── themes #主题文件夹

_config.yml 站点的配置文件。
db.json 缓存文件
node_modules 安装的插件以及hexo所需的一些node.js模块。
package.json 应用程序信息，配置hexo运行需要的js包。
public 最终所见网页的所有内容
scaffolds 模板文件夹。当新建一个文章时，会默认包含对应模板的内容。
source 资源文件夹是存放用户资源的地方。所有的源文件都会被保存在_post文件夹中。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes 存放主题文件，hexo会根据主题来生成静态页面。

值得注意的是source文件和themes文件是同级的，其中sources有点类似于mv*项目中的model，而themes则为view，两者完全分离开来，为hexo主题多样性提供了可能性。

hexo的模板引擎

Hexo 的模板引擎是默认使用 ejs 编写的。hexo首先会解析 md 文件，然后根据 layout 判断布局类型，再调用其他的文件，这样每一块的内容都是独立的，提高代码的复用性。最终会生成一个 html 页面。

模板文件在 layout 文件夹下，layout 文件文档结构如下：

├── _custom                           // 通用布局
├── _layout.swig                      // 默认布局布局
├── _macro                            // 插件模板
├── _partials                         // 局部布局
├── _scripts                          // script模板
├── _third-party                      // 第三方插件模板
├── archive.swig                      // 归档模板
├── category.swig                     // 分类模板
├── index.swig                        // 首页模板
├── page.swig                         // 其他模板
├── photo.swig                        // 照片模板（自定义）
├── post.swig                         // 文章模板
├── schedule.swig                     // 归档模板
└── tag.swig                          // 标签模板

在我们新建页面或者新建文章的使用可以选定我们使用的模板，它就会使用对应的模板。
其中 _layout.swig 是通用模板，里面引入了 head、footer 等公共组件，然后在其他的模板中会引入这个 _layout.swig 通用模板

整体渲染流程如下：

第一次渲染：

1
2
3

输入：source中的md源文件
模板引擎：yml配置和markdown语法
输出：article对象，包含其基本属性title、date、tags、categories、content等等

第二次渲染：

1
2
3

输入：1.上次渲染的article对象   2.themes主题样式文件
模板引擎：ejs等（取决于themes/layout文件下的文件格式
输出：publice下文件成型的网站页面

当我们用hexo 命令行时，我们在用什么

hexo其实可以粗略的分为三个项目分别是hexo-cli、上文提到的hexo-core、以及广义上的hexo-plugins用于给hexo提供扩展功能
其中命令行功能，就用到了hexo-cli

1
2
3

1.启动hexo命令(进程)，及其参数解析机制。每次我们输入’hexo xxx’命令后，都会通过node调用hexo-cli中的entry函数(比如，可以把’hexo init’视为’node hexo-cli/entry.js init’)
2.实现hexo命令的三个初始参数(功能): init / version / help
3.加载hexo核心模块，并初始化

总结

hexo简洁、强大的功能来自于自身优雅的系统设计:
hexo进程启动、hexo核心对象封装、插件系统分别独立
自身采用插件驱动，生来就具备高可扩展性

hexo的文件结构

hexo的模板引擎

当我们用hexo 命令行时，我们在用什么

总结

参考资料