初步了解Hexo站点的布局

刚看完Hexo Docs中模版那一部分的时候,很多地方不明白,这里就来谈谈Hexo的站点是怎么生成的?布局指的是什么?了解了这些,就可以对你的站点布局『为所欲为』了。

Every templates apply to layout template by default.

每个模板都默认使用layout布局。

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.ejspage.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的布局有更进一步的了解。

Comments
Write a Comment