# Day 10：為你的 Hexo 增加頁面：標籤、分類與自訂頁面

###### tags: `IT鐵人賽`

昨天介紹新增文章，今天要來介紹新增頁面。這兩者有什麼差別呢？一般來說如果是跟網站有關的資訊、或是一些關於你的介紹，這種比較不適合發在一般文章的，就很適合建立一個頁面，並以 Next 佈景主題為例，設定能透過主選單連到頁面。

> ## 如何建立自訂頁面？

建立頁面的指令格式如下：

hexo new page "頁面名稱（網址用）"


以上圖範例為例，我建立了一個 about 頁面，打算利用這個頁面介紹我自己與這個網站，大家也可以依照使用情境建立頁面。

> ## 存放位置與頁面資訊

有別於文章與草稿有各自不同的目錄存放，**頁面檔案是獨立存放於一個目錄中的**，像是我剛剛建立了 about 頁面，頁面存放位置於 ./source/about 內，而檔案名稱為 `index.md`。

因此如果你要將草稿建立成頁面，假設你的頁面叫做「message」，就要在 source 目錄內建立一個名為 message 的目錄，將草稿檔案移進去目錄後，將檔案名稱改為 `index.md` 即可。

### 頁面資訊

頁面預設的資訊僅有 title 以及 date，分別是頁面標題與時間，不過這邊我們可以加一個 `comments`，原因是若之後我們在 Hexo 增加文章留言功能，**預設頁面是可以留言的**，但有時候我們會希望頁面就是專門提供資訊，不開放留言，就可以增加這段語法。

title: about
date: 2021-08-28 18:46:39
comments: false <!-- 設定為 false 表示不開放留言 -->

接下來的內容，就一樣使用 Markdown 隨你打啦～後續一樣透過指令 `hexo g` 建立頁面就能看到成果了。

> ## 建立文章分類與標籤頁

而 Hexo 本身提供一些能夠**連動網站資訊的頁面**，例如**文章分類**與**標籤頁**，建立的方式就跟建立自訂頁面一樣：

# 建立標籤頁
hexo new page tags
# 建立分類頁
hexo new page categories

不過建立之後，我們必須再做一個動作，以標籤為例，我們開啟頁面後，一樣會看到預設的 title 與 date 資訊，**此時如果要連接 Hexo 資訊，就要加上 `type` 資訊**，並設定為 `tags`，範例如下：

title: 標籤
date: 2021-08-28 19:15:03
type: tags <!-- 將頁面類型設定為 tags（標籤） -->
comments: false <!-- 設定頁面不開放留言 -->

於是，就可以在標籤頁看到所有標籤啦！


分類頁也是利用同樣的方式，增加 type 並設定為 `categories` 即可。

> ## 利用主選單連到頁面（以 Next 佈景主題為例）

因為是設定 Next 方面的內容，所以我們要開啟 ./themes/next/_config.yml 檔案並找到以下語法：

menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

我們只要把 `#tags`、`#categories` 解除註解即可，另外 Hexo 很貼心，連同 about 也一起加了 XD 一樣，將 `#about` 那一行解除註解即可。不過如果你的關於頁面不是設定成 about（或許可能是你的英文名字），那就改成你設定的名稱即可。

> ## 後記

如此一來網站基本該有的內容都大致上完成了，雖然後續還有像是留言版的功能，不過這部分就先暫緩，畢竟要先上傳到網路上，才會有人留言嘛！（除非你要自言自語我也是沒意見啦 XD）

因此明天，我們就要將 Hexo 上傳到 Github Pages 上啦，屆時你的部落格就能夠呈現在網路上了。頁面建立好後，就等明天來見證這歷史的一刻吧（？）