小白也能用hugo架設自己的網站-5 新增你的第一篇文章、文章檔案中的Front Matter，以及MarkDown語法介紹

小白也能用hugo架設自己的網站-5 新增你的第一篇文章、文章檔案中的Front Matter，以及MarkDown語法介紹

這篇要來分享如何新增文章，以及Front Matter還有markdown的相關介紹，
想要在hugo新增任何一篇文章，且能顯示在網頁上，不僅文章要有內容，文章檔案中還需要有Front Matter，
接下來，讓我們一起看看要怎麼操作吧!

啟動虛擬網站server，邊改邊觀察網站的變化

開始新增文章前，我推薦你先啟動虛擬網站server，並打開瀏覽器連到你的網站上，
這樣在後面新增文章，修改設定的時候，你能直觀的從瀏覽器看到網站的變化，
為了降低你回頭看前一篇的負擔，我還是簡單說一下啟動虛擬網站server的步驟好了→

1. 找到專案資料夾
2. 按alt+d跳到網址列，並跳到行首，輸入cmd然後按一下空白鍵，再來按enter
3. 在cmd裡輸入hugo server -D(注意大小寫)，然後按enter
4. 這個cmd的視窗不要關，關了虛擬網站server就關閉了
5. 打開瀏覽器輸入127.0.0.1按enter或輸入cmd視窗裡寫的網址，按enter，你就能看到自己的網站了

新增文章和編輯內容

什麼是Front Matter

當你在cmd視窗裡，使用hugo的指令新增一篇文章檔案時，檔案裡預設就會有一段文字，這段文字稱為Front Matter，
文字內容包括文章的標題、發布的時間、以及是否為草稿狀態，
而這些文字內容，是根據專案資料夾內的預設文章模板所產生的，
每篇文章都必須有Front Matter，並且至少要有文章標題和發佈時間，才能在網站上正常的顯示出來，
Front Matter的內容，如果主題模板有支援，就能被顯示在網頁上。
另外，你新增文章時指定的檔案名稱，會做為文章的標題，
你用指令新增文章的時間，會做為發布日期，
而Front Matter只是一段純粹的文字，所以你之後也可以任意的按照格式修改文章檔案中的Front Matter。
每個hugo的主題模板所支援的Front Matter參數也有所不同
，拿我們現在用的meme主題模板來說，有支援、並且我有在用的參數有作者、分類、標籤，
至於標題和發布日期，這是幾乎所有主題模板都支援的Front Matter參數，你用hugo指令新增的文章檔案，預設也只會有這兩個參數，
在Front Matter的文字之後，你就可以盡情的創作你的文章內容囉

用預設模板新增一篇有基本Front Matter的md檔案

在前面的說明中，我一直提到文章檔案，但其實這種說法並不準確，只是方便你理解而使用的稱呼而已。
而hugo最主要的亮點，就是能用markdown這種語法來撰寫文章，因此新增的檔案就會用md這個格式，
md格式並不是什麼高級的東西，一般的純文字檔，也就是txt檔，你只要把檔名中的txt副檔名刪掉，改為md，那就是md檔案了，
說白了，不管是txt或是md格式，都是用文字編輯器打開來編輯，使用記事本或notepad++或其他文字編輯器都可以進行修改，
只要你用任何方式新增一個.md的檔案，檔案裡有Front Matter，並且放對路徑，那就能被hugo認識，也就能顯示在網站上囉!
OK! 接下來按照下面的步驟，你就能新增一篇具有基本Front Matter的文章了→
p.s NVDA的用戶，別忘了cmd視窗內都用小鍵盤7或9看各種返回的訊息喔!

1. 在檔案總管瀏覽到你的專案資料夾
2. 按alt+d跳到網址列，輸入
   cmd
   然後按空白鍵，之後按enter
3. 輸入下面的指令，來新增一個名為gagaga的md檔案→
   hugo new gagaga.md
   按enter
4. 成功新增的話你會看到類似這樣的訊息→
   Content 專案資料夾的路徑\gagaga.md created
   這樣就成功的以預設模板新增了文章檔案，如果你的檔名有空格，那你需要在新增的指令中用雙引號將檔名包夾，
   雙引號的打法是shift+單引號，單引號在enter的左邊，
   例如，使用下面這樣的指令新增檔名有空格的檔案→
   hugo new "gagaga 001.md"
   一樣要注意有沒有成功的訊息提示
5. 之後你可以在專案資料夾下的
   content
   資料夾內，找到剛剛新增的檔案，用記事本或notepad++或其他文字編輯器打開檔案，
   接下來我來帶你簡單認識一下Front Matter要怎麼修改囉!

修改Front Matter的參數內容，並開始創作文章

1. 打開檔案後，你應該能看到像這樣的內容→

---
title: "Gagaga"
date: 2022-05-07T12:46:32+08:00
draft: true
---

1. 在修改前，先說明幾個修改時需要注意的重點→
   • 所有的Front Matter參數，在第一個參數的前一行跟最後一個參數的後一行，都需要有三個減號包夾，例如上面的例子
   • Front Matter包夾的字元不是只有減號，也有其他的符號，例如加號或其他書寫方式，不過我們還是以減號為主
   • 修改有雙引號包夾的文字時，修改文字就好，不要刪除文字前後的雙引號，以避免錯誤
   • 修改時間時，只要修改數字，其他字元和符號維持原樣，以避免錯誤
   • meme主題模板支援的Front Matter所有參數，可以查看meme主題模板的說明檔案，或meme的github網頁
2. OK! 回到檔案上→
   • title:
     這個就是標題，修改後面雙引號包夾的文字就能改變標題
   • date:
     這個就是時間，修改數字即可，不要動其他字元或符號
   • draft:
     這個是草稿的開關，預設是true，也就是打開的狀態，要取消草稿狀態就改為false
3. 另外還有我會用到的三個Front Matter參數，你可以看狀況加到自己的文章Front Matter內→
   • author:
     這個是作者，建議作者名也可以用雙引號包夾
   • categories:
     這個是類別，可以用這個參數將有相同categories的文章串成系列文章，可以有多個類別，但我一篇文章通常只會有一個類別，
     在文章中使用categories參數後，文章就會顯示在網站中的(分類)選單頁面中，
     每一個categories，都會在網站中的(分類)頁面中用一條連結呈現，
     點開連結後，就能看到具有相同categories的文章列表
   • tags:
     這個是類別，可以用這個參數將有相同tags的文章串到一起，可以有多個標籤，
     在文章中使用tags參數後，文章就會顯示在網站中的(標籤)選單頁面中，
     每一個tags，都會在網站中的(標籤)頁面中用一條連結呈現
     點開連結後，就能看到具有相同tags的文章列表
4. 無論categories或tags，要有多個參數的話，只要用括號包夾雙引號，每一對雙引號用英文逗號隔開即可，
   例如像這樣→
   categories: ("電腦教學", "軟體使用")
   tags: ("電腦", "軟體", "無障礙")
5. 確定Front Matter沒問題之後，就能開始創作文章了，
   你只要在Front Matter結尾的三個減號之後，再開新的一行，就可以開始輸入文章內容，開心的創作了
6. 最後，如果想修改預設生成的Front Matter內容，可以透過修改預設文章模板達到目標，修改方法會在稍後再來介紹

用MarkDown語法寫文章

想必正在看這篇文章的你，一定都有瀏覽過網頁，不然你也看不到這篇文章了，
而網頁中存在著許多不同的元素，例如標題、清單、連結、表格等等，
markdown，就是為了讓我們能用最簡單的方法，以簡單的幾個符號、數字來產生這些網頁元素的一種語法，
關於markdown語法的使用，你可以看NVDA台灣提供的說明文章→
點我看markdown說明
我最常用到的語法只有四種→標題、連結、清單和分隔線，
要特別注意的是，markdown在不同的網站、軟體中，語法會稍有不同，但我用到的這四種是所有markdown中，用法幾乎都一樣的，
如果你是大陸用戶，打不開上面介紹markdown用法的網頁，你也可以到瀏覽器搜尋markdown的用法，也能找到許多語法使用教學喔!
當然，markdown這種語法的目的只是為了排版文章，讓文章更好閱讀，
你的文章也可以完全不用markdown語法，但可能很難閱讀就是了。

新增和自訂文章模板

覺得預設的文章模板太簡單，每次都要把草稿改成false很麻煩嗎? 那根我一起來修改文章預設模板吧!

1. 在檔案總管找到你的專案資料夾
2. 找到這個資料夾並按enter
   archetypes
3. 找到這個檔案並用記事本或notepad++打開
   default.md
4. 你會看到像這樣的內容→

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

1. 讓我們把作者名加到模板中，並把草稿改成預設關閉，看起來會像這樣→

---
title: "{{ replace .Name "-" " " | title }}"
author: "你的作者名"
date: {{ .Date }}
draft: false
---

1. 之後按ctrl+s，關閉檔案就完成修改了
2. 剛剛修改的是預設模板，你還能新增其他的模板，
   例如，我想製作一個izotope的文章模板，
   每一次新增文章的時候，hugo都能自動將文章放到專案資料夾中content目錄下的izotope資料夾內，
   並且文章檔案的Front Matter都能有我設定好的分類和標籤，
   你可以跟我一起做看看
3. 找到剛剛的
   default.md
   按ctrl+c，然後再按ctrl+v，你會得到一個複製出來的檔案
4. 找到
   default - 複製.md
   按f2重新命名，將其改為
   izotope.md
5. 用記事本或notepad++打開izotope.md，
   並將內容修改成這樣→

---
title: "{{ replace .Name "-" " " | title }}"
author: "你的作者名"
categories: ["聲音處理的萬用工具izotope rx9"]
tags: ["軟體使用", "其他音頻軟體"]
date: {{ .Date }}
draft: false
---

1. 按ctrl+s儲存，然後關閉視窗
2. 回到專案資料夾的目錄，也就是你可以看到config.toml的目錄
3. 按照前面新增文章的步驟打開cmd視窗，然後輸入下面的指令→
   hugo new /izotope/gagaga.md
   按下enter，沒報錯的話，你能在content中看到izotope資料夾，
   打開izotope資料夾，你會看到gagaga.md檔案，用記事本或notepad++打開檔案，
   之後，你會看到檔案的Front Matter中，標題已經幫你以檔名填入了，並且有你在模板設定好的分類和標籤，
4. 如果你的檔名有空格，一樣要使用雙引號包夾，指令會像這樣→
   hugo new "/izotope/gagaga 001.md"
5. ok! 你可以回到第八個步驟往後操作，新增更多屬於你自訂的文章模板

作弊一下，來個新增文章的cmd吧!

相信應該很多人會抗拒每次新增文章都要打一大串的指令，因此，我製作了一個cmd執行檔案，讓你以後只要打數字就能新增文章，
但我不知道你的模板叫什麼名字，所以使用前，你需要自己修改一下這個cmd檔案，
步驟很簡單，一起來看看吧!

1. 下載這個cmd檔案→
   點我下載文章製作.cmd
2. 找到下載回來的檔案，將檔案複製到你的專案資料夾中
3. 接下來在專案資料夾中的
   文章製作.cmd
   按快顯鍵，往下找編輯，按enter
4. 這個cmd檔我做了6個選項，每一個選項都有一個預設的名字，
   從(第一個系列)到(第六個系列)，
   你只需要用文字編輯器裡的取代功能，就能將指令對應到你的文章模板
5. 假設你已經有一個名為
   izotope
   的文章模板，此時，在文字編輯器裡按
   ctrl+h
   1.按一下tab再按shift+tab，你會看到
   尋找目標(N):編輯區Alt+n空行
   在這裡輸入
   第一個系列
6. 再tab一次，你會看到
   取代為(P):編輯區Alt+p空行
   在這裡輸入izotope
7. 最後按
   alt+a
   這樣就會把檔案中所有的第一個系列取代為izotope了，
   以此類推，把izotope換成你自己設定好的文章模板檔案名稱，替換掉本來的第一個系列，就完成了第一個選項的修改，
   其他的第二到第六個系列也是同樣的修改方式，總共你可以設定六個模板，
   修改好記得ctrl+s儲存
8. 之後，在這個檔案上直接按enter
   文章製作.cmd
   就會打開一個視窗，用7、9你會看到有六個選項，
   輸入數字按enter，就會讓你輸入新文章的檔案名稱，
   這裡的名稱你不需要用雙引號包夾，你也不需要打副檔名.md，你只要輸入想要的檔案名稱即可，之後按enter，
   成功新增文章後，一樣可以看到提示訊息，
   接著隨便按一個鍵，就能回到選單了，
   利用這種方法，你可以快速的新增文章，
   以後要新增文章，只要打開這個cmd，輸入數字按enter，就能按照你設定的模板新增文章檔案到指定的資料夾中，超級方便的對吧!