Astro 路由從零開始

Astro 的路由規則不複雜，檔案放哪裡，網址就長成什麼樣。

靜態路由

在 src/pages 下建立檔案，就是最直接的頁面。

src/pages/index.astro
src/pages/blog.astro
src/pages/about.astro

對應的網址分別是 /、/blog/、/about/。

動態路由

如果每篇文章都要一個獨立頁面，不需要手動建立一堆檔案。

使用 [slug].astro：

---
export async function getStaticPaths() {
  const posts = await getCollection("blog");

  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
---

<article>{post.data.title}</article>

發布前再確認

本機開發時會靠 Astro 自動重新整理，但上線前要額外看一次終端站。避免 dev 與正式環境的搜尋、路徑或資源載入方式不完全一致。