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

前言

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

新增頁面

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

1
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,然後內容全部清空,並輸入以下程式碼

1
2
3
4
5
6
7
8
9
10
11
<!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 等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
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 然後修改成以下即可

1
2
3
4
5
6
# Header
menu:
Home: /
Archives: /archives
About: /about
rss: /atom.xml

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

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

0%