原文 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. HDU 1598 find the most comfortable road(枚举+并查集，类似于最小生成树)

    一开始想到用BFS,写了之后,发现有点不太行.网上查了一下别人的解法. 首先将边从小到大排序,然后从最小边开始枚举,每次取比它大的边,直到start.end属于同一个集合,即可以连通时停止.过程类似于 ...

  2. 使用 Storyboard Segue 实作 UIViewController 的切换

    http://blog.csdn.net/mazhen1986/article/details/7791430 Storyboard 是在 iOS 5 SDK 中才出现的新名词,它其实就是原本的 Xi ...

  3. crontab 不能执行git命令问题备忘

    这问题够隐蔽,折腾了近两个小时. 命令 git checkout tagname 手工执行都正常 但在crontab运行时发现分支一直切不过去. 后来告诉是crontab默认的 path  设置和系统 ...

  4. Android Service 的一些笔记

    绑定服务: 用于间接调用服务里面的方法.如果调用者Activity被销毁了,服务也跟着销毁了,服务也会跟着销毁. 开启服务: 不可以调用服务里面的方法.如果调用者的Activity退出了,服务还会长期 ...

  5. 什么是struts2？

    一.我对struts2的理解. 1.struts2 是一个按MVC模式设计放入web层框架,其实它就是一个servlet.这个servlet命名为ActionServlet,或者是它的一个子类.它的工 ...

  6. ubuntu创建用户

    Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统.用户的账号 一方面可以帮助系统管理员对使用系统的用户进 ...

  7. 使用eclipse的快捷键自动生成的map或者reduce函数的参数中：“org.apache.hadoop.mapreduce.Reducer.Context context”

    今天在测试mapreduce的程序时,就是简单的去重,对照课本上的程序和自己的程序,唯一不同的就是“org.apache.hadoop.mapreduce.Reducer.Context contex ...

  8. ExtJs自学教程(2)：从DOM看EXTJS

    <二> 从DOM看EXTJS 看标题可能有人会问,为啥好好的例子不看,得从DOM看起呢?答案是目标只为了一个:自运行结果把EXTJS看得更清楚点 首先,要看得靠点工具,带点放大镜什么吧?对 ...

  9. 关于 Memcached 的一些使用

    关于Memcached的一些用法, Memcached 在Windows下的版本费了很大劲,才找到.win32,win64都有.本来想自己build的,但是Cygwin下载包也是费老劲了,下不下来. ...

  10. HDU 4965 矩阵快速幂

    顺手写了下矩阵类模板 利用到矩阵乘法的交换律 (A*B)^n == A * (B*A)^n-1 *B #include <cstdio> #include <cstring> ...