How can you make the AnQi CMS navigation link automatically display products or articles under the category?

In the daily operation of AnQi CMS, how to make the navigation links automatically display the products or articles under their categories is an important aspect for improving user experience and content discoverability.By carefully configuring the background navigation settings and combining with the powerful template tag features of AnQiCMS, we can easily achieve this goal, presenting the website content in a more intelligent and dynamic way to visitors.

First, the website navigation settings are basic. In the AnQiCMS backend management interface, access the 'Website Navigation Settings' feature, where we can create and manage various types of navigation links for the website.The AnQi CMS supports various link types, including built-in links, category page links, and external links.To implement automatic display of category content in navigation, we need to set the link type of navigation items to "category page link" and select the specific category to be associated.For example, if we want to automatically display the latest articles for the "News Information" item in the navigation menu, we need to link the "News Information" navigation to the pre-set article categories in the background.Similarly, for the 'Product Display' navigation, we will link it to a product category.When a navigation link is specified as a category page link, AnQiCMS will automatically allocate aPageIdThis ID is actually the unique identifier of the selected category.

Next, the work at the template level is crucial, as it determines how content is extracted and displayed.AnQiCMS template uses Django template engine syntax and provides rich tags for dynamic data retrieval. Among them,navListThe tag is the core of building a navigation menu. This tag allows us to traverse all the navigation items configured in the background and obtain detailed information for each navigation item.

When we usenavListWhen traversing the navigation menu, each navigation item is processed as anitemobject. If thisitemrepresents a category link, then itsPageIdThe field will contain the ID of the category. At this point, we can usearchiveListthe tag, combined with thisPageIdto dynamically load articles or products under the category.archiveListTags providedcategoryIdparameter, which can be received directlyitem.PageIdAs a classification filter condition. In addition, to distinguish between articles and products,archiveListit also supportsmoduleIdparameters, for examplemoduleId="1"usually used in article models, andmoduleId="2"May be used for product models, depending on the specific settings in your backend content model. We can also uselimitThe parameter controls the number of entries displayed, for example, only displaying the latest 5 articles or products, and usingtype="list"to get a simple content list.

Let's understand this process through a specific code example.Assuming we have a navigation item called 'Our Products', it links to a product category on the backend.In the template, we may display it and the products below it in this way:

<ul>
    {% navList navList with typeId=1 %} {# 假设typeId=1是主导航 #}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {# 检查是否有子导航，这里我们假设“我们的产品”下直接显示产品 #}
        {% if item.PageId > 0 %} {# 只有当item是一个分类链接时才尝试获取内容 #}
            {% archiveList products with type="list" categoryId=item.PageId limit="8" moduleId="2" %} {# moduleId="2"假设是产品模型ID #}
            {% if products %}
            <ul class="product-dropdown-menu">
                {% for product in products %}
                <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                {% endfor %}
            </ul>
            {% endif %}
            {% endarchiveList %}
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

This example shows how to check in the main navigation loop whether the current navigation item corresponds to a category (item.PageId > 0) If so, usearchiveListthe label, to mark the current navigation item'sPageIdascategoryId, specifymoduleIdFor product model ID, and limit the display quantity, thus automatically listing the products under the category in the navigation dropdown menu.

Further, if your navigation design includes multi-level structures, such as the first-level navigation being "Product Center", with specific "Product Category A" and "Product Category B" as the second-level navigation, and products are directly displayed under these second-level categories, then you can useitem.NavListHandle the second-level navigation and apply it again in the loop of the second-level navigationarchiveListTags. You can even combine them.categoryListLabel, first determine if the navigation item has subcategories, if it does, display the subcategories, if not, directly display the articles or products under the current category, which provides great convenience for building flexible and variable navigation structures.

<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 subCategories with parentId=inner.PageId %}
                    {% if subCategories %} {# 如果有子分类，显示子分类 #}
                    <ul>
                        {% for subCat in subCategories %}
                        <li><a href="{{ subCat.Link }}">{{subCat.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% else %} {# 如果没有子分类，显示当前二级分类下的产品 #}
                        {% archiveList products with type="list" categoryId=inner.PageId limit="5" moduleId="2" %}
                        {% 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 %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

By this method, AnQiCMS allows website operators to flexibly display products or articles under categories in the navigation menu according to actual needs, greatly improving the efficiency of website content presentation and user browsing experience. The key is to understand the association between the background navigation and categories, and to make good use of itnavList/archiveListandcategoryListThese core template tags.

Frequently Asked Questions (FAQ)

1. My navigation link shows categories, but does not automatically list articles or products. Where should I check?First, make sure that your navigation item is correctly set to "Category Page Link" in the "Website Navigation Settings" backend, and that you have selected a category that actually exists and contains content. Secondly, check the template code, confirm that you are innavListLoop internally usedarchiveListthe tags, andcategoryIdParameters are correctly bound to the navigation itemPageIdfor examplecategoryId=item.PageIdorcategoryId=inner.PageId). Also, make suremoduleIdThe parameter matches the model ID of the content type you want to display (article or product), and there is indeed published content in this category.

2. I want to display specific types of articles in the navigation (such as only displaying 'Hot Articles'), rather than all articles under categories, can AnQiCMS do this?Yes.archiveListTags providedflagParameter, you can use this parameter to filter articles with specific recommendation attributes. For example,