How to set and display the navigation menu of the AnQiCMS website, does it support multi-level structure?

Website navigation is an important guide for users when accessing a website. A clear and easy-to-use navigation menu can greatly enhance user experience.AnQiCMS provides very flexible and powerful functions in terms of website navigation settings and display, allowing us to easily manage and implement multi-level menu structures to meet the needs of various website layouts.

In the AnQiCMS backend, all settings related to website navigation are concentrated in the 'Navigation Settings' module.Enter this page, you will first see a 'Navigation Category Management' area.This feature is very practical, it allows you to create independent navigation menus for different areas of the website, such as the main navigation at the top, the footer navigation at the bottom, or quick links in the sidebar, and create different navigation categories for them separately.Each category can have its own exclusive set of navigation links, independent of each other, convenient for management.

When you start creating or editing navigation links, AnQiCMS provides a variety of configuration options.First is the "display name", which is the text displayed on the front page navigation link.If you need more rich information display, you can also set "subheading name" and "navigation description", and this additional text content can be flexibly called in your front-end template.

AnQiCMS' navigation links support three main types, which greatly enhance its application flexibility: The first isBuilt-in linkIncluding the website's 'Home Link' and various 'Content Model Home Pages' created in content management, such as article list pages, product display pages, etc., these are all system presets that can be selected for use. The second isCategory page linkYou can specify established 'Article Category', 'Product Category', or 'Single Page' as navigation links.This means that independent pages like "About Us" or specific article categories can be easily integrated into the navigation menu.The third isExternal linkIf you need to navigate to a specific URL within the site or link to other websites, such as social media pages, you can select this type and then manually enter the target link address.

In addition, each navigation link is equipped with a "Display Order" feature, where you can enter a number to control the order of the navigation items in the menu. The smaller the number, the closer the navigation item is displayed.

AnQiCMS originally supportsUp to two-level navigation structureThis means you can easily build a website layout with a primary menu and its secondary dropdown menu.When setting up navigation links in the background, by flexibly selecting 'parent navigation', you can clearly specify whether the current link exists as a top-level menu item or belongs to a second-level submenu under a first-level menu.

To present this multi-level navigation structure on the website front-end, we need to make use of the AnQiCMS providednavListTemplate tag. This tag is very powerful, it can obtain all the navigation data configured on the back-end. It is used in{% navList navs %}...{% endnavList %}After obtaining data in such a structure, we will usually go throughforLoop to traverse each navigation item. For navigation items with submenus,navListthe data returned by the tag will include a name calledNavListThe attribute, which itself is a sub-navigation list. By judgingitem.NavListwhether it exists, we can know whether the current navigation item has a submenu, and we can nest another one.forLoop to display these second-level navigation items.

For example, the document provides very practical code examples, showing how to display the names and links of the second-level categories in the navigation dropdown menu, and even further display the product document list contained in the second-level category, or even deeper subcategories.This deep integration capability greatly expands the practicality of navigation, making it no longer just a simple collection of links, but also serves as a quick preview and entry point for website content.For example, when the user hovers over a specific product category under the "Products" main menu, the dropdown menu can directly display the thumbnail or brief information of popular products under that category, effectively improving the user's efficiency in obtaining information.

In summary, AnQiCMS provides a set of intuitive and comprehensive solutions for the setting and display of website navigation menus.The flexibility of management from the backend, supporting a variety of link types such as built-in, categorized, and external links, as well as the two-level navigation structure easily achieved through template tags, fully demonstrates its professionalism and ease of use in content operation.No matter whether your website needs a simple and clear single-level navigation or a rich and clear two-level dropdown menu, AnQiCMS can help you achieve it efficiently and conveniently.

Frequently Asked Questions (FAQ):

Q1: Does AnQiCMS navigation menu support nested structures of three levels or more? A1:AnQiCMS's navigation system is originally built-in to support a maximum of two-tier menu structure, that is, the first-level main menu and its second-level sub-menus.If you have deeper navigation needs, it is usually necessary to implement the logic of a custom front-end template, for example, to display sub-categories or related content within a second-level category page in a modular way, but this is not the direct infinite-level support provided by the navigation management module.

Q2: Can I add a link to an external website in the AnQiCMS navigation menu, such as my WeChat public account QR code page? A2:Of course you can. In the navigation settings page of the AnQiCMS backend, when you create or edit navigation links, just select the 'External Link' option in the 'Link Type' selection.After thathttps://mp.weixin.qq.com/s/your_qrcode_link), so that your navigation menu can link smoothly to external websites.

Q3: If I want the navigation menus on different pages of the website to have different styles, how should I implement it? A3:The visual style of the navigation menu is mainly controlled by the front-end CSS stylesheet. To achieve differentiation in the navigation style of different pages, you can set it in the template file based on the type of the current page (such as the homepage, article detail page, category list page, etc.) or its URL path, to<body>Or add a unique CSS class to the navigation container element. For example, add to the home pageclass="is-homepage"Then you can target it in your CSS file..is-homepage .main-navDefine a specific style rule, while other pages can follow the default one.main-navStyle, or customize each class as needed. This usually requires some knowledge of frontend templates and CSS to complete.