As an experienced CMS website operation person, I know that clear and intuitive website navigation is crucial for improving user experience and search engine optimization.AnQiCMS provides a powerful and flexible navigation management feature, making it easy to create menus for the top, bottom, or sidebar of your website.This article will detail how to create and manage different types of website navigation in AnQiCMS.

Understand the navigation core concept of AnQiCMS

In AnQiCMS, the construction of website navigation mainly revolves around two core concepts: Navigation Categories and Navigation Links.Navigation categories are used to distinguish different navigation areas on a website, such as 'top navigation', 'footer navigation', or 'sidebar navigation'.Each category contains one or more navigation links, which constitute the menu items that users actually click on, pointing to different pages or external resources on the website.

Create and manage navigation categories

First, you need to enter the AnQiCMS backend management interface, and go to the "Navigation Settings" page through the "Backend Settings" menu.Here, you will see the "Navigation Category Management" section.The system will provide a default navigation category by default, but it is recommended to create new navigation categories according to your actual needs for better website structure organization.

To add a new navigation category, just click the "Add Navigation Category" button.For example, if you plan to create a menu at the bottom of the website, you can add a new category named "Footer Navigation".After creating a category, you can independently configure navigation links for this category, ensuring that the menu content in different areas of the website does not interfere with each other and is managed in an orderly manner.

Configure the detailed steps of navigation links

In the "Navigation Settings" page, you can add and edit specific menu items for the navigation categories you have created. Each navigation link provides a rich set of configuration options to meet diverse website navigation needs:

  • Parent Navigation:AnQiCMS supports up to two-level navigation links.If you want to create a main menu item, please select 'Top Navigation' as its parent.If the link is a secondary menu item, select its parent primary menu from the dropdown list.This makes creating structured multi-level menus simple and intuitive.
  • Display Name:This is the menu text that the user sees on the website frontend.You can freely modify it as needed, without having to match the page title linked, in order to optimize user experience and the conciseness of expression.
  • Subheading Name:Some designs may require a subtitle or auxiliary text to be displayed below the main title. By filling in this item, a navigation style with double titles can be realized in the frontend template.
  • Navigation description:This is an optional field that can provide a brief description or hint for navigation links, usually used to display tooltips or more detailed introductions when hovering over.
  • Link type:AnQiCMS provides three flexible link types:
    • Built-in Links:This type allows you to easily link to fixed built-in pages of the website, such as 'Home Link' and 'Article Model Home Page', 'Product Model Home Page', and other custom content model home pages.
    • Category page link:You can directly select any content category or independent single page created on the website as a navigation link. This greatly simplifies the process of integrating website content into navigation.
    • External links:If you need to link to external resources or custom in-site URLs, you can select this type and enter the complete URL address.
  • Display Order:Through entering numbers to control the arrangement order of navigation links.The smaller the number, the earlier the link is displayed in the menu.Currently, AnQiCMS uses numerical sorting, and it may support drag-and-drop sorting in the future to provide a more intuitive operation experience.

Invoke navigation in the website template

配置好后台导航后，关键一步是在网站的前端模板中正确地调用和显示这些导航。AnQiCMS提供了功能强大的 EnglishnavListThe template tag is used to achieve this goal.

You usually find the website's general header (header) or footer template files (such as/template/您的模板目录/partial/header.htmlor/template/您的模板目录/bash.html) usednavListtags. When using them, you need to specifytypeIdParameters are used to call specific navigation category.typeIdvalue corresponds to the ID of each category you create in the "Navigation Category Management" section of the backend. If not specified, the default will be called.typeId=1（i.e. “Default Navigation”）。

Here is an example of calling a two-level navigation in a template：

{% navList navs with typeId=1 %} {# 假设1是您的顶部导航类别ID #}
<ul>
    {%- for item in navs %} {# 循环遍历一级导航项 #}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {%- if item.NavList %} {# 判断是否存在二级导航 #}
            <dl> {# 二级导航通常用dl/dd或ul/li结构 #}
                {%- 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 %}

This code snippet will first call all first-level navigation links under the navigation category with ID 1. Then, for each first-level navigation link, it will check if there is a sub-navigation link.item.NavListIf it exists, it will further loop to display the second-level navigation links.Through CSS styles, you can render these structures into beautiful dropdown menus, top-level category menus, or footer link groups.

AnQiCMS's template mechanism also supportsincludeandextendsetc auxiliary tags, you can break complex navigation structures into smaller reusable template fragments, and then throughincludeLabel it to introduce it to the main template, thus keeping the template code tidy and easy to maintain.

Optimize navigation display and user experience

High-quality website navigation can not only help users quickly find the information they need, but also effectively guide search engine spiders to crawl website content, improving SEO effectiveness.AnQiCMS's navigation management feature supports multi-template switching, including adaptive, code adaptation, and PC+mobile independent site mode, which means you can design different layouts and styles for navigation according to different devices and display requirements, ensuring a** user experience on any device.Through reasonable planning and detailed configuration of navigation, you can significantly improve the usability and discoverability of the website.

In summary, AnQiCMS provides a set of intuitive and powerful navigation creation and management tools.From defining different navigation categories, to finely configuring the display names, link types, and order of each navigation link, to the flexible template calling mechanism, every step aims to help website operators efficiently build a beautiful and practical website navigation system, thereby enhancing user satisfaction and the overall performance of the website.

Common Questions (FAQ)

Does AnQiCMS support creating navigation menus with more than two levels?

Currently, the AnQiCMS backend navigation link settings support up to two levels of navigation (that is, a primary menu and its sub-menus). If you need a deeper navigation structure, you may need to customize templates and combine other content list tags (such ascategoryListThe link to generate more content within the secondary menu item dynamically, but this will require more complex template logic to achieve a visual three-level or multi-level effect.

Can I adjust the order of navigation links by dragging?

The display order of navigation links in the current version of AnQiCMS is controlled by numerical values. The smaller the number, the higher the sorting order. You need to