<譯>建立一個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;
}

本教程的第二篇文章很是簡單，你只須要清楚第一篇文章中說起的概念便可。我強烈推薦你根據本身的口味嘗試修改主題。

在第三篇文章中，咱們將添加評論部分、統計部分、裝飾部件並作一些改進。期待與你再次相見！