In web design, a clear and easy-to-use navigation menu is crucial for enhancing user experience and the professionalism of the website.AnQiCMS (AnQiCMS) provides the convenience of dynamically building multi-level navigation menus in front-end templates with its flexible template engine and powerful content management features.Understand the backend configuration and frontend template call logic of its navigation system, which is the foundation for achieving this goal.

Anqi CMS Overview of Navigation System

The navigation function design of Anqi CMS is very practical, it closely combines the creation of navigation menus with content display.In the backend, we can configure the navigation structure through an intuitive interface; on the frontend, by using its tag system based on the Django template engine syntax, it can dynamically render these menus in a highly flexible manner.The entire process is designed to minimize technical complexity, allowing content operators and frontend developers to easily get started.

Backend Management: Building Navigation Menu

Firstly, we need to set up the navigation menu in the backend management interface of the Anqi CMS. This is usually completed under the 'Backend Settings' section, specifically in the 'Navigation Settings'.

  1. Navigation category management:English CMS allows the creation of multiple navigation categories, such as "Top Navigation", "Bottom Navigation", "Sidebar Navigation", and so on.This allows us to customize independent navigation structures for different areas of the website, greatly enhancing the flexibility of the website layout.By adding new navigation categories, exclusive menus can be created for specific display locations (such as the footer).
  2. Navigation Link Settings:In the selected navigation category, we can add specific navigation links.Each link can be set to display a "Display Name
    • Built-in Links:Containing "Home link
    • Category page link:This can be directly associated with a document category that has already been created or a single page. This means that we can let the navigation menu items directly point to a product category page or an independent page like 'About Us'.
    • External links:Provided with great freedom, it can link to any custom URL within the site, even to other websites outside. It is worth noting that the Anqi CMS currently supportsup to two levelsThe navigation link.This means we can create main menu items and their direct sub-menu items.During the setup process, the system will also provide an option for 'display order' for each menu item, allowing us to finely control the arrangement of the menu.

Front-end Template: Dynamic Rendering of Multi-Level Navigation

Dynamic display of multi-level navigation on the front-end mainly relies on the security provided by the CMS.navListLabels and basic loop and conditional judgment statements. The template files of Anqi CMS use.htmlsuffix, static resources are usually stored in/public/static/Table of contents, and supports syntax similar to Django tags ({{变量}}for variable output,{% 标签 %}and{% end标签 %}for logical control).

  1. InvokenavListTags: navListLabels are the core of obtaining navigation data. It allows us to obtain navigation data based on the "navigation category ID" set on the backend.typeIdTo get the corresponding navigation list. For example, if your 'Top Navigation' category ID is 1 (usually it is 1 by default), you can call it like this:

    {% navList navs with typeId=1 %}
    {# 在这里循环输出导航菜单 #}
{% endnavList %}

    Here are thenavsIt is a variable name we define, which will contain all the navigation menu items under this category.

  2. Traverse the first-level navigation menu: navsThe variable is an array object, and we need to useforLoop through it to display the first-level navigation menu. Eachitem(or the loop variable you define) includes various properties of the navigation menu items,item.Title(Display Name),item.Link("link address"), anditem.IsCurrent(Determine whether it is the current page link).

    <ul class="main-nav">
    {% for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
        </li>
    {% endfor %}
</ul>

    item.IsCurrentThis property is very useful, it allows us to easily add CSS styles to the navigation menu item corresponding to the current visited page, for example, adding aactiveclass to provide visual feedback.

  3. Render the second-level navigation menu:As the Anqi CMS supports two-level navigation,itemthe object may contain a namedNavListsub-navigation list. We need to perform a conditional check to verifyNavListIs it exist, if it exists, then nest oneforLoop to render the secondary menu.

    <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 %} {# 判断是否存在子导航 #}
            <ul class="sub-nav">
                {% for inner in item.NavList %}
                    <li class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </li>
                {% endfor %}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>

    Thus, a basic multi-level navigation menu is dynamically displayed.

Extended Application: Dynamic content in the navigation menu

The strength of AnQi CMS also lies in its ability to further integrate dynamic content into the navigation menu, such as displaying the latest articles or products under the category in the sub-menu. This requires combiningarchiveListorcategoryListTags implemented.

  1. Show documents under categories in the navigation menu:If your secondary navigation link goes to a category, you want to display the latest few articles or products of that category below the menu item. When configuring the navigation link on the backend, select 'Category Page Link' and associate it with a specific category, then the navigation item'sinner.PageIdThe attribute will store the ID of this category. We can use this ID to call related documents.

    {# ... 二级导航循环内部 ... #}
{% if inner.NavList %} {# 判断是否存在子导航 #}
    <ul class="sub-nav">
        {% for inner in item.NavList %}
            <li class="{% if inner.IsCurrent %}active{% endif %}">
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {# 在这里调用与该分类相关的文档 #}
                {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                {% if products %}
                <ul class="nav-content-list">
                    {% for product in products %}
                    <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endarchiveList %}
            </li>
        {% endfor %}
    </ul>
{% endif %}
{# ... #}

    This code will be placed under each secondary navigation item ifinner.PageIdThe associated category ID exists, and list the 8 latest documents (product or article, depending onarchiveListofmoduleIdSet).

  2. Display subcategories in the navigation menu:Another common requirement is to display the deeper subcategories of the category it belongs to under the secondary navigation items. This can be achieved by callinginner.PageId(if it is associated with a category) again.categoryListto achieve.

    English translation: `twig {# … Secondary navigation loop inside … #} {% if inner.NavList %} {# Check if there is a sub-navigation #}

    <ul class="sub-nav">
    {% for inner in item.NavList %}
        <li class="{% if inner.IsCurrent %}active{% endif %}">
            <a href="{{ inner.Link }}">{{inner.Title}}</a>
            {% if inner.PageId > 0 %} {# 确保PageId有效，且通常是一个分类ID #}
                {% categoryList subCategories with parentId=inner.PageId %}
                {% if subCategories %}
                <ul class="nav-sub-categories">
                    {% for subCat in subCategories %}