Website navigation is an important guide for users when they visit a website, not only helping users find the information they need quickly, but also reflecting the clear structure and friendly user experience of the website. Building flexible and diverse navigation menus in AnQiCMS is a relatively simple and efficient task, which is mainly due to its powerful featuresnavListLabel. Whether it is a simple single-layer menu or a complex two-level dropdown menu,navListLabels can provide strong support.

navListLabel: The core tool for building navigation

navListThe tag is a core tag used in the AnQiCMS template system to retrieve and display navigation menu data.It is responsible for extracting the configured navigation information from the background and providing it to the front-end 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 variable name that you can customize, which will carry all the navigation data obtained from the background.{% navList %}and{% endnavList %}The tag identifies the range of navigation data acquisition.

navListThe tag 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 creating multiple navigation categories (for example, you can set a "top navigation" for the main menu, and a "footer navigation" for the bottom links).By setting differenttypeIdYou can display independent navigation menus at different locations on the website. By default,typeIdis 1, corresponding to the "default navigation" in the background.
  • 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 usesiteIdParameters to specify the ID of the target site.

Navigation data structure:

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

  • Title:The text displayed on the front-end for navigation links, such as 'Home', 'Product Center'.
  • Link:The target URL address after the navigation item is clicked.
  • IsCurrent:A boolean value (trueorfalseIndicates whether the current navigation item matches the URL of the page being visited by the user. This field is very useful for highlighting the corresponding navigation item for the current page.
  • PageId:If the navigation item links to a category or single page within the AnQiCMS,PageIdWill 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 child navigation item is exactly the same as that of the parent navigation item, which means you can easily build a multi-level menu by nesting loops.

Backend configuration: building the navigation skeleton

In AnQiCMS,navListTags are powerful in function, but their data source depends on the careful configuration of the background. The following are the key steps to build the navigation skeleton.

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