上一篇大致介绍了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