接下來讓我們了解該如何在 Hexo 新增一些頁面。
首先，先講講為什麼要新增頁面，這時候先讓我們開啟一下前面我們所建立的 Hexo，為了避免讀者 金魚腦 忘記指令，所以我們開啟 Hexo 之後要在終端機輸入以下指令
hexo s
模擬伺服器開啟之後，通常我們一個部落格都會有關於作者的介紹，也就是 about 頁面，因此你會發現頁面上並沒有這個頁面，不論你是透過 http://localhost:4000/about/ 都是相同的狀況。
所以我們先停止模擬伺服器，然後在終端機底下輸入以下指令
hexo new page about
這時候 Hexo 就會在 source 底下建立 about/index.md 檔案，這個就是你將來 about 頁面。
接下來我們再重新啟動模擬伺服器，這時候你一樣在 Url 處輸入 http://localhost:4000/about/ 就可以看到畫面出現囉~
那畫面上會空白是正常的，因為你並沒有輸入相關的文字進去到 about/index.md，這邊內容就留給你自由發揮。
接下來可能會有人希望自己新增的頁面是採用自己寫的 HTML 切版切出來，這一點 Hexo 也做得到，這邊將會舉例剛剛新增的 about 頁面。
首先先將 about/index.md 改成 index.html，然後內容全部清空，並輸入以下程式碼
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>關於我</title>
</head>
<body>
<h1>這是標題</h1>
</body>
</html>
這時候如果你開啟模擬伺服器，相信你會發現頁面好像沒有什麼變化，因為你畫面還是會吃到主題的樣式
這時候你只需要在 HTML 結構最前面增加
---
layout: false
---
然後這時候你在重新整理畫面，就可以看到主題不會被套用，這個頁面你就可以高度客製化，例如載入 Bootstrap CDN 等
---
layout: false
---
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>關於我</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'/>
</head>
<body>
<div class="container">
<h1>這是標題</h1>
<button class="btn btn-outline-primary" type="button">這是一段話</button>
</div>
</body>
</html>
接下來畫面就會如實呈現
透過這種方式，你就可以客製化自己一些頁面囉。
最後我再補充一個小東西，前面我們已經客製化新增一個頁面，但在首頁上沒有辦法快速連進去，只需要開啟目前主題底下的 _config.yml 並找到 menu 然後修改成以下即可
# Header
menu:
Home: /
Archives: /archives
About: /about
rss: /atom.xml
這樣畫面就可以看到 about 的選項囉。
今天鐵人賽就先到這邊告一個段落啦~
iThome鐵人賽
看影片追技術