AnQi CMS: Create a dynamic dropdown navigation menu to make content accessible

In website operation, the navigation menu is the starting point 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.The traditional navigation menu is often a fixed link, and as the website content becomes richer, especially when there are many articles and product types, manually maintaining the content list in the dropdown menu becomes extremely cumbersome and prone to errors.The Anqi CMS provides us with a graceful and efficient solution with its powerful content management capabilities, allowing us to easily display lists of articles or products under categories in the navigation dropdown menu, greatly enhancing user experience and operational efficiency.

Understand the navigation and content association mechanism of AnQi CMS

One of the core advantages of AnQi CMS lies in its flexible content model and template tag system.To implement dynamic navigation, we first need to understand the relationship between navigation entries and actual content (categories, articles, products).In Anqi CMS, the navigation menu is not simply pointing to a fixed URL, it can directly link to the existing categories or single pages on the website.This means that when we link a main navigation item to a product category, the system can intelligently recognize this association and allow us to further obtain the subcategories or specific articles/products under this category at the template level.

Configure the navigation structure in the background

First, we need to complete the basic navigation structure settings in the Anqi CMS backend management interface.

  1. Create and manage categories and content modelsEnsure that you have created the required article or product categories and published the corresponding articles or products under these categories.Anqi CMS supports custom content models, you can define different article, product fields according to business requirements.
  2. Set the main navigation items: Go to the 'Website Navigation Settings' under 'Backend Settings'.Here, you can create or edit navigation categories (such as "default navigation" or "footer navigation"), and then add a main navigation link to your website.
  3. Associate navigation with categoriesIn adding or editing navigation links, select the link type as "Category Page Link".At this time, the system will provide a dropdown list for you to select the specific article category or product category you want to associate with.This step is the key to implementing a dynamic dropdown menu, which establishes a direct link between the navigation items and the background content categories.
  4. Create secondary navigation (optional)If your dropdown menu needs a deeper structure, such as having subcategories under main categories, and the subcategories display article lists, you can continue to create a second-level navigation for the "Category Page Link" in the background and associate it with specific subcategories.

After completing the background configuration, our navigation structure has already been set up, and the next step is to dynamically render content through the tags provided by Anqicms in the template file.

Display content dynamically through template tags

The Anqi CMS template engine is similar to Django syntax, using concise tags ({% ... %}) and variables ({{ ... }}To retrieve and display data. To implement a dynamic dropdown menu, we will mainly usenavList/categoryListandarchiveListthese tags.

Assuming our goal is to display all product categories under the main navigation item "Products" in the dropdown menu, and be able to list several of the latest products directly under each product category.

First, in your template file (usuallybase.htmlorheader.htmldefine the navigation part here), we can organize the code in this way:

{# 假设我们正在处理一个名为 'navList' 的导航列表，它通过 navList 标签获取 #}
<ul class="main-nav">
    {% navList navList with typeId=1 %} {# typeId=1 通常指默认导航类别 #}
    {%- for item in navList %}
    <li class="nav-item {% if item.IsCurrent %}active{% endif %}">
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %} {# 检查当前导航项是否有子导航（二级菜单） #}
        <ul class="nav-dropdown">
            {%- for inner in item.NavList %} {# 遍历二级导航项 #}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {% if inner.PageId > 0 %} {# 如果二级导航项关联了一个分类ID #}
                    {# 获取该分类下的产品列表。moduleId='2' 假设为产品模型ID #}
                    {% archiveList products with type="list" categoryId=inner.PageId moduleId="2" limit="5" %}
                    {% if products %}
                    <ul class="category-product-list">
                        {% for product in products %}
                        <li><a href="{{product.Link}}" title="{{product.Title}}">{{product.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% else %}
                    <p class="no-content">暂无相关产品</p>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

The logic of this code is as follows:

  1. {% navList navList with typeId=1 %}This line of code will retrieve all the main navigation items set in the background.typeId=1It usually corresponds to the default navigation.
  2. {%- for item in navList %}We iterate over each main navigation item.item.TitleIs the navigation name,item.Linkis the link address.
  3. {%- if item.NavList %}This is the key.item.NavListThe attribute will include all secondary navigation items under the main navigation item (if set in the backend). If there is one, a dropdown menu container will be rendered (for examplenav-dropdown)
  4. {%- for inner in item.NavList %}：We continue to traverse these second-level navigation items.inner.Titleandinner.LinkIs the name and link of the second-level navigation.
  5. {% if inner.PageId > 0 %}：If this second-level navigation item is explicitly linked to a category in the background（inner.PageIdThat is the category ID, then we can use this ID to retrieve the content.
  6. {% archiveList products with type="list" categoryId=inner.PageId moduleId="2" limit="5" %}: This is the core of dynamically obtaining the list of articles or products.
    • productsWe define a variable name for the list of content obtained.
    • type="list"It indicates getting a regular list instead of a paginated list.
    • categoryId=inner.PageIdIt specifies which category of content to get.
    • moduleId="2": Very important, here it clearly tells the system that we want to get the content under the "product" model (usually the "article" model ID is 1, the "product" model ID is 2, the specific ID can be confirmed in the "content model" on the back end). If you want to display articles, change it to the corresponding one.moduleId.
    • limit="5": Limit each category to display only 5 of the latest posts to avoid the dropdown menu being too long and affecting user experience.
  7. {% for product in products %}Finally, we traverse and display these obtained product titles and links. If there is no content,{% else %}the part will display "No related products available."

Further expansion: display articles/products under subcategories

If your requirement is to display a subcategory of a main category first in the dropdown menu, and then click on the subcategory to enter its article/product list, then you can adjustarchiveListthe calling method, or atitem.NavListpass throughinner.PageIdcall againcategoryListto get a deeper level of classification, and then call under these classificationsarchiveList.

For example, under a main navigation "solutions", we want to list the subcategories "industry solutions" and "technology solutions", and also display the titles of the下属 articles next to each subcategory:

`twig

    {% navList navList with typeId=1 %}
{%- for item in navList %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
    <a href="{{ item.Link }}">{{item.Title}}</a>
    {%- if item.NavList %}
    <ul class="nav-dropdown">
        {%- for inner in item.NavList %}
        <li>
            <a href="{{ inner.Link }}">{{inner.Title}}</a>
            {% if inner.PageId > 0 %}
                {# 这里，我们首先获取 inner 关联分类的子分类 #}
                {% categoryList subCategories with parentId=inner.PageId %}
                {% if subCategories %}
                <ul class="sub-category-list">
                    {% for subCat in subCategories %}
                    <li>
                        <a href="{{ subCat.Link }}">{{subCat.Title}}</a>
                        {# 在每个子分类下，再获取其文章列表 #}
                        {% archiveList articles with type="list" categoryId=subCat.Id moduleId="1" limit="3" %}
                        {% if articles %}
                        <ul class="articles-in-subcat">
                            {% for article in articles %}
                            <li><a href="{{article.Link}}" title="{{article.Title}}">{{article.Title}}</a></li>
                            {% endfor %}