從零開始學 Hexo (4) | 新增 Hexo 文章與常用 Markdown 語法

發表於 更新於 分類於

前置說明

自己是習慣使用 VSCode 來編輯程式碼，所以之後的程式碼都會以 VSCode 畫面做示範，如果你也想使用 VSCode ，可以到 VSCode 官網 進行下載安裝，安裝細節大家可以參考 社長(Sajhon)這篇文章

如何建立你的 Hexo 部落格文章

經過前篇介紹執行 hexo server 指令可以開啟 Hexo 伺服器，在本地看到目前部落格的樣子後，你一定迫不及待想要開始寫自己的文章了，接下來就來介紹新增文章的 Hexo 指令吧 ~

先用 VSCode 開啟你的 Hexo 部落格資料夾 ( Hexo 幫你建的那個資料夾) ，以我在前篇的示範為例就是 amy10blog 資料夾

再來在視窗上方檢視旁邊有三個點按下去，選終端機 > 新增終端機，就可以在 VSCode 中開啟終端機了，此時終端機會直接在目前開啟資料夾的路徑上，也就是你的 Hexo 部落格資料夾路徑上

確定終端機在你的 Hexo 部落格資料夾路徑上後，再執行以下指令，你的文章名稱 可以自己取名 (注意：名稱要用單引號 '' 包住)

1
hexo new '你的文章名稱'

下完指令後，在 source 資料夾裡面的 _post 資料夾中，Hexo 會新增一個 .md 檔，以 你的文章名稱 命名，假設文章名稱叫 hexo_learning1 執行結果如下：

hexo new 'hexo_learning1' 執行結果

小補充： VSCode 開啟終端機快捷鍵是 ctrl + shift + 反引號鍵 (就是 tab 上面有小蚯蚓 ~ 的那個鍵)

怎麼用 Markdown 語法撰寫文章？

如果你有仔細研究 Hexo 官網的文件，你應該會發現在文件第一頁，官方就有解釋：

Hexo 是一個快速、簡單且強大的網誌框架。 Hexo 使用 Markdown（或其他標記語言）解析您的文章 ，並在幾秒鐘內，透過漂亮的主題產生靜態檔案。

沒錯，建立完文章後你還需要學習一些 Markdown 語法，才能寫出有不同文字樣式效果的文章，接下來就介紹一些我自己比較常使用的 Markdown 語法給大家參考囉 ~

標題

在文字開頭加上井字號 # ，以下是程式碼示範，標題 1 ~ 6 對應 HTML 的 <h1> ~ <h6> 標籤樣式

1
2
3
4
5
6
# 標題1
## 標題2
### 標題3
#### 標題4
##### 標題5
###### 標題6

示範：

標題1

標題2

標題3

標題4

標題5
標題6

粗體

將文字用 2 個星號 ** 包住，對應 <strong> 標籤樣式

1
我是 **粗體** 文字

示範：
我是 粗體 文字

斜體

將文字用 1 個星號 * 包住，對應 <em> 標籤樣式

1
我是 *斜體* 文字

示範：
我是 斜體 文字

刪除線

將文字用 2 個小蚯蚓 ~~ 包住，對應 <s> 標籤樣式

1
我是 ~~刪除線~~ 嘿嘿

示範：
我是 刪除線 嘿嘿

分隔線

在行與行之間加上 3 個減號 --- 或星號 ***，對應 <hr> 標籤樣式，建議以減號代替米字號，閱讀上較為方便

1
2
3
4
5
6
7
8
9
10
11
我在減號分隔線之上哈哈哈

---

我在減號分隔線之下嗚嗚嗚

我在星號分隔線之上哈哈哈

*** 

我在星號分隔線之下嗚嗚嗚

示範：
我在減號分隔線之上哈哈哈

我在減號分隔線之下嗚嗚嗚

我在星號分隔線之上哈哈哈

我在星號分隔線之下嗚嗚嗚

插入連結

一種由中括號 [] 和小括號 () 組成，中括號內寫入連結文字的內容、小括號內寫入連結網址；另一種是直接用大於小於符號 <> 包住連結網址，兩種方式都對應 <a> 標籤樣式

1
2
[點我前往異空間](https://amy6072698.github.io/amy10blog/123)
<https://www.google.com/>

示範：
點我前往異空間
https://www.google.com/

插入圖片

和連結寫法大致相同，但需要在中括號 [] 前面加入一個驚嘆號 ! ，中括號內寫入圖片說明文字，小括號內寫入圖片連結，對應 <img> 標籤

以下圖片來源

1
![賣萌的貓咪圖](https://images.unsplash.com/photo-1589883661923-6476cb0ae9f2?q=80&w=200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

示範：

賣萌的貓咪圖

清單

清單分為有序清單與無序清單，兩種寫法不同

有序清單 ：寫法是阿拉伯數字加點 . 加空白之後，再接項目文字，對應 <ol> > <li> 標籤樣式

1
2
1. 項目一
2. 項目二

示範：

  1. 項目一
  2. 項目二

無序清單 ：寫法有三種，用星號 * 或加號 + 或減號 - 其中一種符號，加空白之後再接項目文字，對應 <ul> > <li> 標籤樣式，雖然三種符號都可以，但建議同篇文章的無序清單，統一用一種符號撰寫方便閱讀

1
2
3
4
5
6
* 星號項目一
* 星號項目二
+ 加號項目一
+ 加號項目二
- 減號項目一
- 減號項目二

示範：

  • 星號項目一
  • 星號項目二
  • 加號項目一
  • 加號項目二
  • 減號項目一
  • 減號項目二

引用

在引用文字的開頭加上大於符號 > ，就會產生 <blockquote> 標籤的樣式，但不要因為想要這種樣式的文字就貿然使用，因為這個標籤代表引用的意思請謹慎使用

1
> 我是從別處引用的文字，你好呀！

示範：

我是從別處引用的文字，你好呀！

程式碼

要在文章內加入程式碼，有兩種方式一種是程式碼片段、一種是程式碼區塊

程式碼片段 ：將程式碼用 1 個反引號 (跟小蚯蚓 ~ 同一個鍵) 包住

1
程式碼的左邊 `let a = 1;` 程式碼的右邊

示範：
程式碼的左邊 let a = 1; 程式碼的右邊

程式碼區塊 ：在程式碼上一行加上 3 個反引號加程式碼語言縮寫，下一行則只加上 3 個反引號結尾，這樣會在程式碼塊內產生不同程式碼語言的高亮樣式，通常會透過 highlight.js 套件產生高亮樣式

Markdown 寫法：

Markdown 程式碼區塊寫法

以下以 HTML 、 CSS 、 JS 示範：

1
<h2>我是標題</h2>
1
2
3
.box {
  background-color： red;
}
1
let a = 1;

試著做做看

看完以上 Markdown 語法寫法，可以試著在你新增的文章 .md 檔中寫入內容，完成後記得儲存 (這很重要) ，再用 hexo server 開啟 Hexo 伺服器看看你的文章內容是否正確顯示喔 ~

Markdown 語法程式碼

一開始點開連結會在首頁，你剛新增的文章名稱會出現在首頁 Recent Posts 的區塊

Hexo 首頁 Recent Posts 的區塊

點一下你剛剛新增的文章名稱，就會看到你新增的文章內容囉 ~

新增的文章內容

結語

其實文章中介紹的 Markdown 語法並非全部，還有很多細節可以了解，如果想了解更多可以參考 Ray 的 Markdown 基礎與入門教學手冊 ，這篇只有就我自己比較常使用的語法作介紹，希望經過這篇文章大家可以寫出美美的 Hexo 部落格文章，那我們下篇文章見 ~