Hexo主题中新添加resume布局

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

Comments
Write a Comment