How can one make the AnQi CMS navigation link automatically display products or articles under a 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 factor in improving user experience and content discoverability.Through carefully configuring the background navigation settings and combining with the powerful template tag function of AnQiCMS, we can easily achieve this goal, making the website content present to visitors in a more intelligent and dynamic way.

Firstly, the website navigation settings are fundamental.In the AnQiCMS backend management interface, access the 'Website Navigation Settings' feature, where we can create and manage various navigation links for the website.The 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 the navigation item to "Category Page Link" and select the specific category to associate with.For example, if we want to automatically display the latest articles for the "News InformationSimilarly, for the 'Product Display' navigation, we will link it to a product category.PageIdThis ID is actually the unique identifier for the selected category.

Next, the work on the template level is crucial, as it determines how content is extracted and displayed.AnQiCMS's template uses Django template engine syntax, providing rich tags to dynamically retrieve data.navListThe tag is the core of building the navigation menu. This tag allows us to traverse all the navigation items configured in the background and obtain the detailed information of each navigation item.

When we usenavListLabel traversal navigation menu, each navigation item will be treated as anitemobject. If this represents a category link, then itsitemisPageIdThe field will contain the ID of this category. At this point, we can utilizearchiveListthe label, combining thisPageIdto dynamically load articles or products under this category.archiveListTags providecategoryIdparameter, to directly receiveitem.PageIdUsed as a classification filtering condition. In addition, to distinguish between articles and products,archiveListIt also supportsmoduleIdparameters, such asmoduleId="1"usually used for article models,moduleId="2"May be used for product models, depending on your specific settings in the backend content model. We can alsolimitParameters control the number of items displayed, for example, only show the latest 5 articles or products, and usetype="list"to get a simple content list.

Let us 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 back-end.

<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 demonstrates how to check if the current navigation item corresponds to a category in the main navigation loop (item.PageId > 0). If so, usearchiveLista tag to specifyPageIdascategoryId,moduleIdTo product model ID, and limit the display quantity, so that the category products are automatically listed in the navigation dropdown menu.

Further more, if your navigation design includes multi-level structures, such as the first-level navigation is "Product Center", and the second-level navigation includes specific "Product Category A", "Product Category B", and these second-level categories directly display products, then you can useitem.NavListTo handle the secondary navigation, and apply it again in the secondary navigation looparchiveListTags. You can even combinecategoryListLabels, first judge whether the navigation item has subcategories, if it does, then display the subcategories, and if it does not, then directly display the articles or products under the current category. This 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>

Through the above 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 ofnavList/archiveListandcategoryListThese core template tags.

---

Common Questions and Answers (FAQ)

1. My navigation link shows categories, but does not automatically list articles or products. What should I check?Firstly, 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 exists and contains content. Secondly, check the template code, confirm that you are innavListThe loop used insidearchiveListlabels, andcategoryIdParameters are correctly bound to thePageId[for example]categoryId=item.PageIdorcategoryId=inner.PageId. Make sure that,moduleIdThe parameter matches the model ID of the content type (article or product) you want to display, and there is indeed published content under this category.

2. I want to display specific types of articles (such as, only show 'Hot Articles') in the navigation, rather than all articles under a category. Can AnQiCMS do that?Yes, it can.archiveListTags provideflagParameter, you can use this parameter to filter articles with specific recommendation properties. For example,