共计 3837 个字符，预计需要花费 10 分钟才能阅读完成。
前言：本系列文章翻译自 @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;
}
本教程的第二篇文章非常简单，你只需要清楚第一篇文章中提及的概念即可。我强烈推荐你根据自己的口味尝试修改主题。
在第三篇文章中，我们将添加评论部分、统计部分、装饰部件并做一些改进。期待与你再次相见！
