Every templates apply to layout template by default.
每个模板都默认使用layout布局。
1、前提
light-ch/
├── _config.yml
├── languages/
├── source/
└── layout/
├── _partial/
├── _widget/
├── archive.ejs
├── category.ejs
├── index.ejs
├── layout.ejs
├── page.ejs
├── post.ejs
└── tag.ejs
2、默认布局
Hexo的主题布局文件基本上是在layout这个文件夹下，每个模版都默认使用layout布局，那么来看看layout.ejs这个文件的内容。
<%- partial('_partial/head') %>
<body>
<header id="header" class="inner"><%- partial('_partial/header') %></header>
<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>
每个Hexo站点基本上分为index（首页）、post（文章详情页）、page（导航标签页）、archive（归档页）、category（类别页）以及tag（标签页），没错就是Layout文件夹下的几个文件。它们每个都代表一种布局，将它们用来替换掉layout.ejs文件里的<%- body %>就得到了各个布局的页面代码。
其实你打开各个布局的文件，你会发现他们有些其实是很相似的，甚至是一样的。比如post.ejs和page.ejs，这两者代码如下（以light-ch主题为例）：
{% codeblock post.ejs %}
<%- partial('_partial/article', {item: page, index: false}) %>
{% endcodeblock %}
{% codeblock page.ejs %}
<%- partial('_partial/article', {item: page, index: false}) %>
{% endcodeblock %}
可以看出他们是一模一样的，他们都引用了_partial/article局部模块，事实上这两种在light-ch主题里的布局是一样的，当然你也可以通过在article.ejs里判断layout来使他们不一样。
3、首页布局
最后来看看index.ejs，它是首页布局，跟其他的布局还是不一样的。代码如下：
{% codeblock index.ejs %}
<% page.posts.each(function(item){ %>
<%- partial('_partial/article', {item: item, index: true}) %>
<% }); %>
{% endcodeblock %}
下面分析article.ejs中一小段代码如下：
<article class="<%= item.layout %>">
<% if (item.photos && item.photos.length){ %> <!--当文章存在照片的时候，也就是在前置声明中加入了photos变量-->
<%- partial('post/gallery') %> <!--就会引入这段代码，用来显示相册-->
<% } %>
<div class="post-content">
......
后面的代码可以自行分析一下，接下来我会添加一个全新的resume布局到站点中，通过这个实战应该会对Hexo的布局有更进一步的了解。