Resume-Matcher 简历模板系统全解析七大模板类型、格式化控制与 CSS 变量体系【免费下载链接】Resume-MatcherThe #1 AI Harness for Building Resumes, PDFs, Cover Letters more, locally with 100 LLMs support.项目地址: https://gitcode.com/GitHub_Trending/re/Resume-MatcherResume-Matcher 的简历构建器内置了一套可实时预览、可导出 PDF 的模板系统本文基于仓库中的模板设置文档docs/agent/features/resume-templates.md系统讲解七大内置模板的设计定位、11 项格式化控件的取值范围与底层映射、CSS 变量驱动的排版体系以及如何在源码层新增一个全新模板。读完本文你将能够熟练使用格式化面板调出理想的简历版式并能从 apps/frontend/lib/types/template-settings.ts 到样式文件再到渲染组件完整理解这套模板系统的实现原理。一、七大内置模板类型从单栏到双栏、从简约到高饱和模板系统的类型定义集中在 apps/frontend/lib/types/template-settings.ts 的TemplateType联合类型中当前共 7 种模板覆盖了从传统单栏到侧边栏双栏、从黑白极简到多彩高饱和的不同风格谱系模板 ID说明swiss-single传统单栏布局追求最大内容密度swiss-two-column65%/35% 分栏主栏放经历、侧栏放技能modern带彩色强调标题的单栏模板支持自定义主题色modern-two-column双栏布局融合现代强调色与节省空间的设计latex经典衬线单栏Title-Case 带下划线标题、公司优先的条目LaTeX 风格单一字型——由 Header Font 控件驱动clean极简无衬线单栏大号低调灰色 UPPERCASE 标题与单行条目单一字型——由 Body Font 控件驱动vivid彩色双栏Awesome-CV 血统双色强调姓名、等宽联系信息配圆形图标、强调色小型大写标题、强调色箭头项目符号支持 Accent Color 控件各模板的前端渲染组件位于 apps/frontend/components/resume/ 目录并通过 apps/frontend/components/resume/index.ts 统一导出swiss-single→ resume-single-column.tsx全部区块纵向堆叠适合经历描述详细、需要高密度的场景swiss-two-column→ resume-two-column.tsx按源码注释主栏62%承载 Summary、Experience、Projects、Certifications 与自定义区块侧栏38%承载 Education、Skills、Languages、Awards适合技术岗一页纸简历modern、modern-two-column→ resume-modern.tsx、resume-modern-two-column.tsx主打可换强调色latex、clean→ resume-latex.tsx、resume-clean.tsx单一字型模板选中时会自动套用签名字体vivid→ resume-vivid.tsx按源码注释采用 63%/37% 分栏姓名拆分为双色首词加粗强调色 其余浅色联系信息为等宽字体的 chip 样式加圆形图标列表项使用强调色➜箭头且全部文本均为真实 DOM 节点ATS 可读。模板的 UI 展示元数据id、显示名、一句话描述由TEMPLATE_OPTIONS数组提供apps/frontend/lib/types/template-settings.ts模板选择器在格式化面板中渲染为带缩略图的按钮网格。对应的单元测试 apps/frontend/tests/template-registration.test.ts 会断言七种模板全部注册且元数据非空、模板 id 唯一。二、格式化控制面板11 项参数完整手册模板设置通过 apps/frontend/components/builder/formatting-controls.tsx 的FormattingControls面板暴露给用户覆盖模板选择、页面尺寸、页边距、间距、字号、字体族、强调色与两个开关。下表来自模板设置文档是控制项的权威速查控制项取值范围默认值效果Margins5-25mm8mm页面页边距Section Spacing1-53大区块之间的间距Item Spacing1-52区块内条目之间的间距Line Height1-53文本行高Base Font Size1-53整体文本缩放11-16pxHeader Scale1-53姓名/区块标题尺寸倍率Header Fontserif/sans-serif/monoserif标题字体族Body Fontserif/sans-serif/monosans-serif正文文本字体族Compact Mode布尔值false施加 0.6× 间距乘数仅间距页边距不变Contact Icons布尔值false在联系信息旁显示图标Accent Colorblue/green/orange/redblue彩色模板modern、modern-two-column、vivid的强调色需要说明的是文档表中 Margins 默认值标注为 8mm而DEFAULT_TEMPLATE_SETTINGS中各方向边距为 10mmapps/frontend/lib/types/template-settings.ts实际运行时以源码默认值为准——这提示我们阅读仓库时以源码为最终事实依据。2.1 设置数据模型所有控件对应的设置被建模为TemplateSettings接口apps/frontend/lib/types/template-settings.ts按语义拆分为四个子对象export interface MarginSettings { top: number; // 5-25mm bottom: number; left: number; right: number; } export interface SpacingSettings { section: SpacingLevel; // 大区块间距 item: SpacingLevel; // 区块内条目间距 lineHeight: SpacingLevel; // 文本行高 } export interface FontSizeSettings { base: SpacingLevel; // 整体文本缩放 headerScale: SpacingLevel; // 标题尺寸倍率 headerFont: HeaderFontFamily; // 标题字体族 bodyFont: BodyFontFamily; // 正文字体族 } export interface TemplateSettings { template: TemplateType; pageSize: PageSize; // A4 | LETTER margins: MarginSettings; spacing: SpacingSettings; fontSize: FontSizeSettings; compactMode: boolean; showContactIcons: boolean; accentColor: AccentColor; }页面尺寸PageSize仅支持A4210 × 297 mm与LETTER8.5 × 11 in两种尺寸说明由PAGE_SIZE_INFO提供apps/frontend/lib/types/template-settings.ts。2.2 间距与字号档位的真实取值1-5 的档位并不是线性数值而是通过一组*_MAP常量映射到实际 CSS 值apps/frontend/lib/types/template-settings.tsSECTION_SPACING_MAP区块间距档位 1-5 对应0.375rem / 0.625rem / 1rem / 1.25rem / 1.5rem即 6/10/16/20/24px默认档位 3 → 16pxITEM_SPACING_MAP条目间距档位 1-5 对应0.125rem / 0.25rem / 0.5rem / 0.75rem / 1rem2/4/8/12/16px默认档位 2 → 4pxLINE_HEIGHT_MAP行高为纯数值倍率档位 1-5 对应1.15 / 1.25 / 1.35 / 1.45 / 1.55默认 1.35FONT_SIZE_MAP正文字号档位 1-5 对应11 / 12 / 14 / 15 / 16px默认 14pxHEADER_SCALE_MAP姓名标题倍率档位 1-5 对应1.5 / 1.75 / 2 / 2.25 / 2.5默认 2×SECTION_HEADER_SCALE_MAP区块标题SUMMARY、EXPERIENCE 等倍率比姓名略小档位 1-5 对应1.0 / 1.1 / 1.2 / 1.3 / 1.4默认 1.2×。2.3 字体族与强调色HEADER_FONT_MAP/BODY_FONT_MAPapps/frontend/lib/types/template-settings.ts把serif / sans-serif / mono三个选项映射为完整字体栈serif: ui-serif, Georgia, Cambria, Times New Roman, Times, serif, sans-serif: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace,强调色ACCENT_COLOR_MAP为每种颜色提供primary主色与light浅色底两个色值用于 modern 系列与 vivid 模板颜色primarylightblue#1D4ED8#DBEAFEgreen#15803D#DCFCE7orange#EA580C#FED7AAred#DC2626#FEE2E2在 formatting-controls.tsx 中强调色选择器只对modern、modern-two-column、vivid三个模板显示其他模板下该控件自动隐藏。2.4 Compact Mode 的精细处理紧凑模式并非简单地对所有间距乘 0.6。源码中定义了两个乘数apps/frontend/lib/types/template-settings.ts// Compact mode multiplier (applied to spacing values only, NOT line-height) export const COMPACT_MULTIPLIER 0.6; // Line height gets a gentler reduction in compact mode export const COMPACT_LINE_HEIGHT_MULTIPLIER 0.92;即区块间距与条目间距按 0.6× 收紧而行高只按 0.92× 温和压缩以避免文字重叠页边距则完全不受影响、保持字面值。格式化面板底部有一个 Effective Output 摘要区会实时展示紧凑模式调整后的区块间距rem、条目间距rem、行高数值、基准字号、标题倍率与字体族formatting-controls.tsx并在开启紧凑模式时给出提示方便用户直接核对最终效果。三、CSS 变量体系设置如何驱动排版模板文档的核心设计是以 CSS 自定义属性为媒介模板设置不直接写入每个组件的内联样式而是通过settingsToCssVars()统一转换为 CSS 变量注入简历容器apps/frontend/lib/types/template-settings.ts。3.1 完整的 CSS 变量清单间距--section-gap、--item-gap、--line-height排版--font-size-base、--header-scale、--section-header-scale字体--header-font标题字体族、--body-font正文字体族页边距--margin-top/bottom/left/right以 mm 为单位注入强调色--resume-accent-primary、--resume-accent-lightmodern 系列与 vivid 模板使用。紧凑模式在变量生成层完成开启时--section-gap与--item-gap被包装成calc(原始值 * 0.6)--line-height乘以 0.92关闭时直接使用映射表中的原值。而--margin-*变量始终为字面毫米值与紧凑模式无关。3.2 基础样式如何消费这些变量apps/frontend/components/resume/styles/_base.module.css 定义了全部共享排版与布局类并在.resume-body上声明变量默认值如--section-gap: 1rem、--font-size-base: 14px、--header-scale: 2、--section-header-scale: 1.2、默认 10mm 边距。此后所有尺寸都通过calc(var(...) * ...)派生.resume-namefont-size: calc(var(--font-size-base) * var(--header-scale))且使用--header-font.resume-section-title/.resume-section-title-smcalc(var(--font-size-base) * var(--section-header-scale))UPPERCASE 底部下划线并带有break-after: avoid、orphans: 3、widows: 3防止标题被孤行截断.resume-body容器padding: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left)页边距直接作用于容器内边距。文档特别强调所有模板都应复用_base.module.css导出的样式类如baseStyles[resume-section]、baseStyles[resume-item-subtitle]从而保证间距与排版能统一响应模板设置。例如 resume-single-column.tsx 与 resume-two-column.tsx 的每个区块都使用baseStyles[resume-section]与baseStyles[resume-items]模板自身的差异化样式则放在各自的*.module.css如swiss-single.module.css、swiss-two-column.module.css、vivid.module.css。3.3 打印与分页规则_base.module.css的media print块apps/frontend/components/resume/styles/_base.module.css保证 PDF 与打印输出质量简历容器page-break-inside: avoid、单个条目break-inside: avoid防止跨页拆散、区块标题与首个条目之间禁止分页断开、富文本加粗/斜体/下划线在打印时强制保留。这些规则与后端 PDF 生成见第六节配合确保屏幕上看到的版式即最终 PDF 版式。四、排版辅助类副标题可见性专项优化除通用resume-meta外基础样式表还提供两个专门用于副标题公司名、学位、项目角色的类类名字号字重用途resume-item-subtitle0.95× 基准600公司名、学历、项目角色resume-item-subtitle-sm0.88× 基准600紧凑双栏布局中的相同字段对照源码apps/frontend/components/resume/styles/_base.module.css通用resume-meta为等宽字体、0.82× 基准字号、字重 400、灰色三级文本适合联系信息等辅助内容resume-item-subtitle/resume-item-subtitle-sm改用正文字体--body-font、字重 600字号分别放大到 0.95× 与 0.88× 基准比resume-meta大约 13-16% 且为半粗体视觉层级更清晰。resume-item-subtitle-sm专为双栏模板侧栏设计例如 resume-vivid.tsx 中用它在侧栏渲染学历的学位字段。五、设计令牌_tokens.css 与全局颜色apps/frontend/components/resume/styles/_tokens.css 定义全局设计令牌是模板系统的颜色基座等宽字体令牌--resume-font-mono文本色--resume-text-primary纯黑、--resume-text-secondarygray-700、--resume-text-tertiarygray-600、--resume-text-bodygray-800边框色--resume-border-primary/secondary/tertiarygray-400/300/200强调底色--resume-accent-bggray-100主题强调色默认值--resume-accent-primary: #1d4ed8、--resume-accent-light: #dbeafe蓝色并注释由 JS 覆盖——正是settingsToCssVars()在运行时根据ACCENT_COLOR_MAP注入的色值。_base.module.css通过import ./_tokens.css引入令牌形成令牌 → 基础样式 → 各模板 module.css的三层样式依赖。六、PDF 生成与 accentColor 的后端支持格式化设置不仅作用于前端实时预览也通过后端 PDF 接口生成最终文件。在 apps/backend/app/routers/resumes.py 中PDF 生成端点接收accentColor查询参数并带有严格的正则校验accentColor: str Query(blue, pattern^(blue|green|orange|red)$),随后该参数被拼入渲染 URL同文件第 1641 行与前端AccentColor联合类型保持一致。从源码结构看后端使用浏览器渲染管线前端模板组件生成 PDF因此前端模板与 CSS 变量的最终呈现即是 PDF 的最终样式——这也是所见即所得的实现基础。七、单字型模板的签名字体预设latex与clean是文档中标注的单一字型模板它们的标题绑定--header-font、正文绑定--body-font因此两个字体控件都保持可用。为保证选中模板时即呈现其参考外观源码引入了签名字体预设apps/frontend/lib/types/template-settings.tsexport const TEMPLATE_FONT_PRESETS { latex: { headerFont: serif, bodyFont: serif }, clean: { headerFont: sans-serif, bodyFont: sans-serif }, }; export function applyTemplatePreset(settings, template) { const preset TEMPLATE_FONT_PRESETS[template]; if (!preset) return { ...settings, template }; return { ...settings, template, fontSize: { ...settings.fontSize, headerFont: preset.headerFont, bodyFont: preset.bodyFont }, }; }选中latex时标题与正文都被种子化为衬线字体serif选中clean时两者都被种子化为无衬线字体sans-serif其他模板没有预设切换时保留当前字体设置不变。FormattingControls的模板切换处理器apps/frontend/components/builder/formatting-controls.tsx在所有模板变更入口调用applyTemplatePreset对应的测试 apps/frontend/tests/template-registration.test.ts 验证了单字型模板种子化签名字体、无预设模板不动字体的行为。八、关键文件地图文档给出了模板系统的核心文件清单结合源码可整理为以下完整地图文件用途apps/frontend/lib/types/template-settings.ts类型定义、默认值、档位映射表、settingsToCssVars()转换函数、模板元数据与字体预设apps/frontend/components/resume/styles/_tokens.css全局设计令牌颜色、等宽字体apps/frontend/components/resume/styles/_base.module.css共享排版与布局样式、CSS 变量默认值、打印分页规则apps/frontend/components/builder/formatting-controls.tsx格式化控制面板 UI模板选择、页边距、间距、字号、字体族、强调色、开关、重置apps/frontend/components/resume/resume-single-column.tsxswiss-single 单栏模板apps/frontend/components/resume/resume-two-column.tsxswiss-two-column 双栏模板apps/frontend/components/resume/resume-modern.tsxmodern 现代单栏模板apps/frontend/components/resume/resume-modern-two-column.tsxmodern-two-column 现代双栏模板apps/frontend/components/resume/resume-latex.tsxlatex 衬线学术模板apps/frontend/components/resume/resume-clean.tsxclean 极简模板apps/frontend/components/resume/resume-vivid.tsxvivid 彩色双栏模板apps/frontend/components/resume/index.ts模板组件统一导出apps/backend/app/routers/resumes.pyPDF 生成端点支持accentColor查询参数apps/frontend/tests/template-registration.test.ts模板注册与字体预设的单元测试九、实战扩展如何新增一个简历模板仓库中的配套指南 docs/agent/features/adding-resume-templates.md 提供了新增模板的四步快速路径此处结合源码做要点整理创建模板组件在apps/frontend/components/resume/下新建resume-{name}.tsx组件接收resumeData与settings即TemplateSettings根节点使用resume-print类Playwright 渲染 PDF 时等待的标识区块使用resume-section、标题使用resume-section-title、条目容器使用resume-items、单个条目使用resume-item导出组件在 apps/frontend/components/resume/index.ts 中追加导出语句接入选择器在FormattingControls的模板选择区遍历TEMPLATE_OPTIONS注册新模板同时在TemplateType联合类型与TEMPLATE_OPTIONS元数据数组中补充条目创建缩略图为模板选择器提供缩略图TemplateThumbnail组件按type分发。测试建议加载新模板后检查所有区块渲染、验证 PDF 生成、并用 2 页以上的内容测试分页行为同时更新 apps/frontend/tests/template-registration.test.ts 中包含全部七种模板的断言以覆盖新模板。十、模板系统的设计要点回顾设置与渲染解耦TemplateSettings→settingsToCssVars()→ CSS 变量 → 共享基础样式 → 模板专属 module.css五层链路各司其职任何模板只要消费基础样式类就能自动响应全部格式化设置默认值与档位所有 1-5 档位均映射到真实 CSS 值默认档位集中标注区块间距 3、条目间距 2、行高 3、字号 3、标题倍率 3重置按钮可一键恢复DEFAULT_TEMPLATE_SETTINGS紧凑模式分层处理间距 0.6×、行高 0.92×、页边距不变并有 Effective Output 面板实时反馈前后端一致性accentColor在前端联合类型与后端 Query 正则中同步约束PDF 渲染复用前端模板保证预览与成稿一致可测试性模板注册、字体预设、设置转换均有单元测试兜底扩展模板有清晰的测试清单。这套系统是 Resume-Matcher 简历构建器的版式中枢理解其模板类型、格式化控件与 CSS 变量链路后无论是日常调参出片还是为项目贡献新模板都能做到有据可依、快速上手。【免费下载链接】Resume-MatcherThe #1 AI Harness for Building Resumes, PDFs, Cover Letters more, locally with 100 LLMs support.项目地址: https://gitcode.com/GitHub_Trending/re/Resume-Matcher创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考