Hướng dẫn Trình dựng Menu điều hướng trong PolyCMS
Tổng quan
Công cụ Menu Builder của PolyCMS mang đến giao diện kéo thả trực quan giúp bạn dễ dàng thiết lập hệ thống menu điều hướng ngoài trang chủ. Xây dựng các cấu trúc menu phức tạp chứa các thư mục con lồng nhau, các đường dẫn tự chọn và dễ dàng kiểm soát chi tiết từng mục liên kết.
Khởi tạo một Menu mới
Di chuyển đến mục Blog > Menus và nhấn chọn Create New Menu:
- Nhập Tên Menu để phân biệt (ví dụ: "Main Navigation - Menu chính", "Footer Menu - Menu chân trang").
- Nhấn chọn Create Menu.
Thêm mới các mục liên kết vào Menu (Menu Items)
Khung bên trái giao diện cung cấp các nguồn dữ liệu nội dung để bạn chọn chèn vào menu:
Trang tĩnh (Pages)
Tích chọn từ danh sách các trang tĩnh hiện có trên hệ thống. Menu sẽ tự động gán đường dẫn URL tương ứng của trang.
Chuyên mục (Categories)
Thêm liên kết dẫn đến trang danh sách bài viết của chuyên mục. Hệ thống hỗ trợ chọn riêng lẻ từng chuyên mục con trong sơ đồ phân cấp.
Bài viết (Posts)
Chèn đường dẫn liên kết trực tiếp dẫn đến một bài viết cụ thể trên blog.
Thẻ tag (Tags)
Thêm liên kết dẫn đến trang danh sách bài viết được gán thẻ tag tương ứng.
Liên kết tùy chọn (Custom URL)
Nhập đường dẫn URL tự do và nhãn hiển thị tương ứng. Phù hợp cho các liên kết trỏ ra ngoài trang web, liên kết neo (anchor links) hoặc các đường dẫn đặc thù.
Thao tác kéo thả sắp xếp danh mục
Sắp xếp lại vị trí các mục menu bằng thao tác kéo thả chuột đơn giản:
- Thay đổi thứ tự hiển thị — Kéo các mục di chuyển lên hoặc xuống để thay đổi thứ tự xuất hiện của chúng trên thanh menu.
- Tạo menu con (Nesting) — Kéo mục menu dịch chuyển nhẹ sang bên phải nằm phía dưới một mục menu khác để thiết lập cấu trúc cha-con. Hệ thống hỗ trợ tạo menu con lồng nhau nhiều cấp độ.
Các thông số tùy biến mục Menu
Click vào tiêu đề của một mục menu trong danh sách để mở rộng khung cấu hình:
| Cấu hình tùy chọn | Mô tả chi tiết |
|---|---|
| Navigation Label | Tên nhãn hiển thị ra ngoài giao diện menu |
| Title Attribute | Thuộc tính title của mã HTML (hiển thị ghi chú nhỏ khi di chuột vào) |
| CSS Classes | Chèn thêm các lớp CSS tùy biến để thiết kế riêng cho mục menu tương ứng |
| Target | Chọn thuộc tính _blank nếu muốn liên kết được mở sang một tab mới |
| URL | Đường dẫn đích (tự động điền đối với các trang tĩnh/chuyên mục bài viết) |
Các vị trí hiển thị Menu (Menu Locations)
Các giao diện theme sẽ định nghĩa sẵn các vị trí hiển thị menu trên trang (ví dụ: "Primary Menu - Menu chính ở đầu trang", "Footer Menu - Menu ở chân trang"). Sau khi tạo xong menu, bạn tiến hành gán nó vào vị trí hiển thị mong muốn:
- Lựa chọn menu cần cấu hình từ danh sách lựa chọn.
- Tích chọn Vị trí hiển thị (Menu Location) tương ứng.
- Nhấp chọn Save Menu.
Tệp tin mã nguồn của theme đang hoạt động sẽ tự động kết xuất hiển thị menu đã gán thông qua hàm gọi polycms_render_menu().
Các khuyến nghị vận hành
- Giới hạn số lượng mục menu ở cấp cao nhất từ 5 đến 7 mục để đảm bảo trải nghiệm người dùng tốt nhất.
- Đặt tên nhãn menu ngắn gọn, mô tả rõ ràng nội dung của trang đích.
- Kiểm tra kỹ khả năng hiển thị của menu trên các thiết bị di động — các theme responsive sẽ tự động thu gọn menu thành nút nhấn hamburger.
- Sử dụng cấu hình CSS Classes đối với các nút menu cần tạo điểm nhấn nổi bật (ví dụ: nút kêu gọi hành động CTA).
Tài liệu hướng dẫn liên quan
- Quản lý trang tĩnh — Tạo các trang tĩnh để đưa vào menu điều hướng.
- Quản lý Giao diện Themes — Tìm hiểu các vị trí đặt menu do theme định nghĩa.
- Tự phát triển Giao diện Themes — Hướng dẫn nhúng hàm
polycms_render_menu()vào tệp tin giao diện.