The website navigation is an important guide for users to access the website, which not only helps users quickly find the information they need, but also reflects the clear structure and user-friendly experience of the website. In AnQiCMS, building flexible and diverse navigation menus is a relatively simple and efficient task, which is mainly due to its powerfulnavListLabel. Whether it is a simple single-level menu or a complex two-level dropdown menu,navListLabels can provide strong support.

navListLabel: The core tool for navigation construction

navListThe tag is a core tag used specifically in the AnQiCMS template system for obtaining and displaying navigation menu data.It is responsible for extracting the configured navigation information from the background and providing it to the frontend template in a structured manner.

Basic usage and parameters:

UsenavListThe label is very intuitive, its basic structure is as follows:

{% navList navs %}
    {# 在这里循环遍历导航项 #}
{% endnavList %}

Here,navsIt is a customizable variable name that will carry all the navigation data obtained from the background.{% navList %}and{% endnavList %}The label identifies the range of navigation data acquisition.

navListThe label also supports the following parameters to meet different navigation call requirements:

  • typeId:This parameter allows you to specify the navigation category to be called.AnQiCMS backend supports the creation of multiple navigation categories (for example, you can set a "top navigationtypeId，you can display independent navigation menus at different locations on the website. By default,typeIdis 1, corresponding to the background's 'default navigation'.
  • siteId:If your AnQiCMS system manages multiple sites and you want to call navigation data defined by other sites in the current template, you can usesiteIdParameter to specify the target site ID.

Navigation data structure:

navsA variable is an array, where each element (we usually name it in the loop)itemAn item represents a navigation. Each navigation item includes the following key information:

  • Title:The text displayed on the front end of the navigation link, such as "Home", "Product Center".
  • Link:Navigation item click to jump to the target URL address.
  • IsCurrent:A boolean value (trueorfalseIndicates whether the current navigation item matches the URL of the page the user is visiting. This field is very useful for adding highlight styles to the navigation item corresponding to the current page.
  • PageId:If the navigation item links to a category or a single page within AnQiCMS,PageIdThis will store the ID of the category or page. This provides convenience for subsequent combination with other tags to implement more complex functions (such as displaying articles under the category in the navigation dropdown menu).
  • NavList: This is the core of implementing multi-level navigation!If the current navigation item has a submenu,NavListThe field will be a new array containing all the sub-navigation items.The data structure of the sub-navigation item is exactly the same as that of the parent navigation item, which means you can easily build a multi-level menu by using nested loops.

Backend configuration: building the skeleton of navigation

In AnQiCMS,navListTags are powerful in function, but their data sources depend on the careful configuration of the backend. The following are the key steps to build the navigation skeleton:

  1. Enter navigation settings:Log in to the AnQiCMS backend,