How to implement the `navList` tag for flexible display of top, bottom, or sidebar navigation menus on a website?

The website navigation is a guide for users to explore the content of the website, and it is also an important clue for search engines to understand the structure of the website.A well-designed, flexible navigation system that can greatly enhance user experience and website SEO performance.navListTag is indeed such a core tool, which gives us great freedom, allowing us to easily build and manage navigation menus at various positions such as the top, bottom, and sidebar of the website.

Then,navListHow does the tag actually implement this flexible and variable navigation display? Let's delve into its usage and the mechanisms behind it.

UnderstandingnavListcore mechanism

In AnQiCMS, the navigation menu is not simply hardcoded in the template.On the contrary, all navigation data is concentrated in the "Website Navigation Settings" on the backend.Here, we can create different navigation categories, such as main navigation, footer navigation, or sidebar navigation, each category has its own menu items.navListThe role of tags is to extract the configured data from the background in a structured way for use in the front-end template.

Its basic usage is very intuitive, we usually call it like this in the template:

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

here,navsIt is a variable name specified for the navigation list obtained, you can name it according to your preference.navListThe label will retrieve all menu items associated with a specific navigation category from the background and provide them asnavsvariables to us.

Build your first navigation menu

Assuming we need to display a main navigation menu at the top of the website.In the "Website Navigation SettingsnavListto display them:

<nav class="main-navigation">
    <ul>
        {% navList navs with typeId=1 %} {# 假设“默认导航”的ID是1 #}
            {%- for item in navs %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{item.Title}}</a>
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

This code first goes throughtypeId=1Specify the navigation category with ID 1. Then, it will traversenavseach navigation item in the list (item)). For each navigation item, we can access itsTitle(display name) andLink(Link address).item.IsCurrentThis boolean value is very practical, it will automatically judge whether the current page being visited matches the navigation item, if it matches, it will returnTrueWe can use this property to add the 'active' class to the navigation items of the current page to highlight them.

The intricacies of implementing multi-level navigation.

AnQiCMS'navListTags do not only support first-level navigation, they can also easily implement multi-level drop-down menus. Each navigation itemitemmay contain oneNavListThe attribute represents the sub-navigation menu. We can render these sub-menus through nestedforcyclic loops:

<nav class="main-navigation">
    <ul>
        {% navList navs %}
            {%- for item in navs %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{item.Title}}</a>
                    {%- if item.NavList %} {# 判断是否存在子导航 #}
                        <dl class="sub-menu">
                            {%- for inner in item.NavList %}
                                <dd class="{% if inner.IsCurrent %}active{% endif %}">
                                    <a href="{{ inner.Link }}">{{inner.Title}}</a>
                                </dd>
                            {% endfor %}
                        </dl>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

By using such a nested structure, no matter how many levels of sub-menus are set in the background (AnQiCMS supports two levels by default), the front-end can present them flexibly. In addition, we can also make use ofitem.SubTitleanditem.DescriptionThese fields add more auxiliary information to the navigation items, such as displaying a brief introduction below the title to make the menu more vivid.

Seamlessly connect navigation with dynamic content.

navListThe power of tags is not just limited to static links.It can deeply integrate with AnQiCMS content management system to achieve dynamic content loading of navigation menus.PageIdProperty. When a navigation link is set in the background to point to a category or a single page,PageIdit will store the ID of the category or page.

For example, we can dynamically display the sub-categories under a main navigation item named 'Product', and even directly list the popular products under this category.

Scenario one: Display category list under navigation

If you want to display all product subcategories under your main navigation item 'Products', you can handle it like this:

<ul>
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% if inner.PageId > 0 %} {# 检查子导航项是否关联了页面/分类ID #}
                    {% categoryList categories with parentId=inner.PageId %} {# 获取该ID下的子分类 #}
                    {% if categories %}
                    <ul>
                        {% for subCategory in categories %}
                        <li>
                            <a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>

Here, we utilizedinner.PageIdascategoryListlabel'sparentIdParameters, thus dynamically acquiring and displaying the sub-categories associated with the secondary navigation items. This method is very suitable for building complex product category navigation.

Scenario two: Display a list of specific documents (such as products or articles) under navigation

If you want to list several popular articles directly below a navigation item (such as "Popular Articles"), you can also make use ofPageIdCombinearchiveListTags:

<ul>
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 获取该ID下最新的8篇文档 #}
                {% if products %}
                <ul class="nav-menu-child-child">
                    {% for productItem in products %}
                    <li><a href="{{productItem.Link}}">{{productItem.Title}}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endarchiveList %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>

In this example,archiveListTag throughcategoryId=inner.PageIdThe parameter retrieves the latest 8 documents associated with the secondary navigation item category (here assumed to be products) and directly displays these product links in the menu.This dynamic integration greatly enhances the usability and content depth of the navigation menu.

skills and considerations in practical applications

in actual usenavListWhen labeling, there are some practical tips and things to pay attention to:

1. Backend navigation category managementIn the "Background Settings" -> "Navigation Settings", you can click on "Navigation Category Management" to create and manage multiple navigation categories. Each category will have a uniquetypeId, you can in thenavListUsed in tagstypeIdParameters to accurately call navigation to the required location, for exampletypeId=2Used for footer navigation,typeId=3Used for sidebar navigation.
2. siteIdUsed for multi-siteIf you are using the multi-site feature of AnQiCMS and want to call navigation data from other sites, you cansiteIdThe parameter specifies the target site ID to achieve flexible cross-site navigation content calling.
3. Optimization of template structure: In order to keep the template code neat.