實作 Astro 組件：麵包屑 (Bread Crumbs)

今天，我們將實作如何使用 Astro 創建一個導覽麵包屑（Breadcrumbs）組件，以增加網站的導航和用戶體驗。導航面包屑通常用於指示用戶的當前位置，並使他們能夠輕鬆返回上一層或之前的頁面。

以下是完成後的畫面

程式碼

首先，讓我們看一下創建面包屑導航所需的程式碼：

sec/components/Breadcrumbs.astro

---
const list = Astro.url.pathname.replace(/\/+$/, "").split("/").slice(1);
---

<nav>
  <ul class="flex items-center gap-1">
    <li class="after:content-['/'] after:mx-1">home</li>
    {
      list.map((breadcrumb, index) =>
        index + 1 === list.length ? (
          <li>
            <span class="line-clamp-1" aria-current="page">
              {breadcrumb}
            </span>
          </li>
        ) : (
        <li class="after:content-['/'] after:mx-1">
          <a href={`/${breadcrumb}/page/1/`}>
            {breadcrumb}
          </a>
        </li>
        )
      )
     }
  </ul>
</nav>

引用 BreadCrumbs 元件到 src/layouts/BlogPost.astro 頁面

---
import Breadcrumbs from '../components/Breadcrumbs.astro';
---

<MainLayout>
  <section>
    <!-- 其他頁面內容 -->
  </section>

  <Breadcrumbs />
</MainLayout>

---

程式碼詳解

• 我們首先從 Astro.url.pathname 中獲取當前 URL 的路徑。
• 使用正則表達式 replace 方法，我們去除了 URL 最後的斜線並將路徑分割為一個字串陣列。
• 建立了一個