In website operation, a clear and efficient navigation system is undoubtedly the cornerstone of user experience and search engine optimization.A well-designed navigation not only guides users to find the information they need quickly but also helps search engines better understand the structure of the website.In AnQiCMS, we have powerful tools to flexibly configure and display multi-level navigation lists to meet diverse website needs.

Step 1: Flexibly configure the navigation menu in the background

The navigation management feature of AnQiCMS is very intuitive. First, we will set up the core menu structure in the "navigation settings" backend.

Navigation Category ManagementIt is the key to implementing multiple navigation menus. The system provides a default "default navigation" by default, but if our website needs top main navigation, bottom links, sidebar menus, and other navigation at different locations, it can be managed separately by adding new navigation categories.For example, we can create a new category named "Footer Navigation" and configure an independent menu item for it.This way, navigation at different positions can perform their duties without interfering with each other.

InNavigation link settingsIn Chinese, we can specify detailed information for each menu item. This includes:

  • display name: The menu text displayed on the frontend by the user.
  • Subheading name: If you need bilingual titles or additional hints, you can fill them in here.
  • Navigation description: Provide a brief description for the menu item, which can be called in the template.
  • Link Type: AnQiCMS offers a variety of flexible link methods. We can choose.Built-in link(such as the homepage, specific model homepage),Category page link(Linked to an existing article category or single page), orExternal link(Pointing to any URL within or outside the site).
  • Display orderBy adjusting the size of the number, you can control the arrangement order of menu items, with smaller numbers appearing earlier.

ImplementationMulti-level navigationThe essence lies in the "parent navigation" field. When creating menu items, you can choose whether it belongs to the "top navigation" as a main menu item;Or choose it to belong to an existing menu item, thereby forming a second-level or even multi-level dropdown menu.AnQiCMS supports up to two-level dropdown navigation links, which is enough to meet the navigation needs of the vast majority of websites, while avoiding the user confusion that may be caused by overly complex hierarchical structures.

Step two: Call the navigation list cleverly in the template.

After the background configuration is completed, the next step is to display these navigation lists in the website template.AnQiCMS's template engine adopts a tag syntax similar to Django, making it very convenient to call data.

To display the navigation list, we mainly usenavListtags. For example, we can call the main navigation like this:

{% navList navs %}
    <ul>
        {%- for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {%- if item.NavList %} {# 判断是否存在子导航 #}
                <dl>
                    {%- for inner in item.NavList %} {# 循环子导航 #}
                        <dd class="{% if inner.IsCurrent %}active{% endif %}">
                            <a href="{{ inner.Link }}">{{ inner.Title }}</a>
                        </dd>
                    {% endfor %}
                </dl>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

In the above code snippet,navList navsAssign the navigation data configured on thenavsbackend to a variable. Then, we go through the firstforLoop through the main menu items (item)item.Linkanditem.TitleOutput the link address and display name separately.

The key to realizing multi-level navigation lies in{%- if item.NavList %}This judgment. If the current main menu item has a sub-navigation (i.e.)item.NavListis not empty), we will nest another one.forLoop to iterate through these sub-navigations(inner) Thus, you can easily build a two-level or even more navigation structure (based on backend configuration).

It is worth mentioning,{% if item.IsCurrent %}active{% endif %}This line of code is very practical, it will judge whether the current menu item matches the page the user is visiting. If it matches, it will addactiveA class, we can then use CSS to highlight the navigation item currently on the page, greatly enhancing the user experience.

Step 3: Dynamically enrich navigation content

The strength of AnQiCMS lies not only in displaying static navigation links, but it can also dynamically load articles, products, or subcategory lists in the dropdown menu of the navigation, greatly enriching the practicality of the navigation.

Example 1: Display the latest articles or product lists under the category in the navigation dropdown

Assuming we have a "Product Center" main navigation, when the user hovers over it, we want to directly display the list of popular products under the category in the dropdown menu. We can achieve this by:

<ul>
    {% navList navList with typeId=1 %} {# 假设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 %} {# 如果二级导航关联了分类/页面 #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 调用该分类下的最新8篇产品 #}
                    {% if products %}
                    <ul class="nav-menu-child-child">
                        {% for product in products %}
                        <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

In this example, when the loop reaches the second-level navigationinnerwe useinner.PageIdObtain the category ID it is associated with, then usearchiveListThe tag, based on the category ID, dynamically called up to 8 related product articles' titles and links, displayed in the dropdown menu.

Example two: Display the subcategories of the category in the navigation dropdown

A common requirement is that the main navigation displays the first-level categories, and after clicking or hovering, the drop-down menu displays all the second-level categories under the first-level category.

<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 categories with parentId=inner.PageId %} {# 调用该分类的下级分类 #}
                    {% if categories %}
                    <ul>
                        {% for category in categories %}
                        <li>
                            <a href="{{ category.Link }}">{{category.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

Here, we also useinner.PageIdasparentIdParameter, passcategoryListTag fetches and displays all subcategories under the specified category, building a deeper level of category navigation structure.

Practical skills and precautions

  • Keep it concise.: Although it is possible to build multi-level navigation, it is usually recommended not to exceed three levels for user experience. Too much nesting can easily confuse users.
  • UtilizeIsCurrent: Must useitem.IsCurrentAdd a special style to the currently active navigation item to let users always be clear about their position on the website.
  • Separate backend management and templates.：AnQiCMS separates the configuration of navigation from the front-end display logic, which means we can adjust the navigation content and structure at any time in the background without modifying the template code, greatly improving operational efficiency.
  • Performance considerationIf too much dynamic navigation content is loaded, it may have a slight impact on page loading speed. When designing, consider caching popular content or limiting the number of loads.

By using these flexible navigation configurations and template tags provided by AnQiCMS, we can easily build a website navigation system that meets various complex requirements, providing users with a smooth browsing experience and laying a solid foundation for the website's SEO performance.

Frequently Asked Questions (FAQ)

Q1: How to create multiple navigation menus (such as top main navigation and bottom footer navigation)? A1: In AnQiCMS backend, go to the 'Navigation Settings' page, and you will see the 'Navigation Category Management' area.Click "Add Navigation Category", enter a new category name (for example, "Footer Navigation"), and save to add an independent menu item for this new category.