As a senior CMS website operation personnel for security, I am well aware of the importance of a clear and efficient navigation system for a website. It not only directly affects user experience but is also an indispensable part of search engine optimization (SEO).In the AnQi CMS, setting the navigation link to a first or second-level menu is a relatively simple but powerful operation, which can help you flexibly build the structure of the website.

Next, I will elaborate on how to set up and manage navigation links in the Anqi CMS to achieve the display of first and second-level menus.

Understanding navigation management in Anqi CMS

The navigation settings of Anqi CMS are designed to provide high flexibility, allowing you to easily build menu structures that meet different needs.The core lies in the concepts of 'navigation category' and 'navigation link'.Navigation categories allow you to create multiple independent menus, such as top main navigation, footer navigation, sidebar navigation, etc.The navigation links are the specific entries that make up these menus, which form the first and second-level menus through a hierarchical relationship.

Access the navigation settings interface

To start setting navigation, you need to log in to the AnQi CMS backend management system.In the navigation menu on the left, click "Backend SettingsHere, you will see the existing navigation categories and all the navigation links under them.

Manage navigation categories: Create multiple independent menus

The default navigation category will be provided by 'AnQi CMS' by default.If you need to set different menus for different locations on the website (such as headers and footers), you can add new categories in the "Navigation Category Management" section.

For example, you can add a new category named “Footer Navigation”.After creation, this new category will be a separate container, and you can add links that are completely different from the top navigation.typeIdParameters, to call different navigation categories.

Create and edit navigation links: Build first and second-level menus

Under the selected navigation category, you can add new navigation links or edit existing links.Each navigation link contains multiple configuration options, where 'Parent Navigation' is the key to determining its level (primary or secondary).

Firstly, you need to set a "Display Name" for the navigation link, which is the text that users see on the front-end page.If necessary, you can also fill in "Subtitle Name" or "Navigation Description" to provide more information for navigation or to achieve a dual title display.

Set menu hierarchy is a core operation:

  • Create a first-level menu:If you want a link to display as a top-level item in the main menu of the website, that is, a first-level menu, then be sure to select in the "Parent Navigation" option,Top-level navigationThis means it does not belong to any sub-menu of any other link.
  • Create a second-level menu:If you want a link to display as a submenu of a top-level menu item, that is, a second-level menu, then please select from the dropdown list under the 'Parent Navigation' optioncorrespondingFirst-level menu item. This will become a sub-item under the first-level menu you select.

The Anqi CMS currently supports up to two levels of navigation links natively, that is, a main menu item can have a dropdown submenu.

Select the link type:

You need to specify the resource type for each navigation link:

  • Built-in Links:This type includes the 'home link' of the website and the home pages of various content models you define (such as article models, product models).After selection, the system will automatically fill in the corresponding link address.
  • Category page link:You can choose an existing category or a single page from the website as a navigation link. This is very convenient, ensuring the accuracy and maintainability of the link.
  • External links:Provided the greatest flexibility, you can manually input any on-site or off-site URL address. This is very useful for linking to other websites, special pages, or custom features.

Finally, the "Display Order" field allows you to adjust the arrangement of navigation links in the menu by the numerical size. The smaller the number, the earlier it is positioned.

Integrate navigation in the template: Display the menu on the front end

After the navigation links are configured in the background, they still need to be rendered on the front end of the website using template tags. Anqi CMS providesnavListtags to complete this task.

For example, in a typical website header templatepartial/header.htmlYou can use it like thisnavListtag to display your navigation menu:

{% 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> {# 这里可以使用ul或其他HTML标签来包裹二级菜单 #}
                {%- 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,{% navList navs %}tag will retrieve all navigation links configured in the back-end. The outer layer offorLoop through the first-level menu items, eachitemrepresents a first-level navigation link.{% if item.NavList %}This line of code will check if there is a submenu under the current first-level menu. If there is, the innerforLoop{%- for inner in item.NavList %}It will iterate and display all second-level menu items.item.IsCurrentIt can be used to determine whether the current link is the page the user is visiting, so that it can be added.activestyles can be added.

If you have created multiple navigation categories, such as “Footer Navigation”, you can specify the calltypeIdby parameters, for example{% navList footerNavs with typeId=2 %}(assuming the Footer Navigation ID is 2).

Operation points and **practice

When setting up navigation, there are several key points to note:

  • Name clearly:The display name of the navigation link should be concise and clear, which is convenient for users to understand and also helps search engines to capture and understand the content of the page.
  • The hierarchy should not be too deep:Although the Anqi CMS supports secondary menus, a deep navigation hierarchy can increase the user's cognitive burden. It is recommended to keep it concise, with no more than two to three levels.
  • Clear cache after publishing:After any modification to the navigation settings in the AnQi CMS backend, please make sure to go to the "Update Cache" feature to clear the system cache to ensure that the front-end page reflects the latest changes in a timely manner.At the same time, your browser may also have local cache, it is recommended to force refresh the page (usually Ctrl+F5 or Cmd+Shift+R) or clear the browser cache.
  • Regular Inspection:With the update of the website content, navigation links may become invalid.Suggest checking all navigation links regularly to avoid broken links, which is detrimental to user experience and SEO.

Through these steps and **practice, you can easily create and manage navigation menus with first and second-level layers in the Anqi CMS, providing your website visitors with intuitive and efficient browsing experiences.

Common Questions and Answers (FAQ)

  1. How to create a multi-level (more than two levels) navigation menu?The Anqi CMS backend management interface currently supports up to two levels of navigation, that is, one main menu and its corresponding submenus.This means you cannot add a third-level submenu directly through the backend interface for a secondary menu.If your business indeed requires a more complex, navigation structure exceeding two levels, it usually requires more advanced customization through front-end template code, but this goes beyond the direct configuration scope of the backend.

  2. I modified the navigation link, but the front-end page did not update, why is that?This is usually due to caching.After modifying the navigation configuration in the AnQi CMS backend, the system may not immediately update the front-end display.You need to go to the "Update Cache" feature in the background to clear the system cache.In addition, your browser may also store old page caches. It is recommended to force refresh the page (press Ctrl+F5 on Windows, or Cmd+Shift+R on macOS) or clear the browser cache after clearing the system cache to ensure you see the latest changes.

  3. Can I set different navigation menus for different areas of the website (such as the top, bottom, sidebar)?Yes, AnQi CMS fully supports this.Through the "Navigation Category Management" feature, you can create multiple independent navigation categories.For example, you can create a "Footer navigation" category and a "Sidebar navigation" category, and add their respective links to them.navListTagstypeIdParameters (or by assigning a unique identifier to each category in the background navigation settings), you can flexibly call and display different navigation menus.