「譯」創建一個Hexo主題-Part2:其他頁面

  • 2019 年 11 月 7 日
  • 筆記

在這個系列教程中，你將學習怎麼從零開始製作一個 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;  }

本教程的第二篇文章非常簡單，你只需要清楚第一篇文章中提及的概念即可。我強烈推薦你根據自己的口味嘗試修改主題。

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

目前可以找到的比較完備的 Hexo 主題製作教程，我自己從中受益良多。有打算自己擼一個主題的都可以參考下，真的寫得很不錯。如果發現譯文存在錯誤或其他需要改進的地方，歡迎在下面評論指出。

Tags:

VirMach 便宜 VPS