Pacman主题下给Hexo增加简历类型
原文?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后面那行的”—-“（三個-）沒寫，然后后面就坑爹了，死活生成不了正常的頁面，同時頂部的鍵值對冒號之間注意要加空格，很多這種坑。
然后一切按照正常的流程走，把簡歷也寫好。
現在看起來跟Pacman主題下任何普通的博文樣式一樣。
現在怎么去掉首部，以及尾部，以及側邊欄等等一切不要的東西，不要捉急，慢慢來，一個一個砍，一步一步實現咱們想要的效果。
看到md首部有個layout屬性，是不是可以從這里開刀呢？
再聯想到Pacman配置搜索頁面需要設置layout屬性為search。OK，就以search為關鍵詞在pacman中搜索，然后在/pacman/layout/layout.ejs里面找到了它。這種關鍵詞查找突破法在很多地方可以用到。之前研究別人APK實現原理的時候就經常用，屢試不爽，下次寫文章講解APK的逆向研究。
OK，找到了。發現里面大致的一段代碼如下：
想起之前學習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底部的一些數據，最終代碼如下：
然后回到/_partial/post/article.ejs里面的resume分支，之前復制的是page代碼，我們需要刪掉一些數據，考慮只留下”<%- body %> “，運行一下，臥槽，怎么會有亂碼。應該是頭部有編碼信息，要考慮保留，尾部由于也有統計信息，也要考慮保留，最后經過不斷的”刪除->查看效果->復原”，確定刪除的部分，最終保留代碼如下：
1 <% } else if(page.layout=='resume'){ %> 2 <% if(page.source.match(/\.md$/)){ %> 3 <%- partial('_partial/head') %> 4 <body> 5 <div id="container"> 6 <%- body %> 7 </div> 8 <div id="footer"><br/></div> 9 <%- partial('_partial/after_footer') %> 10 </body> 11 </html> 12 <% }else{ %> 13 <%- page.content %> 14 <% } %> 15 <% } else if(page.layout=='page'){ %> View Code最后運行一下，就是之前的效果了。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。
轉載于:https://www.cnblogs.com/waylife/p/add-resume-type-to-hexo-under-pacman-theme.html
總結
以上是生活随笔為你收集整理的Pacman主题下给Hexo增加简历类型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 视频技术基础
- 下一篇： 虚拟字符设备驱动开发步骤