AnQiCMS Navigation Settings: Customize the structure and user experience of your website

In today's digital age, a website's navigation system is not just a tool to guide users through the site, it is also the 'skeleton' of the website's architecture, directly affecting user experience, information retrieval efficiency, and even SEO performance.As an enterprise-level content management system developed based on the Go language, AnQiCMS deeply understands the importance of the navigation system, and therefore provides highly flexible and customizable navigation settings functions, aiming to help enterprises and content operators easily build clear and efficient website navigation.

Today, we will delve into how AnQiCMS's navigation settings allow you to customize navigation categories and link types, creating a unique traffic entrance and user path for your website.

The importance of navigation: more than just links

Before we get started with customization, let's quickly review why the navigation system is so crucial.A well-designed navigation can help visitors quickly find the content they are interested in, reduce the bounce rate, and increase the time spent on the website.For search engines, a clear navigation structure helps crawlers understand the hierarchical relationship of the website, efficiently grab and index content, thereby optimizing the ranking of the website in search results.In the design philosophy of AnQiCMS, SEO-friendliness is one of its core strengths, and the powerful navigation settings are a powerful manifestation of this advantage.

AnQiCMS navigation core concept: flexible and controllable

The navigation management function of AnQiCMS is located under the "Background Settings" menu in the "Navigation Settings" item in the background, here is your command center to control the website navigation layout and content.The system not only provides a convenient configuration for default navigation, but also allows you to create and manage diverse navigation categories according to actual needs, and refine the link settings for each category of navigation.

1. Custom navigation categories: dividing areas for your website

Imagine that, in addition to the main navigation at the top of your website, you may also need a footer navigation to display important company information, or a sidebar navigation to showcase popular tags.The "Navigation Category Management" feature of AnQiCMS is exactly for this purpose.

By default, the system will prepare a "default navigation" category for you.If your website has more complex structural needs, such as wanting an independent 'footer navigation' to display privacy policies, contact information, and the like, or to create a 'product navigation' for specific product lines, you can easily add new navigation categories.Just go to the navigation settings interface, find 'Navigation Category Management', add a new category name (for example: 'Footer Navigation'), save it, and then this new navigation area will be waiting for you to fill in the content.This greatly expands the possibilities of website layout, allowing navigation in different areas to carry different information transmission missions.

2. Build Navigation Links: Define Your Website Path

After the navigation category is determined, the next step is to fill in specific navigation links in these categories.AnQiCMS provides a variety of link setting options to ensure you can flexibly point to any location within or outside the website.

Firstly, each navigation link has some common configuration items, such as:

  • Display name:This is the text displayed on the front-end navigation page, you can name it freely, even if it is not completely consistent with the actual link content.
  • Subtitle name:Some designs may require navigation to display dual titles (such as Chinese + English), you can add the corresponding subtitle text here for template use.
  • Navigation Description:If the navigation item requires additional brief instructions, you can fill it in here, and the template can be selected as needed.
  • Display order:You can set the numeric order for each navigation link, the smaller the number, the earlier it appears in the navigation list, making it convenient for you to adjust the order of navigation items.

Next, the core of AnQiCMS navigation settings - link type, the system kindly provides three main link types to meet almost all your navigation needs:

  • Built-in links:This type is mainly aimed at some fixed entries on the website. You can choose the "home page link" to directly point to your website's homepage.Further, you can also choose the 'Article Model Home Page', 'Product Model Home Page', or other custom model home pages, which means that even if you add a new content model, you can easily add its home page to the navigation, providing users with a direct entry point.

  • Category page links:This is the strength of AnQiCMS, which allows you to directly associate with existing content categories or single pages.No matter if you want to navigate to a specific article category (such as "News Update", "Industry Information"), product category (such as "Mobile Products", "Computer Accessories"), or an independent single page (such as "About Us", "Contact Information"), you can easily select it through a dropdown menu without manually entering a complex URL.This method is not only convenient, but also ensures the accuracy of the link and automatically updates the link address when the content structure is adjusted later.

  • External links:This link type gives you the most freedom. You can enter any valid URL, whether it is a specific page within your website or a link to an external partner website.This makes the navigation system of AnQiCMS not limited to the site, but also provides convenience for your content marketing and resource integration.

In the template, call the navigation: turn settings into reality

How do you make these carefully configured navigation elements perfectly displayed on the front-end website after setting up the navigation in the background? AnQiCMS provides intuitive template tags.navListLet you easily render the navigation data set in the background to the page.

By{% navList navs with typeId=1 %}Such a label, you can specify the navigation category ID you want to call (for exampletypeId=1corresponding default navigation, then in oneforTraverse in a loopnavsvariable, output each navigation item ofTitle(Display name),Link(Link address) and other information.

What is even better is that AnQiCMS supports a two-level navigation structure. If you set a sub-navigation for a navigation item in the background, then in the template, you can{% if item.NavList %}Check if there is a sub-navigation and go through it again{% for inner in item.NavList %}Loop to output the second-level navigationTitleandLink。“Furthermore，”item.IsCurrentThe field can help you determine whether the current navigation item is on the current page, making it convenient to add CSS styles to highlight the active navigation.

For example, in the article, we demonstrated how to dynamically display product documents under a specific category in the navigation dropdown menu, or display the subcategories of that category. This is achieved by combiningnavListlabel'sitem.PageIdwith the attributearchiveListorcategoryListTag联动实现。This means that your navigation is not just a static list of links, it can be a dynamic portal displaying content, intelligently presenting relevant information according to the visitor's needs.

Practical suggestions and advanced techniques

  • Planning comes first:Before setting up navigation, take the time to plan the overall information architecture and navigation hierarchy of the website.What content needs to be highlighted? What are the most frequently visited paths by users?These answers to the questions will guide you in creating more effective navigation.
  • Adaptable for mobile devices:Ensure your navigation works well on desktop and mobile devices.AnQiCMS templates usually support responsive design, but also pay attention to the display of mobile navigation (such as hamburger menus) to ensure that your navigation structure is clearly presented.
  • UtilizeIsCurrentImprove user experience:ingenious usageitem.IsCurrentTags to highlight the current navigation item on the page, effectively helping users understand their position on the website and improving the browsing experience.
  • The exquisite application of two-level navigation:AnQiCMS natively supports two-level navigation. Make good use of this feature to provide more in-depth categories or page entries through dropdown menus while keeping the main navigation concise, avoiding a long navigation bar.
  • Dynamic content integration:As shown in the document example, you can access the dropdown area of the secondary navigation byarchiveListorcategoryListLabel, dynamically calls articles, products, or sub-categories related to the current top-level navigation, making the navigation more intelligent and practical.

Summary

The navigation settings function of AnQiCMS, with its flexible category management, diverse link types, and powerful template tag support, provides website operators with great freedom.Whether it is to build a simple corporate website or a content-rich portal, AnQiCMS can help you easily customize a navigation system that meets user habits and is conducive to SEO.Mastering these features will enable you to better control the flow of information on the website, optimize the user experience, and ultimately enhance the overall operational efficiency and competitiveness of the website.

Frequently Asked Questions (FAQ)

Q1: How many levels of menu nesting does AnQiCMS navigation support?

A1:AnQiCMS supports creating two-level navigation menus natively, that is, a main navigation item can contain a first-level submenu. In the template, you can traverse the tags bynavListlooping through tagsitem.NavListDisplay these sub-menus. If a deeper level of menu structure is needed, it usually requires further customization and processing through front-end JavaScript in conjunction with styles, but the back-end management mainly focuses on two levels.

Q2: How do I automatically highlight the current navigation item for the current user?

A2:AnQiCMS providesIsCurrentfield. In the template usagenavListWhen looping tags to output navigation, you can check{% if item.IsCurrent %}this condition, if it isTruethen give the current navigation<li>or<a>label toactiveorcurrentCSS class, thus achieving highlight effect through CSS styles.

**Q3: Can I for