How to create the main navigation of the website in AnQi CMS?

The website's main navigation is the key for users to browse and understand the website structure.It guides users to access important content, optimizes user experience, and plays an important role in search engine optimization (SEO).AnQi CMS provides flexible and powerful navigation management functions, allowing users to easily create, edit, and publish the main navigation that meets their business needs.

Overview of AnQi CMS navigation management function

The AnQi CMS backend navigation settings module centrally manages the website's navigation links.This module not only supports configuring default top navigation, but also allows users to create custom navigation locations according to their actual needs, such as footer navigation or sidebar navigation.The system supports up to two levels of navigation links, namely the primary navigation and the first-level sub-navigation, providing a clear structural hierarchy for the website.

Create custom navigation categories

In addition to the navigation categories provided by the system by default, users can create new navigation categories according to business needs.For example, if the website needs an independent footer navigation area, a new category named 'Footer Navigation' can be added in the navigation settings.This classification management method allows navigation content in different regions to be independently configured and called, thereby increasing the flexibility of the website layout and avoiding the situation where all navigation items are squeezed into the same default navigation list.

Add and configure navigation links

Adding a navigation link is the core step in building the main navigation of a website.In the AnQi CMS backend navigation settings interface, users can configure multiple information items for each navigation link to ensure correct display and functionality on the front page.

FirstlyParent navigationThe setting allows the user to set the current link as a top-level navigation (first-level navigation) or to belong to an existing first-level navigation, thereby forming a second-level navigation.The AnQi CMS currently supports this two-level navigation structure, which can meet the hierarchical needs of most websites.

secondly,display nameIs the navigation link text displayed on the front page, which can be named flexibly according to actual needs and does not necessarily need to be consistent with the link content. If it is necessary to display bilingual titles for navigation items or provide additional explanations, you canSubheading nameEnter the corresponding content in the field. At the same time,Navigation descriptionThe field is used to provide a brief introduction for navigation items. These descriptions can be called in the front-end template to display, providing users with more contextual information.

InLink TypeIn terms, AnQi CMS supports various options to meet different content needs: Built-in links: Include links to the website homepage, article model homepage, product model homepage, and other custom content model homepages, making it convenient for users to quickly specify common entry points. Category page link: Users can select a document category or single page created from the backend as a navigation link, which allows the actual content in the content management system to be directly used as a navigation item.External links: Allow users to add any URLs within or outside the site as navigation links, providing great flexibility, and can link to third-party services or external resources.

Finally, by settingDisplay orderthe number to determine the order of navigation link arrangement, the smaller the number, the earlier the display position. Currently, this feature is sorted by number and does not support drag operations.

Navigate the main navigation in the front-end template

The display of the main navigation ultimately depends on the configuration of the front-end template file. Anqi CMS uses specialnavListLabel to retrieve and render the navigation list. Developers can use it in template files.{% navList navs %}The tag to retrieve navigation data. This tag will return an array object containing navigation items (for example namednavs), and then you can iterate throughnavsvariable to output the navigation links.

An example of a typical two-level navigation rendering code that demonstrates how toitem.NavListflexibly display or hide sub-navigation menus based on

{% 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 %}

This code will generate an unordered list containing top-level navigation items.If a top-level navigation item has sub-navigation, a nested definition list (dl) will be generated to display its secondary sub-navigation items.

Advanced application examples of navigation

The navigation tags of AnQi CMS also support more complex application scenarios.For example, you can directly display the list of popular products under a category in the secondary menu of the main navigation, or display the list of subcategories under the category.

When you need to display a list of products in a specific category in the navigation dropdown menu, you can combine it within the second-level navigation itemarchiveListto call the tag. According to the second-level navigation item'sPageId(If the navigation item is associated with a category or page), utilizingarchiveListlabel and specifycategoryIdto obtain the corresponding product documentation, thus directly displaying the content in the navigation.

Similarly, if you want to display the subcategories of a category in the navigation dropdown menu, you can use the secondary navigation items.PageIdthrough.categoryListThe label retrieves and displays its subcategory list. This function of embedding content lists or category lists into navigation makes the navigation not only a collection of links but also an entrance for content display, greatly enhancing the efficiency and experience of users discovering content.

Notes for creating and managing navigation.

When creating and managing the website's main navigation, make sure the navigation structure is logical, in line with user browsing habits, so that users can easily find the information they need.Considering SEO factors, it should be avoided to use too deep navigation levels to facilitate search engine crawling and understanding of the website structure.Regularly check the validity of all navigation links to prevent dead links, as this not only affects user experience but also harms the website's SEO performance.In addition, if the website has enabled multi-site management functionality, please pay attention when calling the navigation tagsiteIdThe use of parameters to ensure the navigation data of the correct site is called. The setting of the navigation display order should be cautious to ensure that the navigation items are arranged as expected.

Frequently Asked Questions

• How many levels of website main navigation does AnQi CMS support?AnQi CMS currently supports up to two levels of website main navigation, namely level one main navigation and level one sub-navigation.

• How to direct navigation links to a specific article category or single page?When adding or editing navigation links in the Anqi CMS backend, select 'Category Page Link' in the 'Link Type' option, and then you can select a created article category or single page as the navigation target from the dropdown menu.

• Can I directly display the list of articles under a certain category in the navigation dropdown menu?Yes. You can combine it with the front-end template,navListTags andarchiveListto achieve this feature. InnavListWhen traversing the second-level navigation items, use thePageIdparametersarchiveListtags to specify the corresponding category ID and call the article or product document list under the category.