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

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

文章瀏覽次數 34

小羔羊

小羔羊圖像(預設)

2022-05-07 16:06:51

From:114.34.171.78

小白也能用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
    ---
  2. 在修改前,先說明幾個修改時需要注意的重點→
    • 所有的Front Matter參數,在第一個參數的前一行跟最後一個參數的後一行,都需要有三個減號包夾,例如上面的例子
    • Front Matter包夾的字元不是只有減號,也有其他的符號,例如加號或其他書寫方式,不過我們還是以減號為主
    • 修改有雙引號包夾的文字時,修改文字就好,不要刪除文字前後的雙引號,以避免錯誤
    • 修改時間時,只要修改數字,其他字元和符號維持原樣,以避免錯誤
    • meme主題模板支援的Front Matter所有參數,可以查看meme主題模板的說明檔案,或meme的github網頁
  3. OK! 回到檔案上→
    • title:
      這個就是標題,修改後面雙引號包夾的文字就能改變標題
    • date:
      這個就是時間,修改數字即可,不要動其他字元或符號
    • draft:
      這個是草稿的開關,預設是true,也就是打開的狀態,要取消草稿狀態就改為false
  4. 另外還有我會用到的三個Front Matter參數,你可以看狀況加到自己的文章Front Matter內→
    • author:
      這個是作者,建議作者名也可以用雙引號包夾
    • categories:
      這個是類別,可以用這個參數將有相同categories的文章串成系列文章,可以有多個類別,但我一篇文章通常只會有一個類別,
      在文章中使用categories參數後,文章就會顯示在網站中的(分類)選單頁面中,
      每一個categories,都會在網站中的(分類)頁面中用一條連結呈現,
      點開連結後,就能看到具有相同categories的文章列表
    • tags:
      這個是類別,可以用這個參數將有相同tags的文章串到一起,可以有多個標籤,
      在文章中使用tags參數後,文章就會顯示在網站中的(標籤)選單頁面中,
      每一個tags,都會在網站中的(標籤)頁面中用一條連結呈現
      點開連結後,就能看到具有相同tags的文章列表
  5. 無論categories或tags,要有多個參數的話,只要用括號包夾雙引號,每一對雙引號用英文逗號隔開即可,
    例如像這樣→
    categories: ("電腦教學", "軟體使用")
    tags: ("電腦", "軟體", "無障礙")
  6. 確定Front Matter沒問題之後,就能開始創作文章了,
    你只要在Front Matter結尾的三個減號之後,再開新的一行,就可以開始輸入文章內容,開心的創作了
  7. 最後,如果想修改預設生成的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
    ---
  5. 讓我們把作者名加到模板中,並把草稿改成預設關閉,看起來會像這樣→
    ---
    title: "{{ replace .Name "-" " " | title }}"
    author: "你的作者名"
    date: {{ .Date }}
    draft: false
    ---
  6. 之後按ctrl+s,關閉檔案就完成修改了
  7. 剛剛修改的是預設模板,你還能新增其他的模板,
    例如,我想製作一個izotope的文章模板,
    每一次新增文章的時候,hugo都能自動將文章放到專案資料夾中content目錄下的izotope資料夾內,
    並且文章檔案的Front Matter都能有我設定好的分類和標籤,
    你可以跟我一起做看看
  8. 找到剛剛的
    default.md
    按ctrl+c,然後再按ctrl+v,你會得到一個複製出來的檔案
  9. 找到
    default - 複製.md
    按f2重新命名,將其改為
    izotope.md
  10. 用記事本或notepad++打開izotope.md,
    並將內容修改成這樣→
    ---
    title: "{{ replace .Name "-" " " | title }}"
    author: "你的作者名"
    categories: ["聲音處理的萬用工具izotope rx9"]
    tags: ["軟體使用", "其他音頻軟體"]
    date: {{ .Date }}
    draft: false
    ---
  11. 按ctrl+s儲存,然後關閉視窗
  12. 回到專案資料夾的目錄,也就是你可以看到config.toml的目錄
  13. 按照前面新增文章的步驟打開cmd視窗,然後輸入下面的指令→
    hugo new /izotope/gagaga.md
    按下enter,沒報錯的話,你能在content中看到izotope資料夾,
    打開izotope資料夾,你會看到gagaga.md檔案,用記事本或notepad++打開檔案,
    之後,你會看到檔案的Front Matter中,標題已經幫你以檔名填入了,並且有你在模板設定好的分類和標籤,
  14. 如果你的檔名有空格,一樣要使用雙引號包夾,指令會像這樣→
    hugo new "/izotope/gagaga 001.md"
  15. 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,就能按照你設定的模板新增文章檔案到指定的資料夾中,超級方便的對吧!

最後更新:2022-05-11 18:18:34

From: 114.34.171.78

By: 小羔羊