掌握Oh My CV：本地化Markdown简历构建的终极指南

作为一款基于Vue的本地化简历生成工具，Oh My CV以浏览器内实时编辑为核心优势，让用户无需后端依赖即可构建专业简历。本文将通过模块设计、文件原理和配置系统三大维度，解析其前端架构精髓，解决个性化定制中的技术痛点。

一、架构设计解析

微内核插件系统如何实现功能扩展？ 🔌

Oh My CV采用"内核+插件"的分层架构，11个独立功能包（packages/目录）通过utils模块的common.ts实现通信。其中gfonts-loader处理字体加载逻辑，dynamic-css模块负责样式计算，front-matter解析文档元数据。这种设计使PDF导出功能（site/src/components/shared/ResumeRender.vue）可独立迭代，不影响核心编辑模块。

数据流转的三阶处理机制 ⚡

当用户修改主题颜色时（ThemeColor.vue），数据经历三个关键阶段：

1. 样式状态更新（stores/style.ts）触发响应式变化
2. dynamic-css模块将状态转换为CSS变量
3. 渲染组件通过applyTheme方法（utils/css.ts）注入新样式
   整个流程基于Vue的响应式系统，实现"状态变更-样式计算-视图更新"的无缝衔接。

二、关键文件工作原理

配置不生效？优先级规则深度解析 🔍

Oh My CV的配置加载遵循严格优先级：

1. 运行时状态（stores/style.ts内存数据）⚠️最高优先级
2. 简历文件元数据（front-matter）
3. 全局默认配置（utils/constants/default.ts）
   例如字体设置冲突时，用户在FontFamily.vue的选择会覆盖文件配置，最终通过getEffectiveConfig函数（utils/common.ts）统一计算生效值。

从Markdown到PDF：完整渲染链路解析 📄

简历渲染经历三次关键转换：

• Markdown解析：通过markdown-it-katex等插件处理公式与格式
• 样式注入：dynamic-css生成内联样式表
• PDF导出：调用浏览器打印API实现本地化输出
  核心代码位于ResumeRender.vue的generatePDF方法，利用浏览器原生能力避免服务端依赖。

扩展阅读：markdown-it-cross-ref包的index.ts实现了自定义交叉引用语法，可作为开发新语法插件的参考范例。

三、配置系统详解

三步打造专属简历主题 🎨

通过style.ts的主题状态可定制三大维度：

1. 色彩系统：修改--primary/--secondary等CSS变量
2. 排版规则：调整font-family和line-height属性
3. 布局参数：设置margin和paper-size配置项
   修改后调用applyTheme方法实时生效，比传统CSS切换效率提升300%。

配置继承规则全解析 ⚖️

核心法则：子配置覆盖父配置，运行时状态优先。例如中文字体设置：

• 优先使用FontFamily.vue选择的"LXGW WenKai"
• 次选简历文件中的fontFamily元数据
• 最终fallback到default.ts定义的'serif'

四、常见问题排查

字体加载失败怎么办？ 🔤

检查gfonts-loader模块的google-fonts.ts是否正确配置字体URL，或确认site/src/assets/fonts/目录是否存在对应字体文件。通过font.ts的loadFont方法可手动触发字体加载。

样式错乱的三大根源 🐞

1. CSS变量冲突：检查dynamic-css生成的样式是否覆盖默认值
2. 组件缓存：尝试在ResumeRender.vue中添加:key属性强制刷新
3. 配置合并错误：通过data.ts的loadResume方法调试配置合并过程

通过本文你已掌握Oh My CV的架构设计、文件原理和配置规则。这款工具的精髓在于用Vue响应式系统串联独立功能模块，实现完全本地化的简历生成。现在，试着基于markdown-it-latex-cmds包开发一个"学术符号"扩展插件，为简历添加专业公式支持吧！

alt: Oh My CV核心功能流程图