HexoPress 是一个基于 Electron 的桌面应用,为 Hexo 博客提供可视化的管理界面。这篇文章从宏观角度介绍它的技术架构,帮助你快速建立对整个项目的认知。
三进程模型
和所有 Electron 应用一样,HexoPress 由三个进程协作运行:
主进程负责应用的生命周期管理和系统级操作。它承载了三个核心服务:一个与 Hexo 交互的代理层,一个处理文件系统操作的服务,以及一个用于图片预览的本地 HTTP 服务器。所有需要访问 Node.js 能力的操作都在这里完成。
预加载脚本是主进程和渲染进程之间的安全桥梁。它通过 Electron 的 Context Bridge 机制,将主进程的能力以类型安全的 API 形式暴露给渲染进程。渲染进程无法直接访问 Node.js,所有的系统操作都必须经过这座桥。
渲染进程是一个标准的 Vue 3 单页应用,负责所有的 UI 渲染和用户交互。它使用 Pinia 管理状态,Vue Router 处理页面导航,Element Plus 提供 UI 组件库。
IPC 通信设计
三个进程之间通过 IPC(进程间通信)协作。HexoPress 采用了一套简洁的通道命名规范:领域:动作。例如 site:posts 表示获取文章列表,post:save 表示保存文章。
所有的 IPC 调用都是异步的请求-响应模式。渲染进程通过 window.site.* 发起调用,主进程处理后返回结果。这种设计让渲染进程的代码看起来就像在调用普通的异步函数,屏蔽了进程间通信的复杂性。
完整的接口契约通过 TypeScript 的接口定义来约束,确保两端的类型一致性。
Hexo 集成策略
HexoPress 的一个关键设计决策是:将 Hexo 作为 Node.js 库直接引入,而不是通过 shell 调用 hexo-cli。
这意味着 Hexo 的实例运行在主进程中,HexoPress 可以直接访问 Hexo 的内存数据库来查询文章、分类和标签。文件的读写则通过 Hexo 的 Front Matter 解析器来完成,确保元数据的格式始终与 Hexo 兼容。
这种方式带来了显著的性能优势——不需要反复启动子进程,也不需要解析 CLI 的文本输出。同时,它也让 HexoPress 能够利用 Hexo 丰富的查询 API,实现复杂的筛选和统计功能。
前端应用结构
渲染进程的 Vue 3 应用采用了经典的分层结构:
路由层使用 hash 模式(这在 Electron 的 file:// 协议下更可靠),并通过导航守卫实现了博客目录的检测和自动初始化逻辑。
状态层由多个 Pinia Store 组成,各自管理不同领域的状态。其中一个值得注意的设计是编辑器状态的共享——编辑器的文本内容、选中文本、标题结构等信息被提升到全局 Store 中,使得 AI 面板等外部组件可以访问编辑器的上下文。
视图层分为页面级组件和可复用组件。编辑器页面采用了独立的全屏布局,与其他管理页面的导航布局分离,提供沉浸式的写作体验。
构建系统
HexoPress 使用 Electron Forge 配合 Vite 插件来构建。三个进程各有独立的 Vite 配置,针对不同的运行环境(Node.js / 沙箱 / 浏览器)进行优化。
渲染进程的构建还集成了 UnoCSS(原子化 CSS)、组件自动导入、国际化等工具链,在保持开发体验的同时控制了打包体积。
这就是 HexoPress 的整体架构。如果你对某个部分感兴趣,后续的文章会深入探讨编辑器设计、AI 集成等具体话题。