美文网首页凡事略懂程序猿读书
markdown生成一份html简历

markdown生成一份html简历

作者: 一口咖啡一口茶 | 来源:发表于2016-09-30 12:05 被阅读14044次

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

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

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

    导出pdf

    结构

    前端设计哲学:

    先整体,后细节。

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

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

    细节

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

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

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


    例图

    你会发现,你如果要实现这样平行的效果,这个时候,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: 有合适工作的,发邮件联系我。

    相关文章

      网友评论

      • 2dd1c10cac03:楼主 up,请问你的那几个讨喜的 icon 是如何添加上去的?尺寸这么帮~
      • 薛豪_382d:你好楼主,方便把你简历模板的代码发我一份吗?
      • StaticClass:使用 remarkable 编辑器导出pdf时,邮箱被加上了下划线和尾部加上了这个(mailto:邮箱 ××××@163.com)。怎么解决
        一口咖啡一口茶: @StaticClass 那是应为你没有在css中,设置隐藏下划线属性
        StaticClass: @yield 我也试过用chrome,就是点打印,然后选择保存为pdf,但是问题依旧,只要内容中有邮箱,导出后就会被自动加上下划线和mailto
        一口咖啡一口茶: @StaticClass 没用过这个工具,我是导出成html,直接用chrome就可以导出成pdf
      • StaticClass:图标是导出html后再编辑完成的,还是直接在markdown 编辑器中加入的
        一口咖啡一口茶: @StaticClass 导出html后再编辑
      • 7b7f29026e5e:我写了两个多小时,结果保存的时候,界面处在自定义样式那个界面,结果保存的是我写的几行样式,我写的内容全不见了,哭死
        7b7f29026e5e:求解?怎么找回我写的内容
      • 我是大水沟:好好好
      • 一点也不想吃辣:的确呀,美观上,还是css。。:joy:
      • codinger:南大的,算是半个校友了:+1:
      • 鱼f:正是我想要的
      • 3cecd3debdcc:实用,感谢分享
      • fendo:Markdown怎么使用font awesome??
        一口咖啡一口茶:@fendo 将markdown导出成html了,不就可以用了
      • fendo:赞一个!
      • WangChloe:心水,这一看准备换份简历啦 :blush:
      • 竹沥半夏_:请问矢量图的大小是怎么调节成和字的大小一样?
      • dfd11b1035d8:那几个小icon求分享下
        一口咖啡一口茶:@单线条 搜索一下`font awesome`。如果你要看具体使用例子。访问我博客的简历链接:http://yieldblog.me/resume.html
      • Rickey丶cc:PHP吗,都说是世界最好的语言😄
        一口咖啡一口茶:@Rickey丶cc 语言只是为了做具体事情的工具,没有好与不好之分。我不认为PHP是最好的语言,PHP有它的优势和缺点。在编程的江湖里,从来就没有某一样技术可以威震八荒,一通天下的。
      • e319fc09a347:PHPer,拍黄片😏
      • 凡尘一笑:卧槽,炮哥!在这里遇见你啊:stuck_out_tongue_winking_eye:
        凡尘一笑:@yield 我靠,你不要太张扬,把自己名字写的那么清楚,能不能谦虚点,跟我回家扛扛锄头种种田
        一口咖啡一口茶:@凡尘一笑 咱么这么熟,你是不是打赏一下
        一口咖啡一口茶:@凡尘一笑 哪吒,这都让你发现我了
      • 雯雯wenwen:我也是学动漫的,为什么没你这么厉害啊,哈哈,软件开发你是出来学校再学的吗?
        Rickey丶cc:@雯雯wenwen 有什么好方向一起学习呀
        雯雯wenwen:嗯嗯,谢谢哈,那么,根据你对行业的了解,像我这样零基础的,选择哪门需要比较合适呢?:stuck_out_tongue_winking_eye::stuck_out_tongue_winking_eye::stuck_out_tongue_winking_eye:
        一口咖啡一口茶:@雯雯wenwen 自学。先找一门语言入手,工作一段时间之后,自己就能摸清楚整个发展道路了。
      • 我在先生:谢谢分享
      • MOFO:有设计能力的程序猿不多,赞!
      • 比德鲁滨逊:支持一下
      • XCG00:嗯嗯,是一个很好的方式,但是感觉跟智联招聘导出来的很像哎
      • 7f15619d2874:对我来说,很及时
      • c3d7d5cc8bde:很有用的,谢谢
      • 剽悍一小兔:棒棒哒
      • dalalaa:挺不错的
      • 鲸选电影:石墨文档的markdown写简历,输出的pdf个人认为最好看。此外还有farbox也不错
      • GeneralSandman:收藏下来 马上就要就业了
      • 11dec50da903:看着不错,过两天试试
      • c1a1e8e6574b:请问,图标是怎么做出来的?
        5200ec73731f:楼主:为什么有些图标显示不出来?比如这么写 <i class="icon-folder"></i>
        c1a1e8e6574b: @yield 哦,知道了,谢谢
        一口咖啡一口茶:@GreatX 使用的是矢量图标,你可以搜索一下`font awesome`
      • 79adf66b53b3:别出心裁的简历制作方式,赞一个

      本文标题: markdown生成一份html简历

      本文链接:https://www.haomeiwen.com/subject/pyglyttx.html