只用 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...

這個項目是年輕，還有不少問題，但願你們多多提出寶貴的意見。

也歡迎你們給個⭐️給予支持和鼓勵。

但願這個項目可以幫助到金三銀四找工做的各位(不找的也能夠收藏之後使用。❤️

結語

❤️關注+點贊+收藏+評論+轉發❤️ ，原創不易，鼓勵筆者創做更好的文章

關注公衆號秋風的筆記，一個專一於前端面試、工程化、開源的前端公衆號