配合 Markdown在线简历 (resume.todev.cc) 会更容易理解!
介绍
这个项目的初衷就是想用 Markdown 去编写简历(易保存更新),并且可以做到直接访问在线简历的功能(方便找人内推)。
效果图
支持功能
- 支持暗黑模式
- 支持嵌入 HTML
- 支持打印 PDF
- 支持在线预览
- 支持自定义模板
- 支持多模板组合使用
- 支持样式覆盖
- 支持 Vercel 部署
技术实现
技术栈
- vite
- react
- react-markdown 渲染 Markdown
- unocss 简历模板的样式
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 评价都说不错 😎