上一篇大致介紹了Hexo站點(diǎn)的布局，每個(gè)主題的布局結(jié)構(gòu)是不一樣的，但是都是類似的，所以明白了Hexo生成站點(diǎn)的原理就能看懂所有主題的布局，這里還是以主題light-ch為例來(lái)講解如何添加一個(gè)新的布局resume.ejs。
1、在layout文件夾中添加布局文件
想要一個(gè)新的布局，要么通過(guò)對(duì)layout的判斷在article.ejs局部模塊中修改，要不就是新建一個(gè)resume.ejs布局文件，指向另外一個(gè)局部模塊。這里我選擇了后面一種方法，避免混亂。
首先在layout文件下創(chuàng)建resume.ejs文件，里面代碼如下：
<%- partial('_partial/resume') %>
它指向的是一個(gè)局部模塊，里面就是想要顯示的樣式了。把它替換到layout.ejs文件中<%- body %>的位置上就是你的resume頁(yè)面了。
假如這里替換到<%- body %>的樣式也不是我想要的，那么就可以修改layout.ejs文件如下：
<%- partial('_partial/head') %>
<body>
<header id="header" class="inner"><%- partial('_partial/header') %></header>
<% if(page.layout == 'resume') {%>
<%- body %>
<% }else{ %>
<div id="content" class="inner">
<div id="main-col" class="alignleft"><div id="wrapper"><%- body %></div></div>
<aside id="sidebar" class="alignright"><%- partial('_partial/sidebar') %></aside>
<div class="clearfix"></div>
</div>
<% } %>
<footer id="footer" class="inner"><%- partial('_partial/footer') %></footer>
<%- partial('_partial/after_footer') %>
</body>
</html>
我只想要保留header以及footer的部分，其他的部分我想單獨(dú)設(shè)計(jì)，那么如上加個(gè)判斷條件就行了。當(dāng)布局為resume的時(shí)候，完全按照我的_partial/resume模版樣式。那么接下來(lái)就是考驗(yàn)設(shè)計(jì)網(wǎng)頁(yè)的功底了。
2、resume布局的局部模塊
在_partial目錄下創(chuàng)建resume.ejs局部模塊，這里的內(nèi)容就是想顯示的頁(yè)面布局了，可以發(fā)揮自己的設(shè)計(jì)能力，設(shè)計(jì)一個(gè)漂亮的頁(yè)面，我的示例代碼如下：
<div class="resume">
<div class="resume-left">
<img src="/assets/img/avatar/psb.jpg" alt="photo">
<span>Email:</span>
<a href="#">1911986273@qq.com</a>
</div>
<div class="resume-entry">
<%- page.content %>
</div>
</div>
頁(yè)面結(jié)構(gòu)有了，下面就要添加樣式文件了，你可以在source/css/_partial/目錄中添加resume.styl，然后在source/css/style.styl中引入（在最后一行加入@import '_partial/resume'）就行了。
3、在頁(yè)面中添加page
通過(guò)命令hexo new page resume創(chuàng)建一頁(yè)，Hexo會(huì)自動(dòng)在根目錄下的source文件夾下創(chuàng)建resume文件夾，文件夾下有index.md文件，編輯index.md寫(xiě)上你的簡(jiǎn)歷主要內(nèi)容。
index.md的前置聲明一定要加上
layout: resume，不然你的布局就形同虛設(shè)了。（如果不設(shè)置，默認(rèn)會(huì)是page布局）
source/
├── _drafts/
├── _posts/
├── resume/
├──index.md
然后打開(kāi)主題light-ch目錄下的_config.yml配置文件，在menu下添加一行代碼。
menu:
首頁(yè): /
個(gè)人簡(jiǎn)歷: /resume
至此，大功告成，瀏覽一下個(gè)人簡(jiǎn)歷頁(yè)面。Demo
