AnQiCMS multi-level website navigation: a detailed guide from backend settings to frontend display
In today's rapidly changing digital world, a well-structured and easy-to-navigate website is crucial for improving user experience and search engine optimization (SEO).AnQiCMS, as an efficient and flexible enterprise-level content management system, understands the importance of navigation and provides intuitive and feature-rich backend management tools to help operators easily build and maintain multi-level website navigation.As an experienced website operations expert, I will guide you to deeply understand how to set up and manage your multi-level website navigation on the AnQiCMS backend, and discuss how it elegantly presents on the frontend.
The design philosophy of AnQiCMS lies in providing a set of 'lightweight and efficient' content management services for small and medium-sized enterprises, as well as self-media operators.Advantages in multi-site management, flexible content model, and advanced SEO tools, laying a solid foundation for website navigation construction.By setting precise navigation, we can not only guide users to efficiently browse the website content, but also pass the hierarchical structure of the website to search engines, thereby improving the overall visibility of the website.
One, AnQiCMS backend navigation settings entry: Plan your information architecture
In the AnQiCMS backend, the navigation management function is located in the core 'background settings' area.After you log in to the back-end, just click on the left menu bar's “Back-end Settings”, then select “Navigation Settings”, you can enter the navigation configuration interface.This is the starting point for planning your website's information architecture, where all navigation logic and hierarchy will be defined.
Two, creation and management of navigation categories: Customize exclusive menus for your website
Many websites not only need a main navigation, but may also need footer navigation, sidebar navigation, and even personalized navigation in the user center.AnQiCMS fully considers this diverse demand, allowing you to create multiple navigation categories.
On the 'Navigation Settings' page, you will see a 'Navigation Category Management' feature.Click to enter, you can add a navigation category, for example, create a new category named 'Footer Navigation'.This design greatly enhances the flexibility of the website, allowing you to independently manage each navigation menu based on different display areas and functional requirements without interference.Every time you create a new navigation category, it means you have a separate menu system that can be added with exclusive navigation links.
Three, detailed configuration of multi-level navigation links: building a clear hierarchy relationship
Navigation links are the basic units that make up the menu, and multi-level navigation allows us to create complex menus with hierarchical relationships, such as sub-menus under the main menu. In AnQiCMS, configuring multi-level navigation links is an intuitive and user-friendly process:
Select the parent navigation to define the hierarchy:AnQiCMS supports navigation links up to two levels, which means you can create a secondary sub-navigation under the primary navigation.When adding or editing navigation links, there is an option for 'Parent Navigation'.If you choose 'Top-level navigation', the current link will be displayed at the top as a first-level navigation; if you choose an existing first-level navigation as its 'parent navigation', then the current link will become a sub-navigation under that first-level navigation.This method makes the hierarchical relationship clear, and it is possible to build a clear parent-child menu without complex code.
Set the display name and additional information:Each navigation link needs a 'display name', which is the text that users will see on the frontend interface.Moreover, you can also set the "subtitle name" and "navigation description" as needed.“Subtitle name” can be used in some templates to display bilingual titles or auxiliary text, and the “Navigation description” can provide more information when hovered over, thereby enriching the user experience.
Flexible and diverse link types:AnQiCMS offers three mainstream link types to meet your website's various jump requirements:
- Built-in links:This type makes it convenient for you to quickly link to the default page of the website, such as "Home LinkThis is very practical for quickly building a standard structure website.
- Category page links:The core content of the website is often organized through categories and single-page structures.You can select existing article categories, product categories, or created single pages (such as "About UsThis way ensures the close association between navigation and actual content, allowing users to directly access the target information.
- External links:In cases where you need to link to external resources or specific custom URLs within the site, you can use external links.You can freely enter any full URL starting with HTTP or HTTPS.
Adjust display order:The arrangement of website navigation is also important.You can control the position of each navigation link in the menu by setting the 'display order'.The smaller the number, the earlier it is displayed.Although drag-and-drop sorting is not currently supported, precise sequence control can still be achieved through numerical adjustment, and the development team of AnQiCMS has indicated that drag-and-drop functionality will be added in the future to further enhance convenience.
Four, the elegant presentation of navigation in front-end templates:navListThe clever use of tags
How to display the navigation that has been carefully set up in the background on the website front-end template? AnQiCMS makes this process easy with its concise and powerful template tag system, the core of which isnavList.
You can use{% navList navs %}Such a label is used to obtain navigation data configured on the backend. AmongnavsIs your custom variable name, it will carry all the navigation link data. If you have set multiple navigation categories, you can specify which one to call through parameters, for exampletypeIdparameter to specify which navigation category to call, for example{% navList navs with typeId="1" %}(Assuming "1" is the main navigation ID).
Once you have obtained the navigation data, you can usefora loop to iterate over these links:
{% navList navs with typeId="您导航类别的ID" %}
<ul>
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{# 判断是否存在子导航 #}
{% if item.NavList %}
<ul class="sub-menu">
{% for inner in item.NavList %}
<li class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{ inner.Title }}</a>
{# 还可以进一步嵌套，如果item.NavList中还有NavList的话 #}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
In the above code:
item.Linkto get the URL of the navigation links.item.TitleGet the display name of the navigation link.item.IsCurrentIs a boolean value used to determine whether the current page is the page pointed to by the navigation link, very suitable for adding to the currently active menu item.activeClass name, to highlight the style.item.NavListIs an array that contains the sub-navigation links of the current navigation item. Through againforLoopitem.NavListYou can easily build a two-level or even deeper navigation menu (AnQiCMS backend supports two-level configuration by default, and deeper nesting needs to be achieved through the combination of other tags).
For more advanced application scenarios, such as dynamically displaying the latest product list under a certain category in the second-level menu of navigation, you cannavListwitharchiveListorcategoryListUse other template tags in combination. AnQiCMS's template tag system provides great flexibility, allowing you to create a website navigation that is both beautiful and dynamic.
Summary
AnQiCMS provides powerful multi-level website navigation management capabilities through its intuitive backend interface and flexible template tags. From clear navigation category classification, to detailed link type configuration, to