原文 http://blog.zanlabs.com/2015/01/02/add-resume-type-to-hexo-under-pacman-theme/

背景

虽然暂时不找工作，但是想着简历也是个向别人推销自己的好东西。然后也想着折腾点新的东西，如此，这般，便想着研究起写个简历了。
形式不限，但是必须是在线的，最好是很简洁的。

分析

既然是在线的，那就干脆直接用博客呗，直接放在上面。
写博客既然用Markdown，那简历也直接用Markdown，一个是可以在线渲染，另外一个是生成PDF的工具也很多，Github一搜就有好几个不错的。
由于用的主题是Pacman,那就在它的基础上直接改。虽然网页相关基础只是了解一些，但是并不妨碍修改。
先看下最终的效果吧。简历效果。 是不是很简洁，达到了预期的效果。嘿嘿。

实现

hexo的主题是放在themes目录下的。先从Pacman下载Pacman主题。下载完成后参考官方说明设置主题为它。
接着就开始动工了。

既然是简历嘛，那就不希望它出现在首页的列表里面。也就是md文件不要放在/source/_posts文件夹。建一个about的文件夹，放在/source/about里面。
然后新建一个resume.md文件。
注意，这个地方我遇到了一个坑，由于md是自己写的，不是hexo自动生成的，导致date后面那行的”—-“（三个-）没写，然后后面就坑爹了，死活生成不了正常的页面，同时顶部的键值对冒号之间注意要加空格，很多这种坑。
然后一切按照正常的流程走，把简历也写好。

 title: Resume

 layout: post

 date: -- ::

 ---

 # 王小二(wangxiaoer#gmail.com)

 ##个人信息

  - 本科/XXX大学(20XX.-20XX.)/计算机科学与技术

  - 工作年限：2年

  - 技术博客：http://xxxxx.com

  - 地点：北京

 ##工作经历

 ###五道口宇宙中心

 ####XXXX项目（2013.10-至今）

  - XXXXXXXXXXXXXXXXX

  - XXXXXXXXXXXXXXXXXX

  - XXXXXXX

  - XXXXXXXXXXXXXXXXXXXXXX

 ##技能列表

 熟悉：Android/Java

 了解：C#/WP，Python，HTML, Markdown等

现在看起来跟Pacman主题下任何普通的博文样式一样。
现在怎么去掉首部，以及尾部，以及侧边栏等等一切不要的东西，不要捉急，慢慢来，一个一个砍，一步一步实现咱们想要的效果。
看到md首部有个layout属性，是不是可以从这里开刀呢？
再联想到Pacman配置搜索页面需要设置layout属性为search。OK，就以search为关键词在pacman中搜索，然后在/pacman/layout/layout.ejs里面找到了它。这种关键词查找突破法在很多地方可以用到。之前研究别人APK实现原理的时候就经常用，屡试不爽，下次写文章讲解APK的逆向研究。
OK，找到了。发现里面大致的一段代码如下：

 <% } else if(page.layout=='search'){ %>

  <%- partial('_partial/head') %>

     <body>

       <header>

         <%- partial('_partial/header') %>

       </header>

       <div id="container">

         <%- partial('_partial/search')%>

       </div>

       <%- partial('_partial/after_footer') %>

     </body>

    </html>

想起之前学习php时也会有这种混用，html代码与php代码混在在一起，这里应该也是差不多的。暂时先这样认为，当然后续也证实了这是没错的。
既然pacman可以自定义search属性，那咱们也可以自定义一个resume属性。 那里面要放什么内容呢？ 跟search节点一样？
然后查看hexo主题属性layout相关的文档http://hexo.io/docs/themes.html，里面说一个布局必须包含”<%- body %> “才能显示内容。
常用的是layout值是post或者page，先看下page果然有”<%- body %> “，那就考虑直接复制过来，用了再说。post与page的区别通过测试可以发现post右边有Sidebar，样式也有一定区别。鉴于实际情况，此处使用page的内容。
改好之后就直接运行看效果了，尼玛，背景是灰色的啊，不能忍啊，太tm难看了。page类型的就是白色的，然后使用Chrome审查元素，看到内容的class id为resume，page的为page，应该跟这个有关系，然后搜索，找到了/pacman/source/css/_partial/article.styl。第一行加上,.resume，一切搞定。
接着就是怎么搞定首部和尾部了。看到layout文件里里面有个page.ejs文件，先拷贝一份为resume.ejs（处理页面数据）,/_partial文件夹里面的也类似（这个用来处理往首页列表加摘要）。这个文件里面使用到的/_partial/post/article.ejs也拷贝一份为resume.js。修改/layout/resume.ejs文件里面的指向。
由于不需要评论以及尾部，删除/_partial/post/article.ejs底部的一些数据，最终代码如下：

 <div id="main" class="<%= item.layout %>" itemscope itemprop="blogPost">

   <article itemprop="articleBody">

     <%- partial('header') %>

   <div class="article-content">

     <%- partial('gallery') %>

     <% if( table&&(item.toc !== false) && theme.toc.article){ %>

     <div id="toc" class="toc-article">

       <strong class="toc-title"><%= __('contents') %></strong>

     <%- toc(item.content) %>

     </div>

     <% } %>

     <%- item.content %>

   </div>

   </article>

 </div>

然后回到/_partial/post/article.ejs里面的resume分支，之前复制的是page代码，我们需要删掉一些数据，考虑只留下”<%- body %> “，运行一下，卧槽，怎么会有乱码。应该是头部有编码信息，要考虑保留，尾部由于也有统计信息，也要考虑保留，最后经过不断的”删除->查看效果->复原”，确定删除的部分，最终保留代码如下：

 <% } else if(page.layout=='resume'){ %>

   <% if(page.source.match(/\.md$/)){ %>

    <%- partial('_partial/head') %>

      <body>

        <div id="container">

          <%- body %>

        </div>

       <div id="footer"><br/></div>

        <%- partial('_partial/after_footer') %>

      </body>

     </html>

     <% }else{ %>

    <%- page.content %>

  <% } %>

 <% } else if(page.layout=='page'){ %>

最后运行一下，就是之前的效果了。Perfect！
最后编写简历时把layout设置为resume就可以了。同时，最好不要把简历的md放在_posts目录下，如果放在里面，在首页列表里面会包含有它，而且样式有一定问题。/about/resume.md最后生成的路径是 http://yourwebsite/about/resume.html ，然后在首页的顶部导航栏增加这个路径就可以了。

总结

不仅仅可以增加resume属性，也可以增加其他的来扩展更多的自定义页面，比如404页面。
花了一晚上时间研究，虽然在—-三个-处耽误了不少时间，还是蛮有趣的。
有任何问题欢迎向我反馈。
源码我已经放在Github（https://github.com/waylife/pacman_with_resume）上了，欢迎star以及fork。

Pacman主题下给Hexo增加简历类型的更多相关文章

  1. Hexo快速构建个人小站-Fulid主题下添加Valine评论系统(三)

    Hexo目录: Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一) Hexo快速构建个人小站-自定义域名和自定义主题(二) 背景交代: 前面两章完成了Hexo的初始化和部分自定义 ...

  2. Shell脚本中判断输入参数个数的方法投稿：junjie 字体：[增加 减小] 类型：转载

    Shell脚本中判断输入参数个数的方法 投稿:junjie 字体:[增加 减小] 类型:转载   这篇文章主要介绍了Shell脚本中判断输入参数个数的方法,使用内置变量$#即可实现判断输入了多少个参数 ...

  3. jquery获得option的值和对option进行操作 作者： 字体：[增加 减小] 类型：转载 时间：2013-12-13 我要评论

    jquery获得option的值和对option进行操作 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-13我要评论 本文为大家介绍下jquery获得option的值和对option ...

  4. 在Windows下使用Hexo+GithubPage搭建博客的过程

    1.安装Node.js 下载地址:传送门 去 node.js 官网下载相应版本,进行安装即可. 可以通过node -v的命令来测试NodeJS是否安装成功 2.安装Git 下载地址:传送门 去 Git ...

  5. 个人建站&mac下安装hexo

    title: 个人建站&mac下安装hexo date: 2018-04-18 16:34:02 tags: [mac,blog,个人建站,markdown] --- 这两天使用了markdo ...

  6. linux下搭建hexo环境

    最近对搭建个人博客比较感兴趣,但是刚搭建好next主题基本博客,电脑就坏了,借了一台电脑继续搞,不想在他电脑中弄太多环境,所以我准备在自己电脑的服务器上搭建hexo环境 服务器环境: (1)cento ...

  7. CentOS 下安装 Hexo 博客

    前言: 之前一直使用Wordpress架构作为博客网站架构,但是现在频频爆出漏洞.实在是不敢用也不想用了,然后群里面有小伙伴用的是 Github 搭建 Hexo 架构博客.就写了这个教程,给自己做个参 ...

  8. Mac下搭建hexo

    Mac下搭建hexo 并部署到gitcafe 1.安装brewhome ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homeb ...

  9. paip.输入法编程---增加码表类型

    paip.输入法编程---增加码表类型 作者Attilax ,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/attil ...

随机推荐

  1. 【面试题002】java实现的单例模式，c++实现单例模式，实现禁止拷贝

    [面试题002]java实现的单例模式,c++实现单例模式,实现禁止拷贝  一 c++实现单例模式 保证一个类,在一个程序当中只有一个对象,只有一个实例,这个对象要禁止拷贝,注意这里要区别于java. ...

  2. [转载]Spring Autowire自动装配介绍

    转自: http://www.cnblogs.com/zhishan/p/3190757.html 在应用中,我们常常使用<ref>标签为JavaBean注入它依赖的对象.但是对于一个大型 ...

  3. hdoj 1596 find the safest road

    题目传送:http://acm.hdu.edu.cn/showproblem.php?pid=1596 分析:Dijkstra变体,最短路径判断计算方式:Safe(P) = s(e1)*s(e2)…* ...

  4. 2013 ACM-ICPC长沙赛区全国邀请赛——A So Easy!

    这题在比赛的时候不知道怎么做,后来看了别人的解题报告,才知道公式sn=(a+sqrt(b))^n+(a-sqrt(b))^n; 具体推导 #include<iostream> #inclu ...

  5. hdu2010

    //很闲,刷水..... http://acm.hdu.edu.cn/showproblem.php?pid=2010 #include<iostream> #include<std ...

  6. Secret and Whisper

    这两个应用都是以匿名方式向朋友分享信息. 36氪的网友评论到: Whisper 的厉害之处在于给年轻人提供了一个释放压力的地方,比如说他去年陪孩子看病,这种经历不愿意放到 Facebook 上,但是他 ...

  7. [Unity菜鸟] 产生各不相同的随机数

    1. 网上很多方法都说用时间种子来解决,但是在极短的时间内,这种方法没效 Random r = new Random(DateTime.Now.Millisecond); Random Counter ...

  8. 2.Sprng-IoC-Java反射例子

    1.Car.java package com.jike.spring.chapter03.reflect; public class Car { private String brand; priva ...

  9. C#操作.csv文件Demo

    1.使用OleDB操作.csv文件,比较费时 public static DataTable GetDataTableFromCsv(string path,bool isFirstRowHeader ...

  10. Generic repository pattern and Unit of work with Entity framework

    原文 Generic repository pattern and Unit of work with Entity framework Repository pattern is an abstra ...