製作 Hexo主題 - 小小 (一) 初始架構

真的很難克服一定要找麻煩的強迫症，還是想試著自已動手作一個小小的 Hexo主題。

作業環境：使用EJS模版引擎，因其主要語法是 JavaScript，並且沒有太大幅度變更HTML基本樣式。 CSS處理使用 Stylus。 EJS、Stylus都是 Hexo內建的模組，不必另外安裝。

資料夾結構

在 theme資料夾裡創建一個主題資料夾，命名為 minimini

mkdir ./themes/minimini
cd ./themes/minimini

在空的 minimini資料夾裡建構必要的文件與資料夾，完成後資料結構會長這樣：

.
|-- _config.yml  # 設定檔
|-- layout       # .ejs模版資料夾
    |-- _partial # 區塊模版資料夾
|-- source       # 資源檔資料夾，如:CSS、Scripts...等檔案
|-- language     # 主題翻譯資料夾

接下來的作業都會在 ./themes/minimini資料夾裡完成。

EJS模版

主要佈局模版 layout

建立 ./layout/layout.ejs佈局模版，所有頁面都會經由這個模版生成，也就是說它制定了網站頁面主要的架構，裡面會包括作者想要在所有頁面都顯示出來的內容(如： head、header、footer……等)，先建立一個最最基本的陽春模版， <%- body %>是 EJS的語法，會導入其它特定頁面模版(如： index.ejs、post.ejs、archive.ejs……等， Hexo的六大主要模版及其備用(fallback)模版請至 Hexo網站查閱)。

<!DOCTYPE html>
<html>
  <body>
    <%- body %>
  </body>
</html>

然後各方神聖寫的教程、 Hexo文件就開始講一堆變數、 JavaScript物件……，看了猴子腦都昏了，所以現在別想這麼多，一塊一塊磚頭搭上去，需要用到的功能再慢慢瞭解就好。

主頁模版 index

有了主要佈局模版還不夠，至少要有一個 index.ejs模版填入 body標籤才能生成最基本的網站。

建立 ./layout/index.ejs檔案，因為想要在首頁裡顯示所有文章列表，所以直接調用 ./layout/_partial/archive.ejs模版，詳細內容如下：

<div class="main">
<h1>文章</h1>
<% page.posts.each(function(item){ %>
    <%- partial(`_partial/archive`,{item: item}) %>
<% }); %>
</div>

本來照著這個教程想要在首頁顯示文章列表及摘要，但是又被谢益辉說服了一次，就只用標題吧!

這個看似簡單的模版裡其實做了不少事：

以 page.posts取得文章列表
使用 .each()指定如何處理每篇文章
建立一個函數並指定變數 item
函數中調用 partial() 輔助函數，白話翻譯：Hexo幫你寫好的小程式，功能是載入其它區塊模版檔
在 partial() 函數裡指定要載入的模版位置，並設定變數為 item

文章列表區塊模版 _PARTIAL/ARCHIVE

既然指定要載入 _partial/archive模版，自然也得建立這個模版檔，在 ./layout/_partial/資料夾裡建立 archive.ejs，檔案裡寫入最基本的文章標題、連結、日期~~、摘要/內容，以及全文連結(好!不放這些東西了)~~：

<div class="archive_title">
    <%= item.date.format(config.date_format) %>
    <a href="<%- config.root %><%- item.path %>">
        <%- item.title %>
    </a>
</div>

測試

三個模版檔案 ./layout.ejs、 ./index.ejs、 ./_partial/archive.ejs所構成的主題初始架構完成了，修改 Hexo專案的 _config.yml檔，將預設主題改為自製主題 theme: minimini，然後運行 hexo s在本地電腦運行 Hexo網站， https://localhost:4000 發現網頁可以顯示了，只有純 HTML的 Hello World(如果您還沒把這篇預設文章刪除的話)，下一篇就會加入其它網頁元素，讓網站稍微成型。