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

╰+哭是因爲堅強的太久メ 2022-10-22 11:48 579阅读 0赞

#  #

## 前言 ##

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

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

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

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

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

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

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

*  简单的模板，排版不好看
 *  复杂的模板，好看但是非常花时间

基于以上背景，所以我开发了 木及简历\[1\] 。只需要通过纯 Markdown ，就能用很简单的方式制作出好看的简历。

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

重要的事情说三次！

## 概览 ##

### 基础方式 ###

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

# 秋风 - 前端工程师
    
    博客: [https://qiufeng.blue](https://qiufeng.blue "https://qiufeng.blue")
    
    Gihtub: [https://github.com/hua1995116](https://github.com/hua1995116 "https://github.com/hua1995116")
    
    掘金: [https://juejin.cn/user/923245497557111](https://juejin.cn/user/923245497557111 "https://juejin.cn/user/923245497557111") 
    
    邮箱: [qiufenghyf@163.com](mailto:qiufenghyf@163.com "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。

![452afc03292faefc83656ef38dfcccd7.png][]

**但是需要注意的是，由于模板的限制，需要大家写出规范的标题层级。**

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

例如:

\# 秋风 - 前端工程师

这样不仅能能让面试官一眼就看到你这份简历的用途，因为在实际过程中，有很多同学没有很好地注明投递的方向，很容易造成投递方向错误。

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

例如:

\#\# 教育背景

\#\# 工作经验

\#\# 项目经验

\#\# 基础技能

### 丰富的模板 ###

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

![d25607cadea89e64ad0bbfc52feae14b.png][]

### 主题色更换 ###

不仅我们能更换模板，当含有`可换色`的模板中，还可以更换模板整体的主题色。

![97e2d9dff93caba704bb0f24994c1d4c.png][] ![e7aa938bd86d0b567ad88235ec9b1aba.png][]

更换一下主题色是不是也是非常好看呢？

### 左右结构 ###

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

![9e09137efb01ab8ee9ca598226abde9b.png][]

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

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

![cbba713f537ea0e0c839c5661031f4a7.png][]

### 丰富的icon ###

![75bc35a5c589e139d05910df3ea286a4.png][]

目前支持了一些图标的快捷写法，帮助大家能够，能够帮助大家放上好看 icon，来美化自己的简历。

[icon:blog https://qiufeng.blue](https://qiufeng.blue "icon:blog https://qiufeng.blue")
    
    [icon:github https://github.com/hua1995116](https://github.com/hua1995116 "icon:github https://github.com/hua1995116")
    
    [icon:juejin 掘金](https://juejin.cn/user/923245497557111 "icon:juejin 掘金") 
    
    [icon:email qiufenghyf@163.com](mailto:qiufenghyf@163.com "icon:email qiufenghyf@163.com")
    
    icon:weixin qiufengblue

![42b2ab96c457b01df9e7b9be123462b0.png][]

### 自定义html ###

#### 插入图片 ####

本项目中开启了对 `html`的解析，因此我们也可以使用像gihtub-readme-stats\[2\]这类服务，给我们文档插入一张图片。

# 秋风 - 前端工程师
    
    ::: 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:blog https://qiufeng.blue")
    
    [icon:github https://github.com/hua1995116](https://github.com/hua1995116 "icon:github https://github.com/hua1995116")
    
    [icon:juejin 掘金](https://juejin.cn/user/923245497557111 "icon:juejin 掘金") 
    
    [icon:email qiufenghyf@163.com](mailto:qiufenghyf@163.com "icon:email qiufenghyf@163.com")
    
    icon:weixin qiufengblue
    
    :::

![e155a913c7df1fb21b403d6cf61b15e1.png][]

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

![e8e55d29bf86611ad9581d9703e5baed.png][]

#### 自定义标签 ####

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

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

![841f276ca6970d5ba02cc4ca48254a7b.png][]

### 导出方式 ###

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

*  文字能够复制、链接能够点击
 *  分页更加友好
 *  内容更加清晰

## 原理实现 ##

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

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

## 后续规划 ##

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

## 写在结尾 ##

最后非常感谢女朋友@楠溪\[3\]一起参与项目的建设，全权编写了后端的所有接口。

开源地址：https://github.com/hua1995116/react-resume-site

这个项目是年轻，还有很多问题，希望大家多多提出宝贵的意见。

也欢迎大家给个⭐️给予支持和鼓励。

希望这个项目能够帮助到`金三银四`找工作的各位(不找的也可以收藏以后使用。❤️

### 参考资料 ###

\[1\]

木及简历: *https://resume.mdedit.online/*

\[2\]

gihtub-readme-stats: *https://github.com/anuraghazra/github-readme-stats*

\[3\]

@楠溪: *https://juejin.cn/user/4230576475472573*

[452afc03292faefc83656ef38dfcccd7.png]: /images/20221022/dbb3df5f20ae402695e07d6efb6f1d9a.png
[d25607cadea89e64ad0bbfc52feae14b.png]: /images/20221022/9ecf0252799f44c3bb39a39e20720c36.png
[97e2d9dff93caba704bb0f24994c1d4c.png]: https://img-blog.csdnimg.cn/img_convert/97e2d9dff93caba704bb0f24994c1d4c.png
[e7aa938bd86d0b567ad88235ec9b1aba.png]: /images/20221022/91775b6065474980b6e7df136ca66d79.png
[9e09137efb01ab8ee9ca598226abde9b.png]: /images/20221022/999493f1e534460a9d04eca799f23e2f.png
[cbba713f537ea0e0c839c5661031f4a7.png]: /images/20221022/7d4f983250344836ae88113843f65412.png
[75bc35a5c589e139d05910df3ea286a4.png]: /images/20221022/7b830aa2bad9414099e5aba87ba48a68.png
[42b2ab96c457b01df9e7b9be123462b0.png]: /images/20221022/762b6425eda34152b8c39590c8454b44.png
[e155a913c7df1fb21b403d6cf61b15e1.png]: /images/20221022/4a64f3c0484f4e04ae955d1dcd8d434d.png
[e8e55d29bf86611ad9581d9703e5baed.png]: /images/20221022/4fb9688943be46bbbda773f670357e61.png
[841f276ca6970d5ba02cc4ca48254a7b.png]: /images/20221022/9a986565942d45c785ebe9ad06975d19.png