jas0nhuang

製作 Hexo主題 - 小小 (二) 加入常駐元素

常駐元素(我也不清楚是不是真的有人這麼說)就是在網站裡每一個頁面都會出現的部分，像是head、header、footer……等等。

其中最重要的就是不會直接顯示在網頁上的 head標籤，舉個例子：上一篇完成基本架構之後，有實驗精神的人可能就會寫一篇中文的文章測試一下，文章寫好、存檔，很興奮的 hexo s想看看結果，網頁都是亂碼！為什麼？就是因為沒有在 head裡設定字元編碼。

head模版

建立 ./_partial/head.ejs模版，提供網頁裡重要的背景資料(metadata)，檔案內容：

<head>
    <title> JAS0N HUANG</title> 

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <%- css(`css/style.css`) %>
</head>

header模版

完成網頁 head模版，接著建立 ./_partial/header.ejs，在 header裡放入網頁標題(title)以及選單(menu)，檔案內容如下：

<div class="blog_header">
    <a href="/">
        <h1 class="blog_title"><%= config.title %></h1>
    </a>
    
    <div class="container">
        <nav class="blog_nav">
            <% for (var i in theme.menu){ %>
                <a clas="menu_item" href="<%- url_for(theme.menu[i]) %>">
                    <%= i %>
                </a>
            <% } %>
        </nav>
    </div>
</div>

header.ejs檔案裡調用的 theme.menu可以在主題根目錄裡的 _config.yml跟據用戶需求設定，在 _config.yml裡頭加入下列選單：

menu:
  文章: /archives
  標籤: /tags
  關於: /about

目前只有文章連結有作用，另外兩個都會顯示找不到頁面，雖然我們也沒有建立 archives頁面，但是因為 Hexo找不到 archives頁面的話會自動取得備用頁面 index，所以點入文章頁面其實就等於回首頁。

對我個人來說不那麼重要的部分，大都用於作者署名、版權宣告、聯絡資訊……等訊息，還是建立一個 ./_partial/footer.ejs聊表心意吧，純html奉上：

修改主要 layout檔案

head、 header、 footer模版都完成了，還要在 layout.ejs檔案裡加入 partial()函數分別載入這三個區塊，修改後文件會長這樣：

<html>
  <%- partial('_partial/head') %>
  <body>
    <div class="container">
        <%- partial('_partial/header') %>
    </div>
    <%- body %>
    <%- partial('_partial/footer') %>
  </body>
</html>

急性子的人大概又想 hexo s看看網站是圓是扁，首頁中文顯示沒問題了，點點看頁面裡的連結，沒有反應!命令列居然還報錯，一大堆紅字

Unhandled rejection TypeError......
Cannot read property 'each' of undefined......

發生什麼事了?丟股溝裡撈一撈，原來是還沒建立 post.ejs模版文件，所以 hexo找不到文章的顯示模版，也就沒辦法顯示頁面了。

建立 post相關模版

先弄一個 post頁面的模版框框 post.ejs，並且在裡面調用文章模版 _partial/post_full.ejs

<%- partial(`_partial/post_full`, {item: page}) %>

建立 _partial/post_full.ejs

<div class="full">
    <h1><%= page.title %></h1>
    <%- item.content %>
    <%- list_tags(page.tags,{show_count: false}) %>
</div>