神刀安全网

markdown生成一份html简历

最近正在找新工作,翻出以前写的word简历,真的是,往事不堪回首。觉得自己以前一定是脑子秀逗了,写出来的简历,花里花俏,完全前言不搭后语。而markdown这样简洁方便的格式非常适合我整理出一份简洁明了的简历。所以,我打算试下。

并且我还希望,这份简历是可以到处pdf,打印出来的。

献上结果:
http://yieldblog.me/resume.html

markdown生成一份html简历
导出pdf

结构

前端设计哲学:

先整体,后细节。

一个简历也是这样,必须要有清晰的整体结构。让用人单位一幕了然,不需要过多的修饰,那样不会是锦上添花,而是画蛇添足。所以,我最直观的想到了这个页面的结构。

# 姓名 ## 职位 > 联系方式  ### 关于我 /* 列举一下个人优势和特点 */  ### 工作经历 /* 工作的经历和工作内容,注意要时间倒序 */  ### 教育经历 /* 学校和专业等信息 */  ### 技术经历 /* 不要单纯列出一堆技术名词,而是明确自己做过的事情,这样面试官比较容易对我的技术有个初步判断 */

细节

大体页面出来之后,填上内容。内容的时候,注意是使用有突出重点,要活用**Text**(加粗)和 ***Text***(斜体)。

同时给每个段落加上分割线,更好的区分。

然而,你会发现markdown写出来的简历虽然简洁,但是缺乏一些有趣的东西。比如:

markdown生成一份html简历
例图

你会发现,你如果要实现这样平行的效果,这个时候,markdown的任务就结束了,要美化这个页面,就要上html+css了。

导出html

要导出html,我推荐使用一个在线工具。http://mahua.jser.me/

美化

修改字体

首先将导出的css里面的字体设为“微软雅黑”:

body {     font-family: "微软雅黑", Helvetica, "微软雅黑", Arial, sans-serif;     font-size: 13px;     line-height: 18px;     color: #737373;     margin: 10px 13px 10px 13px; }

为什么用微软雅黑,因为兼容性好,打印出来效果没有偏差。

调整边距

调整页面的边距大小,尽量是内容在一个A4纸页面上。而如何知道是否在一个A4纸呢?

在Chrome浏览器下,Ctrl+P打印页面,把目标打印机改为pdf,纸张尺寸为‘A4’,你就可以看你调整的效果是否,超出了一个页。

font awesome

有些东西的叙述,我们可以使用iconfont来代替。我使用的是font awesome。这样的库很多,你可以按自己的喜好使用。

总结

写出了一份简历的同时,还锻炼我的前端技能。

ps: 有合适工作的,发邮件联系我。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » markdown生成一份html简历

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址