Skip to main content
On this page

Hướng dẫn Cấu hình Menu thả xuống (Dropdown) & Nhãn nổi (Badge) trên Header

Theme TanaFlows hỗ trợ cơ chế tạo menu thả xuống (Dropdown Menu) và nhãn nổi bật (Badge như: HOT, NEW, FREE) cho thanh điều hướng một cách tối giản và thông minh trực tiếp từ Ghost Admin mà không cần can thiệp vào code.

1. Cách tạo Menu thả xuống (Dropdown Menu)

Để tạo một nhóm menu thả xuống, bạn sử dụng quy ước đặt tên với dấu gạch ngang - trong mục quản trị Menu của Ghost.

Quy tắc cấu hình:

  1. Menu Cha (Parent Item): Viết tên menu bình thường.
  2. Menu Con (Child Item): Viết tên menu bắt đầu bằng dấu gạch ngang - (Ví dụ: - Tên menu con).
  3. Sắp xếp: Đặt các Menu Con nằm ngay phía dưới Menu Cha tương ứng trong danh sách.

Ví dụ minh họa trong Ghost Admin:

Trong Ghost Admin > Settings > Navigation, bạn cấu hình danh sách menu như sau:

  • Khóa học (Link: /courses/) ← Đây là Menu Cha
  • - Lập trình Web (Link: /tag/web-dev/) ← Menu Con 1
  • - Thiết kế UI/UX (Link: /tag/ui-ux/) ← Menu Con 2
  • Blog (Link: /blog/) ← Menu Cha khác (hiển thị bình thường)

Kết quả hiển thị trên trang web:

  • Mục Khóa học sẽ tự động xuất hiện biểu tượng mũi tên đi xuống.
  • Khi người dùng rê chuột (trên máy tính) hoặc bấm vào (trên điện thoại), menu sẽ thả xuống danh sách chứa 2 mục: Lập trình Web và Thiết kế UI/UX (dấu gạch ngang - tự động được ẩn đi).
  • Đường dẫn gốc của Menu Cha (/courses/) sẽ được ẩn đi để đóng vai trò làm nút đóng/mở menu.

2. Cách tạo Nhãn nổi bật (Badge) bên cạnh Menu

Bạn có thể thêm các nhãn nổi bật như NEW, HOT, FREE bên cạnh bất kỳ mục menu nào (áp dụng được cho cả Menu Cha và Menu Con) để thu hút sự chú ý của độc giả.

Quy tắc cấu hình:

Sử dụng ký tự gạch đứng | trong ô đặt tên Nhãn (Label) của Ghost Admin theo cấu trúc: Tên_Mục_Menu|Tên_Badge

Ví dụ thực tế trong Ghost Admin:

  • Với Menu thường: Sản phẩm|NEW
    • Hiển thị: Chữ Sản phẩm kèm một badge nhỏ màu sắc nổi bật ghi chữ NEW bên cạnh.
  • Với Menu Con trong Dropdown: - Khóa học Flutter|HOT
    • Hiển thị: Nằm trong menu thả xuống với tên Khóa học Flutter kèm badge HOT bên cạnh.

3. Các lưu ý quan trọng

Thứ tự các liên kết con

Hãy đảm bảo bạn xếp các Menu Con (có dấu - ở đầu) nằm liền kề ngay dưới Menu Cha tương ứng. Nếu bạn đặt cách quãng, chúng sẽ không được gom nhóm chính xác.

Cú pháp dấu gạch ngang

Ký tự gạch ngang - phải nằm ở đầu tiên của nhãn menu. Khoảng trắng sau dấu - là không bắt buộc (bạn viết -Lập trình hay - Lập trình đều được chấp nhận).

Xem thay đổi

Sau khi lưu các thay đổi trên Ghost Admin, bạn chỉ cần tải lại trang web để xem kết quả hiển thị ngay lập tức.