一款更加完善,且易于拓展的用 Markdown 编写简历的开源简历项目

936 阅读3分钟

配合 Markdown在线简历 (resume.todev.cc) 会更容易理解!

介绍

这个项目的初衷就是想用 Markdown 去编写简历(易保存更新),并且可以做到直接访问在线简历的功能(方便找人内推)。

效果图

简历截图 暗黑简历截图

支持功能

  • 支持暗黑模式
  • 支持嵌入 HTML
  • 支持打印 PDF
  • 支持在线预览
  • 支持自定义模板
  • 支持多模板组合使用
  • 支持样式覆盖
  • 支持 Vercel 部署

技术实现

技术栈

Markdown 增强

尽管 Markdown 功能已经很强大了,但它编写出来的简历并不是这么的好看,也容易导致空白过多的情况。所以采用了组合 Markdown 语法的方式编写简历,这样可以在解析 Markdown 的时候做一些预设的行为解析,达到我们理想的简历的样子。

编写了以下插件来实现组合 Markdown

  • header 简历的头部信息,包括姓名,头像,个人信息
  • description 三级标题下的第一行将被转换为描述信息
  • card 三级标题下的第一行或description后的第一行,如果是table将会转换为项目信息/工作信息
  • ...

模板实现

react-markdown 功能非常完善,提供了重写组件 components 参数。结合插件改造后的html tag。我们可以对简历的所有 tag 进行重写,不仅仅是样式的重写。

目前提供了两个模板

复用的组件

react-markdown 封装后,提供了一个 npm 库 @resumejs/components ,可以在自己的博客/其他项目中直接使用,使用方式看 README

Cli 支持

对于不了解 react 的同学,我们可以使用 @resumejs/resume 脚手架,只需要安装相关依赖后,编写一个名为 README.md 的 Markdown 文件就可以了。为了简化步骤,我们可以基于create-resumejs直接使用 pnpm create resumejs 创建一个简历项目,这样你就可以只需要编写简历就可以了!具体使用方式可以参考 README

打印 PDF 技巧

由于我们直接使用的是浏览器 print,我们无法做一些适配的操作。但我们可以充分利用打印的缩放和边距的配置,调整成合适的一页或多页的风格。

Q & A

  • 为什么编写简历文件名为 README.md

考虑到简历可能是公开的 repo,为了让别人点进你的项目就能直接看到简历,取名为 README.md 再合适不过了

  • 如何编写自定义模板?

可以参考 默认模板

  • 为什么要做这个项目

自己就需要用

  • 有无收费可能,或 VIP 模板

个人评价

目前该项目应该是较为完善的,且提供了高度可定制的方式。你可以完全只定义自己的简历模板,你也可以在简历中写 <style></style> 样式直接覆盖模板样式。

Anthony Fu 评价都说不错 😎