Pacman主題下給Hexo增加簡曆類型，pacmanhexo

最後更新：2015-01-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

原文 http://blog.13kbook.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: 2015-01-02 23:23:59---# 王小二(wangxiaoer#gmail.com)##個人資訊 - 本科/XXX大學(20XX.9-20XX.7)/電腦科學與技術 - 工作年限：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。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More