In website operation, a clear and intuitive navigation system is a key factor in enhancing user experience, guiding users to explore content, and even optimizing search engine rankings.A well-designed multi-level navigation menu can help visitors quickly find the information they need, reduce the bounce rate, and effectively enhance the in-depth access to website content.navListTags are the core tools to achieve this goal, allowing us to flexibly build and display hierarchical navigation menus, thereby optimizing the user's browsing path.

UnderstandingnavListTag: AnqiCMS navigation core

AnqiCMS grants great flexibility to content creators and operators, making the website navigation no longer rigid and fixed code. ThroughnavListTags, we can easily retrieve preset navigation data from the backend and present it in a multi-level structure in the frontend template.This means that updating and adjusting the website's menu can be completed with simple operations in the backend, without the need to manually modify the code, greatly improving the efficiency of content operation.

navListThe power of tags lies in their ability to intelligently recognize and handle the hierarchical relationships of navigation items, and provide information such as the current page state (for example, the currently visited menu item will be highlighted), which are important foundations for building a friendly user interface.

Background configuration: the foundation for building navigation

In utilizingnavListBefore the label, we need to complete the construction of the navigation menu in the AnqiCMS backend. This is the source of the front-end display effect and also ensuresnavListthe premise of normal operation.

  1. Navigation Category ManagementImagine that your website may have multiple navigation areas such as main navigation, footer navigation, sidebar navigation, etc., which need to display different menus.The AnqiCMS allows you to create different "navigation categories", such as "top main navigation", "bottom friend links", and so on.You can add or edit these categories by going to 'Navigation Category Management' under 'Navigation Settings' in the 'Background Settings'.typeIdThis ID will be used in the template to specify which navigation group to call. By default, the system will provide a 'Default Navigation' category.

  2. Navigation Link SettingsOnce the navigation category is determined, we can add specific navigation links to it. Under each navigation category, you can:

    • Display NameThis is the text displayed for navigation items on the website.
    • Parent NavigationThis is the key to implementing multi-level navigation.You can choose to set a link as a 'Top-level Navigation', making it a first-level menu; or you can choose an existing first-level menu as its 'Parent Navigation' to create a second-level menu.AnqiCMS supports up to two levels of navigation links, which is sufficient and practical for most website structures.
    • Link Type【en】AnqiCMS provides flexible link options, including:
      • Built-in linkFor example, the home page, article model home page, product model home page, etc., for quick links to the core pages of the website.
      • Category page linkSelect the article or product category you have created as navigation to facilitate users directly entering specific content categories.
      • External LinkAllow you to add any URL on-site or off-site, providing great flexibility.
    • Subtitle nameandNavigation descriptionThese fields can provide additional context information for navigation items, although they may not be directly displayed in all designs. However, they can be useful in some complex layouts or scenarios that require more explanatory notes.
    • Display Order: Adjust the size of the numbers to control the arrangement order of the navigation items, the smaller the number, the closer to the front.

By carefully designing the navigation structure in the background, we have provided the front-endnavListThe call of the tag is ready with all the data.

Template Application:navListactual application of

Once the background menu structure is clear, it can be used in the template file:navListto present the tag.navListThe usage of tags is intuitive and easy to understand, following the unified syntax of AnqiCMS template engine.

We usually place the navigation code in the public header of the website (for example,bash.htmlorheader.html）in order to be reused on all pages.

Here is a typicalnavListTag code example, showing how to create a two-level navigation menu:

{# 使用 navList 标签获取后台配置的导航数据，并将其赋值给 'navs' 变量 #}
{% navList navs with typeId=1 %} {# 这里的 typeId=1 假设是主导航的类别ID #}
<ul>
    {# 循环遍历所有一级导航项 #}
    {%- for item in navs %}
        {# 根据 'IsCurrent' 属性判断当前导航项是否为当前页面，并添加 'active' 类名进行高亮 #}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>

            {# 检查当前一级导航项是否有子导航（二级菜单） #}
            {%- if item.NavList %}
            <dl> {# 使用 <dl>、<ul> 或其他合适的 HTML 标签来包裹子导航 #}
                {# 循环遍历所有二级导航项 #}
                {%- for inner in item.NavList %}
                    {# 同样根据 'IsCurrent' 属性判断并高亮子导航项 #}
                    <dd class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

Code analysis:

  • {% navList navs with typeId=1 %}：This isnavListTag start, it will fetch from the background.typeIdAll menu data under the navigation category for 1, and store these data in an array variable namednavs.
  • {%- for item in navs %}We useforto iteratenavseach navigation item in the array.itemRepresents the current primary navigation item being processed. Note.-The symbol can remove the empty lines occupied by the label, making the generated HTML cleaner.
  • {{ item.Link }}and{{item.Title}}Output the current navigation item's link address and display name.
  • {% if item.IsCurrent %}active{% endif %}This is a very practical feature.item.IsCurrentis a boolean value, it will be set if the current page is the page pointed to by this navigation itemtrue. We can take advantage of this feature to add aactiveClasses, combined with CSS styles, achieve highlight effects to enhance the user's current sense of direction.
  • {%- if item.NavList %}:item.NavListIt is also an array that includes all the sub-navigation items (second-level menu) of the current first-level navigation.Through this condition judgment, we only render the HTML structure of the second-level menu when there is a sub-navigation.
  • {%- for inner in item.NavList %}Nested:forLoops are used to iterate through each sub-navigation item in the second-level menu.innerRepresents the current secondary navigation item being processed.Link/TitleandIsCurrentThe properties are similar to the primary navigation item.

Optimize browsing experience:navListAdvanced techniques

Just displaying multi-level menus is not enough, AnqiCMS'snavListCan further optimize the browsing experience for users:

  1. Dynamic content linkageIn some scenarios, you may want the navigation menu to not only display fixed links but also dynamically display some popular articles or products.For example, when the user hovers over a category menu, in addition to displaying the subcategories, the latest or recommended articles under the category can also be displayed on the side.

    `twig {# Example: Display child categories under a top-level navigation and show popular articles next to each child category #}