How to display the main category in the navigation bar and show the latest products under this category in the dropdown menu?

In website operation, a clear and effective navigation system is the key to improving user experience and website professionalism.AnQiCMS (AnQiCMS) with its flexible content management and powerful template engine, can help us easily achieve complex navigation requirements.Today, let's discuss how to display the main categories in the website's navigation bar, and also present the latest products under the category in a dropdown menu when the mouse hovers over it.

Understanding AnQiCMS navigation and content management basics

One of the core advantages of AnQi CMS lies in its modular content management system.It allows us to define different "content models" for different types of content (such as "articles" and "products") and to classify these contents in a fine-grained manner.The website's navigation bar serves as the first window for users to interact with the website, and its design directly affects whether users can quickly find the information they need.A well-designed navigation can effectively guide users and also helps search engines better understand the website structure, thereby improving SEO performance.

To display the main categories and their latest products in the navigation bar, we need to combine the "navigation settings" function of the Anqi CMS backend with the tag calling capability of the frontend template.

Second, configure the main category navigation item

Firstly, we need to configure the navigation structure in the Anqi CMS backend management system.

1. Enter navigation settings：Log in to the AnQi CMS backend, go to the 'Background Settings' menu, and select the 'Navigation Settings' item.
2. Select or create a navigation category: The system usually has a default navigation category, such as "top navigation".If you have special requirements, you can also add a navigation category through 'Navigation Category Management'.We will take the default 'top navigation' as an example.
3. Add a main category navigation linkClick the 'Add Link' button in the 'Navigation Link Settings' to start configuring your main category navigation item.
   • display nameFill in the main category name you want to display in the navigation bar, for example, 'Electronics'.
   • Parent navigationSelect 'Top-level Navigation' to ensure it displays as a primary menu.
   • Link TypeThis is a critical step, please select the 'Category Page Link'.
   • Select categoryIn the pop-up category selector, be sure to select the main category you want to display the latest products.For example, if all your products belong to a large category under the "Product Model" (such as "phone", "computer" etc.), please select this large category.The system will recognize the ID of this category, which is very important for subsequent front-end template development.
4. Save SettingsAfter completing the configuration, click 'OK' to save the navigation link. At this point, the new added main category link should be displayed in your website's navigation bar.

Chapter 3, Implement the latest product display in the dropdown menu

Completed the backend configuration, next we need to modify the front-end template file, taking advantage of the powerful template tag features of Anqi CMS, dynamically obtain and display the latest products.

The template files of Anqi CMS are usually located in the root directory of your website./template/你的模板名/The navigation bar code is usually inpartial/header.htmlor directly inindex.htmlthe main template files.includeCome in. You need to find the code block responsible for rendering the main navigation.

The following is a sample code snippet that demonstrates how to display the latest products in the dropdown menu below the navigation items by using nested loops and tag calls.

{# 假设你的主导航类别ID是1，请根据实际情况调整 #}
{% navList navItems with typeId=1 %}
    <ul>
        {%- for mainNavItem in navItems %}
            <li {% if mainNavItem.IsCurrent %}class="active"{% endif %}>
                <a href="{{ mainNavItem.Link }}">{{mainNavItem.Title}}</a>

                {# 判断当前主导航项是否拥有子导航，即是否需要显示下拉菜单 #}
                {%- if mainNavItem.NavList %}
                    <ul class="sub-menu"> {# 这个ul是下拉菜单的容器，请根据你的CSS调整类名 #}
                        {# 遍历子导航项，这些子导航项通常也是分类 #}
                        {%- for subNavItem in mainNavItem.NavList %}
                            <li>
                                <a href="{{ subNavItem.Link }}">{{subNavItem.Title}}</a>

                                {# 关键步骤：获取并展示该子分类下的最新产品 #}
                                {# subNavItem.PageId 存储了子导航所关联的分类ID #}
                                {% if subNavItem.PageId > 0 %}
                                    <ul class="product-list-dropdown"> {# 最新产品列表的下拉容器 #}
                                        {# 使用 archiveList 标签获取最新产品 #}
                                        {% archiveList latestProducts with type="list" categoryId=subNavItem.PageId moduleId=2 order="id desc" limit="5" %}
                                            {% if latestProducts %}
                                                {% for product in latestProducts %}
                                                    <li><a href="{{product.Link}}" title="{{product.Title}}">{{product.Title}}</a></li>
                                                {% endfor %}
                                            {% else %}
                                                {# 当该分类下没有产品时，可以显示提示信息 #}
                                                <li>暂无最新产品</li>
                                            {% endif %}
                                        {% endarchiveList %}
                                    </ul>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

Code explanation:

1. {% navList navItems with typeId=1 %}:
   • This tag is used to retrieve all navigation links you have configured in the background 'Navigation Settings'.navItemsIs a custom variable name used to store these navigation data.
   • typeId=1Assume your main navigation (such as top navigation) category ID is 1.If your navigation category ID is different, please adjust according to the actual situation.You can view or edit the category ID in the "Navigation Settings" under "Navigation Category Management" in the background.
2. **`mainNavItem.