As an experienced CMS website operation person, I know that a clear and efficient navigation system is important for a website, as it not only directly affects user experience, but is also an indispensable part of search engine optimization (SEO).In Anqi CMS, setting the navigation link as a first or second-level menu is a relatively simple but powerful operation that can help you flexibly build the structure of the website.

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

Understand the navigation management of 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 categories' and 'navigation links'.The navigation category allows you to create multiple independent menus, such as top navigation, footer navigation, sidebar navigation, and so on.And the navigation links are the specific items that make up these menus, forming first and second-level menus through hierarchical relationships.

Access the navigation settings interface

To start setting up navigation, you need to log in to the Anqi CMS backend management system.In the navigation menu on the left, click on 'Background Settings' first, then select 'Navigation Settings' to enter the navigation management interface.Here, you will see the existing navigation categories and all the navigation links under them.

Manage navigation categories: Create multiple independent menus

The AnQi CMS provides a default "default navigation" category.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 creating, this new category will act as an independent container, and you can add links that are completely different from the top navigation.In the website template, by specifying differenttypeIdParameters, 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 includes multiple configuration items, among which the 'parent navigation' is the key to determining its level (primary or secondary).

First, you need to set a "display name" for the navigation link, which is the text that users see on the front-end page.If needed, you can also fill in the "sub-title name" or "navigation description" to provide more information for navigation or to achieve 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 entry in the website main menu, that is, a first-level menu, then please make sure to select in the "Parent Navigation" option.Top navigationThis means it does not belong to any other linked submenu.
  • Create a secondary menu:If you want a link to display as a submenu of a top-level menu item, that is a secondary menu, then in the 'Parent Navigation' option, please select from the dropdown listthe correspondingFirst-level menu item. It will become a sub-item under the first-level menu you select.

The Anqi CMS currently supports up to two levels of navigation links, 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 website's 'home link' 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 links:You can select an existing category or a single page from the website as a navigation link. This is very convenient, as it ensures the accuracy and maintainability of the links.
  • External links:Provided the greatest flexibility, you can manually enter any URL address on-site or off-site. 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 order of navigation links in the menu by the size of the number, the smaller the number, the closer to the front.

Integrate navigation in the template: display the menu on the front page

After the navigation links are configured in the background, they still need to be rendered on the front page 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 %}The tag will fetch all the navigation links you have configured in the background. The outermostforLoop through each first-level menu itemitemRepresents 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 traverse and display all second-level menu items.item.IsCurrentIt can be used to determine if the current link is the page the user is visiting, in order to add.activeStyle.

If you have created multiple navigation categories, such as "Footer Navigation", you can specify the call bytypeIdparameters, 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:

  • Clear naming: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 page content.
  • The hierarchy should not be too deep:Although Anqi CMS supports secondary menus, too deep navigation levels can increase the cognitive burden on users. It is recommended to keep it concise, with no more than two to three levels.
  • Clear the cache after publishing:After any modification is made 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 refresh the page forcibly (usually Ctrl+F5 or Cmd+Shift+R) or clear the browser cache.
  • Regularly check:With the update of the website content, navigation links may become invalid.It is recommended to regularly check the validity of all navigation links to avoid dead links, which is不利 for both user experience and SEO.

By following these steps and **practical experience, you can easily create and manage navigation menus with primary and secondary levels in Anqi CMS, providing your website visitors with intuitive and efficient browsing experiences.

Frequently Asked Questions (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 sub-menus.This means you cannot directly add a third-level submenu to a secondary menu through the backend interface.If your business indeed needs a more complex, multi-level navigation structure, it usually requires more advanced customization through front-end template code, but this goes beyond the direct configuration scope of the background.

  2. I modified the navigation link, but the front 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 update the front-end display immediately.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 clear the system cache and force refresh the page (press Ctrl+F5 on Windows, or Cmd+Shift+R on macOS) or clear the browser cache to ensure that 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.On the website template, throughnavListlabel'stypeIdParameters (or by assigning a unique identifier for each category in the background navigation settings), you can flexibly call and display different navigation menus.