s_skaidocsTài liệu
Theme›Objects›nav
LINGO REFERENCE

Object nav

Lấy cây menu theo key để tự dựng giao diện header, footer hoặc menu mobile. Nhãn và URL được chọn theo ngôn ngữ website đang hiển thị.

Chuẩn bị menu

Trong website, mở Navigation, tạo menu với key main_menu, thêm liên kết và bản dịch. Ngôn ngữ lấy từ cấu hình ngôn ngữ của website. Navigation là tài nguyên cục bộ: website khác có cùng key vẫn sử dụng menu riêng.

Cách sử dụng

nav.main_menu trả danh sách mục cấp đầu, không phải HTML và không cần thêm .items. Key không tồn tại thì vòng lặp không tạo mục nào.

LINGO
<nav aria-label="Điều hướng chính">
  <ul>
    {% for item in nav.main_menu %}
      <li class="{% if item.active_trail %}active-trail{% endif %}">
        <a href="{{ item.url }}" target="{{ item.target }}" rel="{{ item.rel }}"
           {% if item.active %}aria-current="page"{% endif %}>{{ item.label }}</a>
      </li>
    {% endfor %}
  </ul>
</nav>

Key cũng có thể là biến:

{% set menu_key = "main_menu" %}
{% for item in nav[menu_key] %}
  <a href="{{ item.url }}">{{ item.label }}</a>
{% endfor %}

Thuộc tính của item

Thuộc tínhKiểuÝ nghĩa
idChuỗiĐịnh danh ổn định của liên kết.
labelChuỗiNhãn đã chọn bản dịch hoặc fallback.
urlChuỗiURL đã chọn bản dịch hoặc fallback.
targetChuỗi_self hoặc _blank.
relChuỗinoopener noreferrer khi mở tab mới; còn lại rỗng.
activeBooleanĐường dẫn nội bộ trùng trang hiện tại; bỏ qua query và dấu / cuối. Link có fragment hoặc URL tuyệt đối không được đánh dấu active.
active_trailBooleanMục này hoặc một mục con đang active.
childrenDanh sáchCác mục con có cùng cấu trúc; rỗng nếu không có.

Menu nhiều cấp

Bên trong vòng lặp cấp đầu, lặp item.children để render cấp hai:

{% if item.children %}
  <ul>
    {% for child in item.children %}
      <li><a href="{{ child.url }}" target="{{ child.target }}" rel="{{ child.rel }}"
        {% if child.active %}aria-current="page"{% endif %}>{{ child.label }}</a></li>
    {% endfor %}
  </ul>
{% endif %}

Ví dụ này chỉ thêm một cấp con. Các cấp sâu hơn cần xử lý tiếp child.children. Theme tự chịu trách nhiệm CSS, thao tác mở submenu và khả năng dùng bàn phím.

Đa ngôn ngữ và fallback

  • Tự chọn locale của request nếu ngôn ngữ đó đã được xuất bản trong website.
  • Thiếu bản dịch: dùng ngôn ngữ mặc định website, sau đó nội dung gốc.
  • Cấu trúc, thứ tự và hiển thị dùng chung; nhãn và URL có thể dịch riêng.
  • Không tự thêm /en hoặc prefix ngôn ngữ vào URL. Hãy cấu hình URL đúng trong bản dịch liên kết.

Lưu ý

  • Mục bị ẩn hoặc có URL không an toàn sẽ bị loại cùng cả nhánh con.
  • Giữ autoescape; không dùng filter safe cho nhãn menu. Đặt URL trong thuộc tính có dấu nháy.
  • Dữ liệu được tải khi truy cập và tái sử dụng trong cùng lượt render, không cache chung giữa các website/ngôn ngữ.
  • Có thể dùng trong layout, section và include. Không gán biến khác đè lên nav.
  • Tag cũ {% nav key="main_menu" %}...{% endnav %} đã bị loại bỏ. Chuyển sang vòng lặp trên nav[key].
← Danh sách ObjectsTemplate & giao diện →