Every templates apply to layout template by default.
每个模板都默认使用layout布局。
刚看完Hexo Docs中模版那一部分的时候，很不理解这是什么意思？这里就来谈谈Hexo的站点布局到底是怎样的？我觉得这是非常重要的，了解了这些，就可以对你的站点布局『为所欲为』了。
1、前提
上面说了，每个模版都默认使用layout布局，首先来看看themes目录下的light-ch目录，light-ch主题是基于hexo默认主题light的china适用版，详细请fork light-ch，这里主要以该主题为例。可以看到主题根目录下有如下结构：
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>
结合局部模块的知识，不难看出这个layout.ejs就是一个完整的页面，有head、header、content、sidebar、footer以及after_footer，页面所有的部分都通过局部模块嵌入在这个文件中。然而中间有一段<%- body %>指的是什么呢？这里就是各个布局的关键所在。
每个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 %}
这一块什么意思？首先是一个循环语句，因为首页要显示出近期发布的几篇文章，引入局部模块的时候使用了Local Variables（本地变量）的相关内容，这里是将post页面变量赋值给了本地变量item，换句话说，在_partial/article.ejs这个文件中所有的item变量都指的是post页面变量，里面使用了很多页面变量的一些键值，参考这里页面变量看article.ejs的代码就容易多了。
下面分析article.ejs中一小段代码如下：
<article class="<%= item.layout %>">
<% if (item.photos && item.photos.length){ %> <!--当文章存在照片的时候，也就是在前置声明中加入了photos变量-->
<%- partial('post/gallery') %> <!--就会引入这段代码，用来显示相册-->
<% } %>
<div class="post-content">
......
后面的代码可以自行分析一下，接下来我会添加一个全新的resume布局到站点中，通过这个实战应该会对Hexo的布局有更进一步的了解。
网友评论