The main navigation of the website is the key to users browsing and understanding the website structure.It guides users to access important content, optimizes user experience, and plays a significant role in search engine optimization (SEO).AutoCMS provides flexible and powerful navigation management features, allowing users to easily create, edit, and publish main navigation that meets their business needs.
Anqi CMS navigation management function overview
The background navigation setting module of AnQi CMS centrally manages the navigation links of the website.This module not only supports configuring default top navigation, but also allows users to create customized navigation positions according to their actual needs, such as footer navigation or sidebar navigation.The system supports up to two levels of navigation links, that is, one-level main navigation and one-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 based on their business needs.For example, if a website needs a separate footer navigation area, you can add a category named "Footer Navigation" 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 website layout and avoiding the situation where all navigation items are crammed into the same default navigation list.
Add and configure navigation links
Adding navigation links is the core step in building the main navigation of a website.In the navigation settings interface of the AnQi CMS backend, users can configure multiple pieces of information for each navigation link to ensure correct display and functionality on the front page.
FirstlyParent NavigationThe setting, the user can choose to set the current link as a top-level navigation (level 1 navigation), or to affiliate it under an existing level 1 navigation, thereby forming a level 2 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 flexibly named according to actual needs and does not necessarily need to be consistent with the link content. If you need to display bilingual titles for navigation items or provide additional explanations,Subtitle 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 and displayed in the front-end template, providing more contextual information to the user.
InLink TypeOn the other hand, AnQi CMS supports a variety of options to meet different content needs: Built-in links: Include links to the homepage of the website, the homepage of the article model, the homepage of the product model, and other custom content model homepages, making it convenient for users to quickly specify frequently used entry points. Category page link: Users can select a navigation link from the document categories or single pages created in the background, which allows the actual content in the content management system to be directly used as navigation items. External Link: Allows users to add any in-site or off-site URL address as a navigation link, 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 display, the smaller the number, the earlier the display position. Currently, this feature is sorted by number and does not support drag-and-drop operations.
In the front-end template, call the main navigation
The display of the main navigation ultimately depends on the configuration of the front-end template file. Anqi CMS uses a specialnavListLabel to obtain and render the navigation list. Developers can use{% navList navs %}The tag to retrieve navigation data. This tag returns an array object containing navigation items (for example, namednavs), and then you can iterate throughnavsthe variable to output navigation links.
An example of a typical two-level navigation rendering code demonstrates how to display or hide child navigation menus according toitem.NavListwhether it exists to flexibly display or hide sub-navigation menus:
{% 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 support more complex application scenarios.For example, you can directly display a list of popular products under a certain category in the secondary menu of the main navigation, or display a list of subcategories under that category.
When you need to display a list of products of a specific category in the navigation dropdown menu, you can call it by combining tags inside the second-level navigation item.archiveListAccording to the second-level navigation item'sPageIdIf the navigation item is associated with a category or page"), utilizingarchiveLista tag to specifycategoryIdto obtain the corresponding product documentation and directly display the content in the navigation.
Similarly, if you want to display subcategories of a category in the navigation dropdown menu, you can use the second-level navigation itemPageIdThroughcategoryListLabel acquisition and display of its child category list.This feature of embedding content lists or category lists into navigation makes navigation not only a collection of links but also an entrance for content display, greatly enhancing the efficiency and experience of users in discovering content.
Points to consider when creating and managing navigation
When creating and managing the main navigation of a website, make sure the navigation structure is logical and conforms to users' browsing habits so that users can easily find the information they need.Considering search engine optimization (SEO) factors, it should be avoided to use too deep navigation levels for the benefit of search engine crawling and understanding the website structure.Regularly check the validity of all navigation links to prevent dead links. This not only affects user experience but also harms the website's SEO performance.siteIdThe use of parameters to ensure the navigation data of the correct site is called. The setting of the navigation display order should be done carefully 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 the first-level main navigation and the first-level sub-navigation.
How to link navigation 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 choose an existing article category or a single page as the navigation target from the drop-down menu.
Can I directly display the article list under a certain category in the navigation dropdown menu?Yes. You can do this by combining
navListTags andarchiveListtags in the front-end template. InnavListLoop through secondary navigation items, and according to the secondary navigation item'sPageIdparameter, usearchiveListlabel to specify the corresponding category ID and call the article or product document list under the category.