上一篇大致介绍了Hexo站点的布局，每个主题的布局结构是不一样的，但是都是类似的，所以明白了Hexo生成站点的原理就能看懂所有主题的布局，这里还是以主题light-ch为例来讲解如何添加一个新的布局resume.ejs。
1、在layout文件夹中添加布局文件
想要一个新的布局，要么通过对layout的判断在article.ejs局部模块中修改，要不就是新建一个resume.ejs布局文件，指向另外一个局部模块。这里我选择了后面一种方法，避免混乱。
首先在layout文件下创建resume.ejs文件，里面代码如下：
<%- partial('_partial/resume') %>
它指向的是一个局部模块，里面就是想要显示的样式了。把它替换到layout.ejs文件中<%- body %>的位置上就是你的resume页面了。
假如这里替换到<%- 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的部分，其他的部分我想单独设计，那么如上加个判断条件就行了。当布局为resume的时候，完全按照我的_partial/resume模版样式。那么接下来就是考验设计网页的功底了。
2、resume布局的局部模块
在_partial目录下创建resume.ejs局部模块，这里的内容就是想显示的页面布局了，可以发挥自己的设计能力，设计一个漂亮的页面，我的示例代码如下：
<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>
页面结构有了，下面就要添加样式文件了，你可以在source/css/_partial/目录中添加resume.styl，然后在source/css/style.styl中引入（在最后一行加入@import '_partial/resume'）就行了。
3、在页面中添加page
通过命令hexo new page resume创建一页，Hexo会自动在根目录下的source文件夹下创建resume文件夹，文件夹下有index.md文件，编辑index.md写上你的简历主要内容。
index.md的前置声明一定要加上
layout: resume，不然你的布局就形同虚设了。（如果不设置，默认会是page布局）
source/
├── _drafts/
├── _posts/
├── resume/
├──index.md
然后打开主题light-ch目录下的_config.yml配置文件，在menu下添加一行代码。
menu:
首页: /
个人简历: /resume
至此，大功告成，浏览一下个人简历页面。Demo
resume01.png
网友评论