<译>建立一个Hexo主题-Part2:首页

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

---

在这个系列教程中，你将学习怎么从零开始制做一个Hexo主题。
在part1中，咱们已经着手动工并建立了首页。在这篇文章中，咱们将运用所学完成剩余的页面。

文章详情页

让咱们继续完成part1中的剩余工做并建立文章详情页。
正如咱们看到的，为了生成详情页，Hexo将会在/layout/文件夹中寻找一个post.ejs文件。
这是个人post.ejs文件：

// layout/post.ejs
<%- partial('_partial/article-full', {item: page}) %>

为了让代码更加有序，咱们会将实际代码放在_partial/article-full.ejs中。如今先来建立这个文件：

// layout/_partial/article-full.ejs

<div class="blog-post">
    <!-- Title -->
    <h2 class="blog-post-title">
        <a href="<%- config.root %><%- item.path %>">
            <%- item.title || item.link%>
        </a>
    </h2>
    <!-- Date and Author -->
    <p class="blog-post-meta">
        <%= item.date.format(config.date_format) %>
        <% if(item.author) { %>
            by <%- item.author %>
        <% } %>
    </p>
    <!-- Content -->
    <%- item.content %>
    <hr />
    <!-- Tags and Categories links -->
    <%- partial('article-tags', {item: item}) %>
    <%- partial('article-categories', {item: item}) %>
</div>

这个模板几乎和`_partial/article-excerpt.ejs同样，除了：

• 咱们使用<%- item.content %>展现全文内容而不是摘要
• 在底部新增两个部分，分别是标签部分和分类部分。接下来分别建立它们。

文章标签

文章标签部分将生成一篇文章对应的全部标签：layout/_partial/article-tags.ejs
咱们想要建立的是一系列的标签和连接，每一个连接都将导向对应的标签页面，而标签页面会显示该标签的全部文章。

// layout/_partial/article-tags.ejs

<% if (item.tags && item.tags.length){ %>
<%
    var tags = [];
    item.tags.forEach(function(tag){
        tags.push('<a href="' + config.root + tag.path + '">#' + tag.name + '</a>');
    });
%>
<div class="blog-tags-container">
    <span class="glyphicon glyphicon-tags"></span>
    <%- tags.join(' ') %>
</div>
<% } %>

很简单，咱们经过post.tags遍历文章的全部标签并让这些标签一个接一个地显示。我在每一个标签前面加了一个#号，而且在列表前面额外加了一个图标。

文章分类

layout/_partial/article-categories.ejs的内容和上面很类似

// layout/_partial/article-categories.ejs

<% if (item.categories && item.categories.length){ %>
<%
    var categories = [];
    item.categories.forEach(function(category){
        categories.push('<a href="' + config.root + category.path + '">' + category.name + '</a>');
    });
%>
<div class="blog-categories-container">
    <span class="glyphicon glyphicon-folder-open"></span>
    <%- categories.join(' / ') %>
</div>
<% } %>

这里再也不赘述。

文章样式

可能有人注意到了，咱们分别给了标签部分和分类部分一个类名，这是为了方便给它们设置样式。这是相关代码，将它们添加进blog.css中：

// source/css/blog.css

.blog-tags-container, .blog-categories-container {
    margin-top: 30px;
    font-size: 20px;
}
.blog-tags-container span.glyphicon, .blog-categories-container span.glyphicon {
    margin-right: 20px;
}

页面类型模板的详情页

这个很简单。“页面类型模板”和“文章类型模板”相差无几。就当作练习自定义一下就好，这是个人设置：

// layout/page.ejs
<%- partial('_partial/article-full', {item: page}) %>

归档页

归档页和首页同样会显示文章列表，只是它要更加简略---尽管基础结构和首页是差很少的：

// layout/archive.ejs

<% page.posts.each(function(item){ %>
<%- partial('_partial/article-archive', {item: item}) %>
<% }); %>
<%- partial('_partial/pagination') %>

文章归档页部分

和前面同样，实际的工做是由article-archive.ejs完成的。我使用article-excerpt做为基础结构，作了适当删减，只保留标题、日期和做者。

// layout/_partial/article-archive.ejs

<div class="blog-post">
    <!-- Title -->
    <h2 class="blog-post-title-archive">
        <a href="<%- config.root %><%- item.path %>">
            <%- item.title || item.link%>
        </a>
    </h2>
    <!-- Date and Author -->
    <p class="blog-post-meta">
        <%= item.date.format(config.date_format) %>
        <% if(item.author) { %>
            by <%- item.author %>
        <% } %>
    </p>
</div>

细心的人可能注意到，我为标题建立了一个新的类名（它们太大了，我不喜欢）：

// source/css/blog.css
.blog-post-title-archive {
    margin-bottom: 5px;
    font-size: 25px;
}

标签页和分类页

最后咱们还须要建立两个页面。标签页将包括某个标签对应的所有文章，分类页同理。若是你还记得的话：

模板	备用模板	页面描述
archive	index	这是归档页。它将显示咱们博客中全部文章的标题和详情页连接
category	archive	这是分类页。与归档页相似，可是会根据类别进行筛选
tag	archive	这是标签页。与分类页相似，可是会根据标签进行筛选

tag.ejs和'category.ejs'的回退页是archive.ejs。我认为这三个页面并没有太大区别，咱们仅仅是在使用archive.ejs的回退页而已。好处就是代码量减小、提升代码可复用性和可维护性。

不过为了区分这三个页面，咱们仍是给归档页加上标题吧：

// layout/archive.ejs

<%
    var title = '';
    if (page.category) title = page.category;
    if (page.tag) title = page.tag;
    if (page.archive){
        if (page.year) title = page.year + (page.month ? '/' + page.month : '');
        else title = "Archives";
    }
%>
<% if(title) { %>
   <h2 class="blog-archive-title"><%- title %></h2>
<% } %>
<% page.posts.each(function(item){ %>
<%- partial('_partial/article-archive', {item: item}) %>
<% }); %>
<%- partial('_partial/pagination') %>

如今咱们有了一个漂亮的标题用以描述了归档页的类型。
这是对应的CSS样式：

// source/css/blog.css
.blog-archive-title {
    margin-bottom: 50px;
}

本教程的第二篇文章很是简单，你只须要清楚第一篇文章中说起的概念便可。我强烈推荐你根据本身的口味尝试修改主题。

在第三篇文章中，咱们将添加评论部分、统计部分、装饰部件并作一些改进。期待与你再次相见！