Giới thiệu

🎯 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 điều hướng đa cấp một cách động từ các trang được cấu hình trong OneEntry.

Hãy nghĩ về nó như là trình quản lý điều hướng của bạn - 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ấu trúc cây menu hoàn chỉnh, để 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.

---

📖 Giải thích đơn giản

Mỗi trang web cần điều hướng để giúp người dùng tìm nội dung:

• Menu Đầu Trang - Điều hướng chính (Trang chủ, Giới thiệu, Dịch vụ, Liên hệ)
• Menu Di Động - Menu hamburger với các danh sách thả xuống
• Menu Bên - Điều hướng theo danh mục (Danh mục blog, bộ lọc sản phẩm)
• Menu Chân Trang - Liên kết pháp lý, liên kết xã hội, sơ đồ trang
• Mega Menu - Danh sách thả xuống phức tạp với hình ảnh và danh mục
• Breadcrumbs - Đường dẫn trang hiện tại (Trang chủ > Sản phẩm > Điện tử)

Vấn đề:

• Khó cập nhật - Cần triển khai lại mã để thay đổi menu
• Không hỗ trợ đa ngôn ngữ - Các menu khác nhau cho mỗi ngôn ngữ
• Không thân thiện với quản trị viên - Cần lập trình viên cho mỗi thay đổi
• Trùng lặp menu - Cùng một menu được mã hóa cứng ở nhiều nơi

Giải pháp Menus:

Lợi ích:

• Cập nhật dễ dàng - Thay đổi menu trong bảng điều khiển quản trị, không cần triển khai lại
• Đa ngôn ngữ - Menu tự động được địa phương hóa
• Thân thiện với quản trị viên - Người không phải lập trình viên có thể quản lý điều hướng
• Nguồn thông tin duy nhất - Một cấu trúc menu ở mọi nơi

---

✨ Khái niệm chính

Menu là gì?

Một Menu là một cấu trúc điều hướng chứa các liên kết đến các trang:

• Mục Menu - Các liên kết điều hướng riêng lẻ (các trang)
• Cấu trúc phân cấp - Cấu trúc lồng ghép (cha → con)
• Thứ tự - Thứ tự hiển thị của các mục
• Địa phương hóa - Tiêu đề được dịch theo ngôn ngữ
• Động - Lấy cấu trúc từ API, hiển thị trong ứng dụng của bạn

Cấu trúc Menu

Mỗi menu có cấu trúc này:

{
  id: 123,
  identifier: "header_menu",          // Định danh duy nhất
  localizeInfos: {
    title: "Điều hướng đầu trang chính"   // Tiêu đề menu
  },
  pages: [                            // Các mục menu (các trang)
    {
      id: 1,                          // ID trang
      pageUrl: "/home",               // URL trang
      localizeInfos: {
        title: "Trang chủ",                // Hiển thị trên trang
        menuTitle: "Trang chủ"             // Hiển thị trong menu
      },
      attributeValues: {},            // Giá trị thuộc tính
      parentId: 0,                    // Mục cấp cao nhất
      position: 1                     // Thứ tự hiển thị
    }
  ]
}

Cấu trúc Phân cấp Menu

Menus hỗ trợ cấu trúc lồng ghép (điều hướng đa cấp):

📂 Menu Đầu Trang
├─ 🏠 Trang chủ (độ sâu: 0, parentId: 0)
├─ 📖 Giới thiệu (độ sâu: 0, parentId: 0)
│  ├─ 👥 Đội ngũ (độ sâu: 1, parentId: 2)
│  ├─ 🏢 Văn phòng (độ sâu: 1, parentId: 2)
│  └─ 📜 Lịch sử (độ sâu: 1, parentId: 2)
├─ 🛍️ Sản phẩm (độ sâu: 0, parentId: 0)
│  ├─ 💻 Điện tử (độ sâu: 1, parentId: 4)
│  │  ├─ 📱 Điện thoại (độ sâu: 2, parentId: 5)
│  │  └─ 💻 Laptop (độ sâu: 2, parentId: 5)
│  └─ 👕 Thời trang (độ sâu: 1, parentId: 4)
└─ 📞 Liên hệ (độ sâu: 0, parentId: 0)

Các loại Menu Thông dụng

Loại Menu	Mô tả	Ví dụ Sử dụng
Menu Đầu Trang	Điều hướng chính của trang web	Thanh điều hướng trên cùng, liên kết chính
Menu Chân Trang	Liên kết chân trang	Pháp lý, xã hội, sơ đồ trang
Menu Bên	Điều hướng theo danh mục	Danh mục blog, bộ lọc sản phẩm
Menu Di Động	Điều hướng dành riêng cho di động	Menu hamburger, menu ngăn kéo
Mega Menu	Danh sách thả xuống phức tạp với danh mục	Điều hướng đa cấp thương mại điện tử
Breadcrumbs	Đường dẫn trang hiện tại	Trang chủ > Sản phẩm > Điện tử

Tại sao Sử dụng Mô-đun Menus?

Lợi ích	Mô tả
Điều hướng Động	Lấy cấu trúc menu từ API, không mã hóa cứng
Đa Ngôn Ngữ	Menu tự động được địa phương hóa dựa trên ngôn ngữ
Thân thiện với Quản trị viên	Người không phải lập trình viên có thể cập nhật điều hướng
Cấu trúc Phân cấp	Hỗ trợ cho các menu lồng ghép (độ sâu không giới hạn)
Thân thiện với SEO	Mối quan hệ và cấu trúc trang hợp lý
Nguồn thông tin duy nhất	Một cấu trúc menu được sử dụng ở mọi nơi

---

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

Menus đượ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:

Bảng điều khiển Quản trị OneEntry → Menus → Tạo Menu → Thêm Trang → Lưu

SDK được sử dụng để lấy cấu trúc menu, không phải để tạo chúng.

Mục Menu là Các Trang

Quan trọng: Các mục menu là các trang được cấu hình trong OneEntry. Bạn không thể thêm các liên kết tùy ý vào menu - mỗi mục menu phải là một trang.

Cấu trúc Phân cấp Menu (Mối quan hệ Cha-Con)

Menus hỗ trợ độ sâu lồng ghép không giới hạn

---

💡 Ghi chú Quan trọng

Menus được Tạo trong Bảng điều khiển Quản trị

Nhớ: SDK được sử dụng để lấy cấu trúc menu, không phải để tạo menu.

Để tạo/chỉnh sửa menu: Sử dụng Bảng điều khiển Quản trị OneEntry hoặc API Quản trị.

Mục Menu Phải Là Các Trang

Bạn không thể thêm các liên kết tùy ý vào menu. Mỗi mục menu phải là một trang được cấu hình trong OneEntry.

Giải pháp cho các liên kết bên ngoài: Tạo các trang với URL bên ngoài trong OneEntry, sau đó thêm chúng vào menu.

Cấu trúc Phân cấp Menu là Linh hoạt

Menus hỗ trợ độ sâu lồng ghép không giới hạn - bạn có thể có nhiều cấp độ như cần thiết.

Hỗ trợ Đa Ngôn Ngữ

Menus tự động hỗ trợ đa ngôn ngữ dựa trên langCode trong defineOneEntry().

Thực hành tốt nhất: Lấy menu bằng ngôn ngữ ưa thích của người dùng.

Lưu Cache Menus để Tăng Tốc Độ

Menus hiếm khi thay đổi - triển khai lưu cache để giảm các cuộc gọi API:

• Frontend: localStorage, sessionStorage
• Backend: Redis, bộ nhớ cache
• TTL: 1 giờ được khuyến nghị

---

📊 Bảng Tham Khảo Nhanh

Phương thức	Mô tả	Trường hợp Sử dụng
getMenuByMarker()	Lấy menu theo marker	Lấ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 (điều hướng thả xuống)?

Menus hỗ trợ độ sâu lồng ghép không giới hạn. Sử dụng parentId để tạo các cấu trúc phân cấp. Trong bảng điều khiển quản trị, bạn có thể lồng ghép các trang để tạo mối quan hệ cha-con tự động phản ánh trong cấu trúc menu.

---

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 các liên kết bên ngoài, hãy tạo các trang với URL bên ngoài trong mô-đun Pages, sau đó thêm chúng 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 trang hiện tại với pageUrl của từng mục menu. Áp dụng một lớp/style hoạt động khi chúng khớp để làm nổi bật trang hiện tại trong điều hướng.

---

Menu của tôi có quá nhiều mục. Làm thế nào để tôi tối ưu hóa hiệu suất?

Lưu cache menus bằng localStorage hoặc sessionStorage vì chúng hiếm khi thay đổi. Triển khai tải lười cho mega menus với nhiều mục lồng ghép. Cân nhắc sử dụng menu hamburger tối ưu cho di động để cải thiện trải nghiệm người dùng.

---

Làm thế nào để tôi tạo một điều hướng breadcrumbs?

Sử dụng cấu trúc menu để xây dựng breadcrumbs. Theo dõi từ trang hiện tại lên qua các mối quan hệ parentId để xây dựng đường dẫn breadcrumbs (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 marker khác nhau (ví dụ: header_menu, footer_menu, sidebar_menu) và lấy chúng riêng biệt bằng cách sử dụng getMenuByMarker().

---

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

• Sử dụng markers, không phải IDs - Markers ổn định qua các môi trường
• Lưu cache menus - Giảm các cuộc gọi API cho dữ liệu hiếm khi thay đổi
• Xây dựng cây đệ quy - Sử dụng parentId cho cấu trúc phân cấp
• Sắp xếp theo vị trí - Tôn trọng thứ tự hiển thị
• Xử lý trạng thái hoạt động - Làm nổi bật trang hiện tại
• Cung cấp menu dự phòng - Xử lý lỗi một cách nhẹ nhàng
• Hỗ trợ đa ngôn ngữ - Sử dụng langCode cho địa phương hóa
• Tối ưu hóa cho di động - Triển khai điều hướng đáp ứng

---

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

---

Định nghĩa của mô-đun Menus

Mô-đun Menus định nghĩa cấu trúc và điều hướng của trang web của bạn.

Menu là một yếu tố chính của cấu trúc và điều hướng của trang web của bạn. Với menu, bạn cung cấp cho khách truy cập một cách thuận tiện để điều hướng qua các phần khác nhau của ứng dụng và tìm kiếm thông tin họ cần.

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

Trong Nền tảng OneEntry, bạn có thể tạo cấu trúc menu trực tiếp từ tài khoản cá nhân của mình. Điều này cho phép bạn thay đổi tập hợp các trang được bao gồm trong menu, thứ tự và tiêu đề của chúng mà không cần sửa đổi mã nguồn của ứng dụng.

Ngoài ra, nếu cần, bạn có thể tạo các cấp lồng ghép trong menu, cho phép cấu trúc giống như cây với các phần và tiểu phần.

Tất cả những điều này cho phép bạn làm việc một cách thuận tiện và linh hoạt với điều hướng của ứng dụng trực tiếp từ tài khoản cá nhân của mình.

Cốt lõi của menu là các trang. Cấu trúc menu được tạo ra từ các trang.

Bạn có thể xác định:

Các trang nào sẽ được bao gồm trong menu Thứ tự mà chúng sẽ được trình bày cho người dùng Tiêu đề nào sẽ được đặt cho mục menu dẫn đến một trang cụ thể Sự lồng ghép của các mục menu (Cấu trúc cây) Một số khái niệm này đã được thảo luận trong phần các trang, và một số cài đặt trang ảnh hưởng đến cấu trúc menu mà bạn có thể tạo từ các trang này.

---

🔗 Tài liệu Liên quan

• Mô-đun Pages - Quản lý các trang tạo nên menu của bạn
• Mô-đun Locales - Hỗ trợ đa ngôn ngữ cho việc địa phương hóa menu
• Mô-đun GeneralTypes - Các loại trang được sử dụng trong menu

---