導覽選單

選單允許編輯者在不變更網站範本的情況下管理有序連結。選單有一個穩定的名稱，如 primary 或 footer，每個翻譯選單有一組個別的項目。

建立選單

在 EmDash 管理面板的 Menus 中建立和排列選單。

在每個語言中使用相同的選單名稱。在多語言網站上，開啟選單並使用其 Translations 面板建立和編輯其他語言版本。EmDash 保持相同內容或分類術語的翻譯相互連接，因此 getMenu() 可以使用請求語言的標籤和 slug。

選單連結如何解析

內容和分類選單項目儲存的是參照而非完成的 URL。當範本呼叫 getMenu() 時，EmDash 使用目前集合和語言資料解析該參照。

每個傳回的項目還包含其標籤、選用目標、title 屬性、CSS 類別和巢狀的 children。下面的算繪範例直接使用這些值。

算繪選單

在伺服器算繪的 Astro 元件中呼叫 getMenu()。當名稱不存在時傳回 null。

以下佈局算繪一個主選單和一級巢狀項目：

---
import { getMenu } from "emdash";
import { getRelativeLocaleUrl } from "astro:i18n";

const locale = Astro.currentLocale;
const menu = await getMenu("primary", { locale });

function menuHref(url: string) {
  return locale && url.startsWith("/")
    ? getRelativeLocaleUrl(locale, url)
    : url;
}
---

{menu && menu.items.length > 0 && (
  <nav aria-label="主導覽">
    <ul>
      {menu.items.map((item) => {
        const href = menuHref(item.url);

        return (
          <li class:list={item.cssClasses}>
            <a
              href={href}
              target={item.target}
              rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
              title={item.titleAttr}
              aria-current={Astro.url.pathname === href ? "page" : undefined}
            >
              {item.label}
            </a>

            {item.children.length > 0 && (
              <ul>
                {item.children.map((child) => {
                  const childHref = menuHref(child.url);

                  return (
                    <li class:list={child.cssClasses}>
                      <a
                        href={childHref}
                        target={child.target}
                        rel={child.target === "_blank" ? "noopener noreferrer" : undefined}
                        title={child.titleAttr}
                        aria-current={Astro.url.pathname === childHref ? "page" : undefined}
                      >
                        {child.label}
                      </a>
                    </li>
                  );
                })}
              </ul>
            )}
          </li>
        );
      })}
    </ul>
  </nav>
)}

getMenu() 首先選擇明確的 locale，然後是目前請求語言，最後是設定的預設語言。如果該語言中缺少選單或參照的條目，查詢將遵循設定的後備鏈。

選單項目 URL 包含集合 URL 模式或分類路徑，但不包含 Astro 的語言前綴。menuHref() 輔助函式將該前綴新增到根相對連結，並保持外部連結不變。

此範例算繪一級子項，涵蓋典型的下拉選單。如果編輯者可以建立更深層的導覽，請將項目標記移到一個遞迴元件中，該元件使用相同規則算繪每個項目的 children。

在小工具區域中使用選單

選單小工具將現有選單放置在小工具區域內。小工具讀取目前請求語言的選單。當網站需要自訂巢狀標記或明確語言 URL 處理時，使用上面的直接算繪模式。

直接查詢選單資料

當範本需要可用的選單定義而不是一個選單的項目時，使用 getMenus()。執行階段 API 參考記錄了查詢簽章和傳回值。

對於程式化選單變更，使用 Bearer 權杖進行驗證，並在每個狀態變更請求中新增 X-EmDash-Request: 1。請參閱選單端點了解請求主體和回應。

請參閱國際化了解語言路由和後備設定。