當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Pacman主题下给Hexo增加简历类型

發布時間：2023/12/10 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 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后面那行的”—-“（三個-）沒寫，然后后面就坑爹了，死活生成不了正常的頁面，同時頂部的鍵值對冒號之間注意要加空格，很多這種坑。
然后一切按照正常的流程走，把簡歷也寫好。

1 title: Resume 2 layout: post 3 date: 2015-01-02 23:23:59 4 --- 5 # 王小二(wangxiaoer#gmail.com) 6 ##個人信息 7 - 本科/XXX大學(20XX.9-20XX.7)/計算機科學與技術 8 - 工作年限：2年 9 - 技術博客：http://xxxxx.com 10 - 地點：北京 11 ##工作經歷 12 ###五道口宇宙中心 13 ####XXXX項目（2013.10-至今） 14 - XXXXXXXXXXXXXXXXX 15 - XXXXXXXXXXXXXXXXXX 16 - XXXXXXX 17 - XXXXXXXXXXXXXXXXXXXXXX 18 ##技能列表 19 熟悉：Android/Java 20 了解：C#/WP，Python，HTML, Markdown等 View Code

現在看起來跟Pacman主題下任何普通的博文樣式一樣。
現在怎么去掉首部，以及尾部，以及側邊欄等等一切不要的東西，不要捉急，慢慢來，一個一個砍，一步一步實現咱們想要的效果。
看到md首部有個layout屬性，是不是可以從這里開刀呢？
再聯想到Pacman配置搜索頁面需要設置layout屬性為search。OK，就以search為關鍵詞在pacman中搜索，然后在/pacman/layout/layout.ejs里面找到了它。這種關鍵詞查找突破法在很多地方可以用到。之前研究別人APK實現原理的時候就經常用，屢試不爽，下次寫文章講解APK的逆向研究。
OK，找到了。發現里面大致的一段代碼如下：

1 <% } else if(page.layout=='search'){ %> 2 <%- partial('_partial/head') %> 3 <body> 4 <header> 5 <%- partial('_partial/header') %> 6 </header> 7 <div id="container"> 8 <%- partial('_partial/search')%> 9 </div> 10 <%- partial('_partial/after_footer') %> 11 </body> 12 </html> View Code

想起之前學習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底部的一些數據，最終代碼如下：

1 <div id="main" class="<%= item.layout %>" itemscope itemprop="blogPost"> 2 <article itemprop="articleBody"> 3 <%- partial('header') %> 4 <div class="article-content"> 5 <%- partial('gallery') %> 6 <% if( table&&(item.toc !== false) && theme.toc.article){ %> 7 <div id="toc" class="toc-article"> 8 <strong class="toc-title"><%= __('contents') %></strong> 9 <%- toc(item.content) %> 10 </div> 11 <% } %> 12 <%- item.content %> 13 </div> 14 </article> 15 </div> View Code

然后回到/_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增加简历类型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。