Astro 標頭詳細說明

Astro 是一個現代化的靜態網站生成器，支援多種前端框架與語言。本文將深入介紹 Astro 標頭（Frontmatter）的用途、語法、常見屬性及其在內容管理中的重要性。

什麼是 Astro 標頭？

Astro 標頭（Frontmatter）是一段位於 Markdown 或 Astro 檔案最上方的 YAML 格式區塊，用於定義該頁面的元資料（metadata）。這些資料可用於 SEO、內容分類、顯示日期、作者等。

範例：

---
title: "Astro 標頭教學"
description: "深入解析 Astro Frontmatter 的用法"
pubDate: "2024-06-01"
author: "GitHub Copilot"
tags: ["Astro", "Markdown", "教學"]
image: "/assets/astro-header.png"
draft: false
---

標頭語法解析

Astro 標頭以三個連字號 --- 開始與結束，中間為 YAML 格式。每個屬性都以 key: value 形式呈現。

常見屬性

title：文章標題，通常用於頁面 <title> 標籤。
description：文章描述，有助於 SEO。
pubDate：發佈日期，格式通常為 ISO 8601。
author：作者名稱。
tags：標籤陣列，便於分類與搜尋。
image：封面圖片路徑。
draft：布林值，標示文章是否為草稿。

自訂屬性

你可以根據需求新增自訂屬性，例如：

readingTime: 5
category: "技術"

Astro 標頭的用途

內容管理
透過標頭，Astro 能自動生成文章列表、分類、標籤頁面等。
SEO 優化
title、description、image 等屬性有助於搜尋引擎收錄。
動態渲染
標頭資料可在 Astro 組件中動態取得，實現個性化內容呈現。
草稿管理
利用 draft: true 屬性，避免未完成文章被公開。

在 Astro 專案中的應用

Astro 會自動解析 /src/content/blog/*.md 內的標頭資料，並可透過 API 取得所有文章的 metadata。例如：

import { getCollection } from 'astro:content';
const posts = await getCollection('blog');

取得的 posts 物件會包含標頭所有屬性，便於在頁面中使用。

標頭與 Markdown 內容的關係

標頭僅用於定義元資料，不會直接顯示在頁面內容中。Markdown 內容則在標頭之後撰寫。

---
title: "Astro 標頭教學"
---
# 文章內容
這是正文部分。

進階用法

多語系支援

可在標頭中加入語言屬性：

lang: "zh-TW"

文章排序

利用 pubDate 或自訂 order 屬性，實現文章排序。

內容過濾

根據 tags、category 等屬性，過濾並顯示特定類型文章。

標頭最佳實踐

保持屬性一致性，便於後續維護。
適當使用陣列與物件，提升資料結構彈性。
避免冗餘或未使用的屬性。

常見問題

標頭格式錯誤
確保 YAML 格式正確，冒號後需有空格，陣列用中括號或多行。
屬性未被解析
檢查 Astro 內容集合設定，確保有正確讀取標頭。
草稿文章被公開
在列表渲染時過濾 draft: true 的文章。

結論

Astro 標頭是內容管理的核心，正確使用能提升網站 SEO、內容組織與維護效率。建議在每篇 Markdown 檔案中都加入標頭，並根據專案需求擴充屬性。

# Astro 標頭教學