iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
Modern Web

試著學 Hexo系列 第 10

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

前言

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

新增頁面

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

hexo s

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

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

hexo new page about

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

https://ithelp.ithome.com.tw/upload/images/20200923/20119486IfhvlNWBnN.png

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

https://ithelp.ithome.com.tw/upload/images/20200923/20119486ubLGdfbB70.png

那畫面上會空白是正常的,因為你並沒有輸入相關的文字進去到 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>

這時候如果你開啟模擬伺服器,相信你會發現頁面好像沒有什麼變化,因為你畫面還是會吃到主題的樣式

https://ithelp.ithome.com.tw/upload/images/20200923/20119486nqmQsQZKUi.png

這時候你只需要在 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>

接下來畫面就會如實呈現

https://ithelp.ithome.com.tw/upload/images/20200923/20119486wXWJuBZsQ6.png

透過這種方式,你就可以客製化自己一些頁面囉。

最後我再補充一個小東西,前面我們已經客製化新增一個頁面,但在首頁上沒有辦法快速連進去,只需要開啟目前主題底下的 _config.yml 並找到 menu 然後修改成以下即可

# Header
menu:
  Home: /
  Archives: /archives
  About: /about
rss: /atom.xml

這樣畫面就可以看到 about 的選項囉。

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


上一篇
(9) 試著學 Hexo - 圖片空間的挑選
下一篇
(11) 試著學 Hexo - 部署你的第一個部落格
系列文
試著學 Hexo33

尚未有邦友留言

立即登入留言