Chuyển đến nội dung chính

Giới thiệu

Lấy các menu điều hướng đa cấp được xây dựng từ các trang được cấu hình trong OneEntry.

Thêm thông tin về giao diện người dùng của mô-đun https://doc.oneentry.cloud/docs/category/menu

🎯 Mô-đun này làm gì?​

Mô-đun Menus cho phép bạn lấy cấu trúc điều hướng của trang web - menu đầu trang, menu chân trang, điều hướng bên, menu di động - xây dựng động các điều hướng đa cấp từ các trang được cấu hình trong OneEntry.

Bạn tạo menu trong bảng điều khiển quản trị OneEntry (liên kết các trang với nhau) và mô-đun này lấy cây menu hoàn chỉnh, vì vậy bạn có thể hiển thị điều hướng một cách động mà không cần mã hóa cứng các liên kết. SDK là chỉ đọc cho các menu - bạn lấy chúng, bạn không tạo chúng qua mã.

🚀 Bắt đầu nhanh​

Khởi tạo mô-đun từ defineOneEntry:


const { Menus } = defineOneEntry(
  "your-project-url", {
    "token": "your-app-token"
  }
);

Lấy một menu theo dấu hiệu của nó và duyệt qua các trang của nó:

// Fetch the "main_menu" structure in English.
const menu = await Menus.getMenusByMarker("main_menu", "en_US");

console.log(menu.identifier, menu.localizeInfos.title);

// Top-level items; nested items live in each item's children[].
menu.pages.forEach((item) => {
  console.log(item.pageUrl, item.localizeInfos.title, item.children);
});

✨ Khái niệm chính​

Một Menu (IMenusEntity) là một cấu trúc điều hướng liên kết các trang với nhau:

  • identifier - dấu hiệu của menu (ví dụ: "main_menu")
  • localizeInfos - tiêu đề menu đã được địa phương hóa
  • pages - mảng các mục menu (mỗi mục là một trang)

Cấu trúc Mục Menu​

Mỗi mục trong pages là một đối tượng IMenusPages:

{
  id: 123,                       // Page ID
  pageUrl: "home",               // Page URL (marker)
  localizeInfos: { title: "Home" },
  attributeValues: {},           // Custom attribute values
  parentId: null,                // null for top-level items
  position: 1,                   // Display order
  children: []                   // Nested menu items
}

Cấu trúc phân cấp Menu​

Các menu hỗ trợ cấu trúc lồng nhau. Việc lồng nhau được thể hiện qua mảng children[] của mỗi mục cùng với parentId của nó (các mục cấp cao nhất có parentId: null). Không có trường độ sâu riêng biệt - bạn xác định độ sâu bằng cách duyệt qua children[].

📂 Header Menu
├─ Home (parentId: null)
├─ About (parentId: null)
│  ├─ Team (parentId: 2)
│  └─ History (parentId: 2)
├─ Products (parentId: null)
│  └─ Electronics (parentId: 4)
│     ├─ Phones (parentId: 5)
│     └─ Laptops (parentId: 5)
└─ Contact (parentId: null)

📋 Những điều bạn cần biết​

Các menu được tạo trong bảng điều khiển quản trị​

Bạn không thể tạo menu qua SDK - chúng được tạo trong bảng điều khiển quản trị OneEntry (Menus → Tạo Menu → Thêm Trang → Lưu) hoặc qua Admin API. SDK chỉ dùng để lấy cấu trúc menu.

Các mục menu là các trang​

Mỗi mục menu là một trang được cấu hình trong OneEntry - bạn không thể thêm các liên kết tùy ý. Để thêm một liên kết bên ngoài, hãy tạo một trang với URL bên ngoài trong Mô-đun Trang và thêm nó vào menu.

Sắp xếp theo vị trí​

Các mục mang trường position - sắp xếp theo trường này để tôn trọng thứ tự hiển thị được cấu hình trong bảng điều khiển quản trị.

Đa ngôn ngữ​

Các menu được địa phương hóa theo langCode được truyền vào getMenusByMarker() (trở về ngôn ngữ được thiết lập trong defineOneEntry()). Lấy các menu bằng ngôn ngữ ưa thích của người dùng.

📊 Bảng tham khảo nhanh​

Phương thứcMô tảTrường hợp sử dụng
getMenusByMarker()Lấy menu theo dấu hiệuLấy cấu trúc menu cụ thể

❓ Câu hỏi thường gặp (FAQ)​

Làm thế nào để tôi tạo một menu đa cấp (dropdown)?​

Xây dựng cây menu trong bảng điều khiển quản trị bằng cách lồng các trang. Việc lồng nhau được trả về qua mảng children[] của mỗi mục - hiển thị nó một cách đệ quy.

Tôi có thể thêm các liên kết bên ngoài vào menu không?​

Các mục menu phải là các trang được cấu hình trong OneEntry. Để thêm một liên kết bên ngoài, hãy tạo một trang với URL bên ngoài trong Mô-đun Trang, sau đó thêm nó vào menu của bạn.

Làm thế nào để tôi xử lý trạng thái mục menu đang hoạt động?​

So sánh URL của trang hiện tại với pageUrl của mỗi mục và áp dụng một lớp hoạt động khi chúng khớp.

Làm thế nào để tôi xây dựng breadcrumbs?​

Theo dõi từ trang hiện tại lên qua các mối quan hệ parentId (Trang chủ > Danh mục > Danh mục con > Trang hiện tại).

Tôi có thể có các menu khác nhau cho các phần khác nhau không?​

Có - tạo nhiều menu với các dấu hiệu khác nhau (ví dụ: header_menu, footer_menu, sidebar_menu) và lấy từng menu với getMenusByMarker().

🎓 Thực hành tốt nhất​

  • Sử dụng dấu hiệu, không phải ID - dấu hiệu ổn định qua các môi trường.
  • Hiển thị children[] một cách đệ quy - đó là cách lồng nhau được thể hiện.
  • Sắp xếp theo position - tôn trọng thứ tự hiển thị đã được cấu hình.
  • Lưu trữ menu - chúng hiếm khi thay đổi.
  • Truyền langCode - lấy menu bằng ngôn ngữ của người dùng.
  • Xử lý các menu bị thiếu một cách nhẹ nhàng - cung cấp một phương án dự phòng khi không tìm thấy dấu hiệu.

🔗 Tài liệu liên quan​