Hugo 架站教學

[Hugo自架站-3]用 Markdown 撰寫文章，掌握分類、標籤文章的技巧

Image

林鼎淵

2025-01-18

img

完成 Hugo 外觀的基礎建設後，接下來就可以開始撰寫部落格文章了。

這篇文章會先簡述常見的 Markdown 語法，讓大家了解如何在文章設定大標題、小標題、引述、圖片…等資訊。

然後示範為文章加上「分類（category）、標籤（tag）」，讓我們能輕鬆管理自己部落格的文章。

最後分享筆者推薦的檔案命名規則，以及文章資料夾結構。

▋使用 Markdown 語法來撰寫文章

過去我們使用 Word，會需要使用上面的工具列來設定文章的標題、列表、粗體、斜體。

img

而 Markdown 則是用「符號」來設定，範例如下：

「#」開頭的就是標題，數量越少，字體越大，層級越高

# 大標題 h1

#### ▋小標題 h4

這邊就是描述的內容，你可以使用「-」的符號層級:

- 文字的格式
  - 要增加子階層，多兩個空格就可以
  - **粗體**
  - *斜體*
  - ~刪節線~

> 引用的寫法

假使想顯示單行程式，可以用 1 個反引號「`」包起來。

console.log('單行程式');

如果想在某個區塊展示程式或是文字，可以將他們用 3 個連續的反引號包起來「```」

// 可以放程式語言、文字
console.log('程式碼區塊');

用 [超連結](網址) 的結構，就能在文字插入超連結，比如放上筆者的 Facebook 連結。

用 ![img](/images/path) 的結構，則可插入圖片。

讀者可以到「content/blog」底下新增一個「test.md」的文章，測試不同符號對排版的影響。

▋掌握分類、標籤文章的技巧

從「content/blog」底下隨便點開一篇文章，你會發現最上方有些參數可以設定，下面向大家解釋每個參數代表的意義。

---
title: "文章標題"

# 文章撰寫的時間（新的文章會優先顯示）
date: 2025-01-16T22:07:47+08:00

# 文章是否為草稿，若設定為 true 就不會顯示在頁面上
draft: false 

# 部落格文章封面縮圖
image: "images/post/post-3.jpg"

# 文章的簡短介紹
description: "這是分享文章連結時，會顯示的簡短描述"

# 文章的分類
categories: 
  - "Hugo 架站教學" # 方便使用者在右側篩選（若是新增的分類，就會需要重啟 Hugo 才會生效）
tags:
  - "Hugo" # 這裡的標籤，會在首頁呈現（若是新增的標籤，就會需要重啟 Hugo 才會生效）
  - "Web"
  - "自架站"
  - "教學"

# post type
type: "post" # 原則上維持不變，因為目前都是要貼部落格文章
---

▋設定 shortscodes 插入 Youtube 影片、IG 貼文

如果想在自己的部落格插入其他社群媒體的元素，可以使用 shortscodes 的方案。

下面是插入 Youtube 影片，以及插入 IG 貼文的範例。

  • Youtube 原始 URL: https://www.youtube.com/watch?v=yVfafM70bzY
  • IG 原始 URL: https://www.instagram.com/p/Cu9zfv0vMoR/

▋用 ChatGPT 生成建議的英文檔名，使用「年月」作為資料夾結構

Hugo 會使用 Markdown 文件的檔名作為網址，如果使用中文命名，那網址就會變得很長。

比如複製這段網址:「http://localhost:1313/blog/中文的網址」，貼上時就會因為編碼變成一長串無法辨識的字「http://localhost:1313/blog/%E4%B8%AD%E6%96%87%E7%9A%84%E7%B6%B2%E5%9D%80/」

如果不知道這篇文章的英文檔名如何取，可以用下面的 Prompt，請 ChatGPT 幫你一把。

幫我將下面的文章標題轉為簡短易懂的英文檔名，單字間使用「-」作為區隔:
1. 挑選合適的主題，在本地安裝並啟動 Hugo
2. 設定 Hugo 部落格網站的基礎參數（自我介紹、圖片、網站 Logo、Email、社群媒體...）
3. 在 Hugo 用 Markdown 撰寫第一篇文章，掌握分類、標籤文章的技巧

img

另外 content 底下的文章，我建議使用「年月」的方式作為資料夾，比如「202501」。因為文章分類的部分，在「categories、tags」已經有設計了，用年月的結構，反而更容易檢視自己發文的頻率。

另外放置部落格圖片的 assets/images 也是一樣的道理，建議使用「年月/文章檔名」的結構來做存放，這樣更方便管理。

重點：網址的結構在一開始就要決定好，因為網址就像是身分證；一但調整，過去累積的 SEO 就會歸零。

▋結語

這邊先恭喜大家完成部落格網站的雛形，下一篇文章會帶大家將網站部署到 GitHub Pages，完成這個步驟後，就可以把漂亮的網站分享給朋友了！

我是林鼎淵，如果覺得這邊文章對你有幫助，歡迎追蹤筆者的 Facebook，我會持續分享實用的新知識 💡

comments powered by Disqus