How to implement a multi-level menu and content联动 display on the AnQiCMS website navigation list?

The website's navigation system is like the skeleton of a building, it not only guides users to browse but also directly affects the exposure and search engine optimization of the content.AnQiCMS provides a flexible and powerful navigation management feature, allowing you to easily build multi-level menus and achieve deep integration with website content, thereby enhancing user experience and content distribution efficiency.

Flexible configuration, build a multi-level navigation skeleton

The starting point of implementing multi-level menus in AnQiCMS is in the background navigation settings.You can find all the configuration items related to website navigation under 'Navigation Settings' in the 'Background Settings'.

First, the system provides a default "default navigation" category, but if you have more diverse needs, such as top navigation, footer navigation, sidebar navigation, etc., AnQiCMS allows you to add multiple custom categories through "navigation category management."}This provides your website with great flexibility, allowing for independent navigation structures to be set at different locations.

When adding or editing specific navigation links, several key settings determine the implementation of multi-level menus.Every navigation link can be specified a 'parent navigation', which is the core of building a multi-level menu.If you set the 'parent navigation' to 'top navigation', it will be displayed as a top-level menu;If you choose an existing first-level menu as its parent, it naturally becomes a second-level menu.Currently, AnQiCMS supports up to two-level navigation links, which is enough to meet the needs of most websites.

The setting of the 'Link Type' ensures the联动 of navigation and content.You can choose an "internal link" to point to the homepage or the homepage of a specific model (such as an article, a product)Select the 'Category Page Link' to directly associate with the created article categories, product categories, or single pages;While "external links" provide the greatest degree of freedom, they can point to any URL within or outside the site.These options make your navigation not just simple text links, but a direct reflection of the website's content architecture.

Template implementation:navListThe powerful power of tags

After the navigation structure is configured on the back-end, it needs to be presented in the front-end template next.AnQiCMS uses a syntax similar to the Django template engine, making template creation intuitive and efficient.The core navigation rendering tag isnavList.

By{% navList navs %}Tags, you can get all the navigation data configured in the background.navsA variable is an array containing navigation entries(item) and you can iterate over it to generate the menu.

A typical multi-level menu structure, which can benavListLabel collaborationforeasily implemented with loops and conditional judgments. Eachitemmay contain aNavListProperty, this property is also an array that stores the lower-level menu data of the current navigation item. It can be nested.forLoop, you can perfectly build a second-level menu:

{% navList navs %}
<ul class="main-nav">
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 判断是否有下级导航 #}
            <dl class="sub-nav">
                {%- 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 %}
</ul>
{% endnavList %}

In the code above,item.IsCurrentThe attribute helps you determine whether the current navigation item is the current page, and then addactiveThe class name, enhancing user experience.

Content联动: Make the menu 'alive'.

It may not be enough to just display link text, sometimes you want to directly display dynamic content associated with the menu item when hovering over or clicking on the secondary menu, such as the latest articles or popular products under a certain category. AnQiCMS'snavListLabel combinationarchiveListandcategoryListContent tags that can easily realize this content linkage.

Each navigation itemitemmay contain aPageIdProperty, which is associated with the category or single page ID set in the background. Using thisPageIdYou can dynamically call related content in the second-level menu and even deeper levels.

For example, if you want to directly display the latest product list of the secondary product category menu, you can do it like this:

<ul>
    {% navList navList with typeId=1 %} {# 假设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 #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 联动显示该分类下最新的8个产品 #}
                    {% if products %}
                    <ul class="nav-menu-child-products">
                        {% for product in products %}
                        <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

This code first traverses the main navigation, if there is a sub-navigation (second-level navigation) under the first-level navigation, it will continue to traverse the second-level navigation. For each second-level navigation item, if it is associated with aPageId(usually the ID of a certain category), will usearchiveListtags to get the latest products under the category (moduleIdshould be adjusted according to the actual product model ID, which is not explicitly given, assuminginner.PageIdThe corresponding product category). In this way, users can preview the related content directly in the navigation menu, which greatly improves the browsing efficiency.

Another common scenario is to display the subcategories of a category in navigation. This can also be done bycategoryListTag implementation:

<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 %}
                    {% categoryList categories with parentId=inner.PageId %} {# 显示该分类的下级分类 #}
                    {% if categories %}
                    <ul class="nav-menu-child-subcategories">
                        {% for subCategory in categories %}
                        <li>
                            <a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

Here, if a secondary navigation item is associated with a category ID,categoryListThe tag will retrieve and display all subcategories under the category.

Practical skills and precautions

• Modular template:To maintain the cleanliness and maintainability of the code, it is recommended to place the navigation code snippet separately.partial/Under the directory (for examplepartial/header_nav.htmlThen proceed{% include "partial/header_nav.html" %}The tag is referenced in the main template, which conforms to the template conventions of AnQiCMS.
• CSS and JavaScript:The final display effect of the navigation menu, including drop-down animations, responsive layouts, etc., all depend on the carefully written CSS styles and JavaScript interaction logic.AnQiCMS provides a flexible template structure, but the specific style and behavior need to be completed by front-end code.
• Static rules:Ensure your website is static