<译>创建一个Hexo主题-Part1:首页

前言：
本系列文章翻译自@Jonathan Klughertz的博客，将会用三篇文章的篇幅详细讲解如何制作一个Hexo主题。
我不是学翻译出身，若有翻译错误或是不到位之处，请指正。

---

在这个系列教程中，你将学习怎么从零开始制作一个Hexo主题。我很喜欢Hexo，并且每天都在使用，不幸的是，直到今天关于主题制作的文档还是相当稀缺。所以我打算弥补这个空缺。

预先准备

• Hexo博客的基础使用。如果你是第一次接触，请前往官网阅读教程
• 了解Bootstrap
• 了解Javascript模板引擎（我们将使用EJS）

项目描述

这个项目旨在制作一个Hexo主题并详细了解Hexo引擎的工作方式。
我不想在HTML和CSS上花费太多时间，所以我们将重置下面这个Hexo主题：https://getbootstrap.com/docs... 。它是Bootstrap文档中的一个标准初始模板样例。
我们将一步步地重用CSS、复制粘贴HTML，直到最后实现想要的效果。
如果你感到困惑或者只对它的代码感兴趣，请前往github。

项目结构

创建一个新的hexo博客

让我们从搭建一个全新的hexo博客开始吧

# Create a new folder
mkdir hexo-theme-creation 
cd hexo-theme-creation
# Initialise Hexo
hexo init

创建主题文件夹

# Enter the theme folder
cd themes
# bootstrap-blog-hexo is also going to be the name of our theme
mkdir bootstrap-blog-hexo

注意：如果你想在git中保存主题的话（你也应该这么做），请在/themes/bootstrap-blog-hexo/中初始化git。

文件夹结构

这是我们开始工作所需要的文件和文件夹：

|-- layout // .ejs templates 
|-- source // source files (CSS, scripts)
|-- _config.yml

创建以下两个文件夹和_config.yml文件。

• /layout/ 将包含我们所有的EJS模板
• /source/ 将包含我们所有的资源（CSS文件、外部脚本和库）
• _config.yml 包含我们的主题配置。现在暂且不写入任何内容。

复制bootstrap blog源码

从bootstrap blog template复制所有我们需要的源码并放在source文件夹里。你可以选择通过浏览器查看源码并复制下来，或者是下载该压缩包，之后解压到source文件夹里。

|-- layout 
|-- source 
    |-- bootstrap // Copy the boostrap library files here 
    |-- css // Copy the blog's css file here
    |-- favicon
        |-- favicon.ico // Your choice of favicon
    |-- js // Copy the blog's js file here
|-- _config.yml

Hexo的基本要素

在我们开始写第一个模板文件之前，先来看看Hexo博客生成过程的基本要素。

页面类型

我们能够在主题中定义6种页面类型，与之相对应地，在public文件夹生成的每一个单独的HTML页面都属于下面模板中的其中一个：

模板	备用模板	页面描述
index	无	这是博客的首页，也是网站的主要入口。本教程中我们将让其显示文章摘要列表
post	index	这是文章的详情页。我们将展示一篇完整的文章以及一个评论区
page	index	这是页面的详情页，与post一样，但是是page类型的post
archive	index	这是归档页。它将显示我们博客中所有文章的标题和详情页链接
category	archive	这是分类页。与归档页类似，但是会根据类别进行筛选
tag	archive	这是标签页。与分类页类似，但是会根据标签进行筛选

在本篇教程中我们将创建index模板。

在页面生成过程中，Hexo将会搜索名字为index.ejs,post.ejs,page.ejs等的文件，这些模板之后用于创建静态HTML页面。

公共布局

Hexo支持使用公共的布局文件，上面的模板都将使用到该文件。
该文件命名为layout.ejs。不同页面类型的模板会创建一些内容，而这个文件就好比这些内容的“外壳”。
在我们的主题中，公共布局将包括：标签、标签、头部、菜单、底部和侧边栏。基本上是所有类型的页面都具备的元素。
不同的页面模板将只负责创建实际内容，这些内容将放在我们的主体部位。

变量

在所有的模板中，我们都可以使用hexo引擎提供的内置变量。以下是部分变量：

• Site：site包含了网站的信息。例如，我们可以通过site.posts访问博客中的所有文章。当我们想要显示统计数据的时候，这将派上用场。
• Page：page是主要变量，包含了许多与当前页面相关的信息，包括所有的文章标题、日期、内容等。
• Config：config是一个指向站点_config.yml文件的JavaScript对象
• Theme：theme是一个指向主题_config.yml文件的JavaScript对象

主题的布局创建

上面提及了/layout/layout.ejs文件，现在我们开始来创建它。

顶部标签

首先创建layout.ejs文件并插入标签

//layout/layout.ejs


<%- partial('_partial/head') %>

这里我们将所有标签里的代码提取出来并放在局部视图中，这有助于实现关注点分离和代码重用。
语法是partial('path' [, arguments])
在创建layout/_partial/head.ejs文件后，从bootstrap源码中复制head标签里的代码：

// layout/_partial/head.ejs

    
    
    
    
    
    
    
    
    
    <%- css('bootstrap/css/bootstrap.min.css') %>
    
    <%- css('css/ie10-viewport-bug-workaround.css') %>
    
    <%- css('css/blog.css') %>
    
    

这很简单，我们只需使用CSS helper插入样式表。
source文件夹中的文件将会被复制到站点根目录下，所以不要在路径中包含source/
我们将让