只用 Markdown 就写出好看的简历，在线简历应用闪亮登场！

前言

你们都知道金三银四是招聘的季节，各大互联网公司都开始了春招。最近有不少人来找我帮忙看简历，简历的模板可谓良莠不齐，有过度炫酷，还有一些朋友直接把 word 丢了过来，排版就显得比较乱。

一番调研后，你们仍是大多数使用简历最经常使用的方式仍是 word、其次是 Markdown。

做为互联网的一名打工人，Markdown 能够说在平时的写文档经常使用的方式。心想，我可否设计一个在线站点经过抒写 Markdown，而且可以赋予 Markdown 多样化的主题。

作东西老是要站在巨人的肩膀上，网上搜到比较好的 Markdown 简历编辑器就是<冷熊简历>了，可是他的模板比较单一，而且貌似维护力度比较通常了。还调研了我平时基于写文章的排版工具<mdnice>，能够说用一份简洁的Markdown 来实现不一样的排版会让整个流程变得更加简单。

而且我去市场上调研了一些经常使用的方案

	木及简历	冷熊简历	markdown-resume	Word	五百丁/超级简历
付费	免费	免费	开源	付费激活	付费导出
是否开源	是	否	开源	否	否
编辑方式	Markdown	Markdown	网格化+Markdown	word	网格化
容易度	⭐⭐️⭐️⭐️⭐️	⭐⭐️⭐️⭐️⭐️	⭐️⭐️⭐️	⭐️	⭐️⭐️⭐️
导出pdf	支持	支持较差	支持较差	支持	支持
模板	多样化	单一	多样化	多样化	多样化
自定义模板	即将推出	不支持	不支持	支持	不支持

总结一下，现阶段简历编辑具备如下取舍:

• 简单的模板，排版很差看
• 复杂的模板，好看可是很是花时间

基于以上背景，因此我开发了 木及简历 。只须要经过纯 Markdown ，就能用很简单的方式制做出好看的简历。

在线地址: https://resume.mdedit.online/

在线地址: https://resume.mdedit.online/

在线地址: https://resume.mdedit.online/

重要的事情说三次！

概览

基础方式

下面就让你们欣赏一下这个应用到底有多方便！假如咱们有如下这么个 Markdown 简历文件。

# 秋风 - 前端工程师

博客: [https://qiufeng.blue](https://qiufeng.blue)

Gihtub: [https://github.com/hua1995116](https://github.com/hua1995116)

掘金: [https://juejin.cn/user/923245497557111](https://juejin.cn/user/923245497557111) 

邮箱: [qiufenghyf@163.com](mailto:qiufenghyf@163.com)

微信: qiufengblue

## 介绍
于2015年开始接触前端，喜欢编码，有Geek精神，对代码有洁癖，喜欢接触前沿技术，爱折腾。

得到省、国家级竞赛奖项xx项，(包含浙江省大学生多媒体竞赛一等奖xx项)。
  
主持参与省、国家级项目xx项；发表论文xx篇，其中xx篇EI索引。

## 工做
### xxxx
打工中..

### xxxx
前端架构组
- 前端错误监控系统(基建)(负责人) 接入量pv:3000w
  - web端js-sdk开发,无侵入式接入,压缩后仅2kb。
  - 收集端Node开发,分布式存储日志。
  - 阿里云日志服务分析,以及经常使用的数据分析。
  - echart搭建可视化平台。
- 前端性能监控系统(负责人) 接入pv: 1000w
  - web端js-sdk开发,支持自定义上报以及自动上报,无侵入式。
  - 收集端Node开发,Elasticsearch集群存储日志。
  - Elasticsearch的Node模块开发，封装按时间维度的查询聚合模块。
  - 可视化平台,利用redis缓存优化查询,淘汰算法共同协做。
- 落地页截图(Node项目)
  - 利用puppeteer开发截图。
  - 利用clustor多线程开发,速度从原来60分钟提升至8分钟，提升约7倍（300张截图）。
  - 开发自定义队列模式,避免Node端丢失请求。
- webpack插件(webpack-plugin-inner-script)地址
  - 自动将外链形式改写成内敛形式。

## 技能
### Web基础
- 熟练掌握HTML5/CSS3,响应式布局和移动端开发
- 了解ES6/ES7,Webpack
- 有Antd Design,Element UI,Muse UI搭建项目经验
- 了解Hybrid开发以及Electron桌面开发,liunx服务器搭建经验,Nginx配置
- Mac开发用户，熟悉Git进行团队协做，对PS有必定基础

基于以上Markdown 便能快速生成如下的模板样式，而且可以导出 Markdown + pdf。

可是须要注意的是，因为模板的限制，须要你们写出规范的标题层级。

建议在写简历过程当中，使用一级标题来写在开头，经常使用来描述总体的主旨与标题，经常使用的就是，求职者的姓名 + 求职岗位的模式

例如:

\# 秋风 - 前端工程师

这样不只能能让面试官一眼就看到你这份简历的用途，由于在实际过程当中，有不少同窗没有很好地注明投递的方向，很容易形成投递方向错误。

在写内容过程当中，建议使用二级标题来写。

例如:

\## 教育背景

\## 工做经验

\## 项目经验

\## 基础技能

丰富的模板

本项目提供了默认的4种方式供你们来进行选择，后续也会推出更多的模板。

主题色更换

不只咱们能更换模板，当含有可换色的模板中，还能够更换模板总体的主题色。

<img src="https://s3.qiufengh.com/blog/image-20210315000636862.png" width="300">

更换一下主题色是否是也是很是好看呢？

左右结构

为了可以突破传统 Markdown 的纵向的布局方式，引入了自定义容器，该方案的灵感来源于 vuepress。

<img src="https://s3.qiufengh.com/blog/image-20210314235147407.png" alt="image-20210314235147407" style="zoom: 25%;" />

在咱们的编辑器中，使用左右容器对，就能轻松实现左右布局的方式。

:::left
xxxx
:::
:::right
xxx
:::

丰富的icon

目前支持了一些图标的快捷写法，帮助你们可以，可以帮助你们放上好看 icon，来美化本身的简历。

[icon:blog https://qiufeng.blue](https://qiufeng.blue)

[icon:github https://github.com/hua1995116](https://github.com/hua1995116)

[icon:juejin 掘金](https://juejin.cn/user/923245497557111) 

[icon:email qiufenghyf@163.com](mailto:qiufenghyf@163.com)

icon:weixin qiufengblue

自定义html

插入图片

本项目中开启了对 html 的解析，所以咱们也可使用像gihtub-readme-stats这类服务，给咱们文档插入一张图片。

# 秋风 - 前端工程师

::: left

<img style="display:block; margin: 0 0 0 30px" src="https://github-readme-stats.vercel.app/api?username=hua1995116&show_icons=true&icon_color=79ff97&text_color=fff&bg_color=39393a&hide_title=false&title_color=fff&disable_animations=true&hide_border=true">

:::

::: right
[icon:blog https://qiufeng.blue](https://qiufeng.blue)

[icon:github https://github.com/hua1995116](https://github.com/hua1995116)

[icon:juejin 掘金](https://juejin.cn/user/923245497557111) 

[icon:email qiufenghyf@163.com](mailto:qiufenghyf@163.com)

icon:weixin qiufengblue

:::

你也能够把这张图片放到任意你喜欢的位置。

自定义标签

也能够加入自定义的一些标签样式，让 Markdown 的编写变得更加自由~ ，例如实现自定义样式的 Tag

<span style="background: #ddd; padding: 5px">前端</span>

导出方式

支持 md 导入导出，同时也支持 pdf 的导出方式。后端采用了 puppeteer 的方式，能最大限度地还原出 html 的展示方式。相对传统的前端导出图片式 pdf 具备如下优势：

• 文字可以复制、连接可以点击
• 分页更加友好
• 内容更加清晰

原理实现

前端使用了codemirror做为编辑器， markdown-it 进行 Markdown 的渲染。

后端采用了 serverless + puppeteer 的方式，按量计费，惟一的缺点就是会有函数销毁的状况（最低1实例存活，待研究配置），致使导出的时候，若是实例销毁了，会有必定几率会导出失败，若是失败状况建议多尝试一次。（此问题会尽快解决）

后续规划

• 支持A4纸上的预览模式
• 云端存储与同步
• 分享协做修改简历
• 在线查看简历（兼容移动端）
• 扩充官方模板（4个）
• 可以自定义增长模板（用户可以贡献模板）
• 模板广场（每一个人能分享本身DIY的模板至广场）

写在结尾

最后很是感谢女友@楠溪一块儿参与项目的建设，全权编写了后端的全部接口。

开源地址：https://github.com/hua1995116...

这个项目是年轻，还有不少问题，但愿你们多多提出宝贵的意见。

也欢迎你们给个⭐️给予支持和鼓励。

但愿这个项目可以帮助到金三银四找工做的各位(不找的也能够收藏之后使用。❤️

结语

❤️关注+点赞+收藏+评论+转发❤️ ，原创不易，鼓励笔者创做更好的文章

关注公众号秋风的笔记，一个专一于前端面试、工程化、开源的前端公众号