(10) 試著學 Hexo - 新增頁面

發表於 2020-09-23 分類於 Hexo

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

接下來讓我們了解該如何在 Hexo 新增一些頁面。

前言

接下來讓我們了解該如何在 Hexo 新增一些頁面。

新增頁面

首先，先講講為什麼要新增頁面，這時候先讓我們開啟一下前面我們所建立的 Hexo，為了避免讀者 ~~金魚腦~~ 忘記指令，所以我們開啟 Hexo 之後要在終端機輸入以下指令

hexo s

模擬伺服器開啟之後，通常我們一個部落格都會有關於作者的介紹，也就是 about 頁面，因此你會發現頁面上並沒有這個頁面，不論你是透過 http://localhost:4000/about/ 都是相同的狀況。

所以我們先停止模擬伺服器，然後在終端機底下輸入以下指令

1	hexo new page about

這時候 Hexo 就會在 source 底下建立 about/index.md 檔案，這個就是你將來 about 頁面。

about

接下來我們再重新啟動模擬伺服器，這時候你一樣在 Url 處輸入 http://localhost:4000/about/ 就可以看到畫面出現囉~

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 結構最前面增加

1
2
3

---
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 的選項囉。

今天鐵人賽就先到這邊告一個段落啦~