As an experienced website operations expert, I am well aware that a clear and user-friendly navigation system is crucial for both the user experience of the website and Search Engine Optimization (SEO).English CMS (EnglishCMS) provides a solid foundation for building and managing complex navigation menus with its flexible template engine and powerful content management capabilities.Today, let's delve into how to finely build and manage the top navigation bar and multi-level dropdown menu in AnQiCMS.
Harnessing AnQi CMS Navigation: Fine-grained Construction and Management from Top Menu to Multi-level Dropdowns
The website navigation, like a map in the vast internet, guides users to find the information they need and also communicates the structure and key points of the website to search engines.A well-designed, logically clear navigation system that can significantly improve user experience, reduce the bounce rate, and is the cornerstone of website SEO success.This is an enterprise-level content management system based on Go language, AnQi CMS, which provides an efficient and customizable content management solution while also bringing great flexibility to the construction and management of website navigation.
1. Navigation Bar: The Compass of the Website
In AnQiCMS, the navigation system is designed as a module that can meet both common needs and achieve high customization.It tightly integrates the background configuration with the front-end template rendering, allowing website administrators to conveniently and quickly adjust the navigation structure, while front-end developers can use powerful template tags to present these configurations in various elegant forms.
An excellent navigation bar should have the following features:
- Direct and easy to understand: Users can immediately understand the content of the menu item.
- Clear hierarchy: Organize information hierarchy rationally to avoid user confusion.
- Responsive Design：Can be displayed and operated well on different devices.
- SEO-friendly：Clear link structure helps search engines crawl and understand the website content.
AnQiCMS is built around these core needs to construct its navigation management system.
II. Overview of AnQiCMS Navigation System: The bridge between backend configuration and frontend presentation
Navigation category management: more than one menuAnQiCMS allows us to create multiple "navigation categories".This means that we can not only have a primary navigation (usually the top navigation), but also create navigations such as 'footer navigation', 'sidebar navigation', and even 'mobile-specific navigation' as needed.
typeIdDistinguish between them. This provides great convenience for the navigation display of multiple areas on the website.Navigation link settings: the art of content organizationAfter selecting or creating a navigation category, we can add specific navigation links for it. AnQiCMS provides three main types of links to meet different business needs:
- Built-in link：Including the homepage of the website, the article model homepage, the product model homepage, and other custom model homepages. These are the commonly used links preset by the system, which can be directly selected.
- Category page linkThis is one of the highlights of AnQiCMS, where we can directly select existing article categories, product categories, or single pages as navigation menu items.This way greatly simplifies the association between content and navigation, especially suitable for content-driven websites.
- External LinkEnglish: Besides internal links, we can also easily add links to external websites or any custom URL within the site.This provides the possibility of integrating third-party services or jumping to other project pages.
Each navigation link can be set to display name, subtitle name, navigation description, and display order. These properties can be flexibly called in the front-end template to achieve richer and more interactive menu effects.
三、Fine-tuning: Constructing the Top Navigation Bar and First-Level Dropdown Menu
The core of constructing the navigation bar in the AnQiCMS front-end template isnavList标签。它负责从后台获取我们配置好的导航数据，并在模板中循环呈现。
Assuming we have configured a category named "Primary Navigation" in the background, which contains first-level menu items, and some of the first-level menu items are mounted with secondary submenus. In the template (such aspartial/header.htmlorbash.htmlIn the public header files)，we can call it like this:
<nav class="main-navigation">
<ul class="nav-list">
{% navList navs with typeId=1 %} {# 假设主导航的typeId为1 #}
{% for item in navs %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}" {% if item.Description %}title="{{ item.Description }}"{% endif %}>
{{ item.Title }}
{% if item.SubTitle %}
<span class="sub-title">{{ item.SubTitle }}</span>
{% endif %}
</a>
{# 判断是否存在二级子菜单 #}
{% if item.NavList %}
<ul class="sub-nav-list">
{% for sub_item in item.NavList %}
<li class="sub-nav-item {% if sub_item.IsCurrent %}active{% endif %}">
<a href="{{ sub_item.Link }}" {% if sub_item.Description %}title="{{ sub_item.Description }}"{% endif %}>
{{ sub_item.Title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In the above code, we first go through{% navList navs with typeId=1 %}To get all the first-level menu items of the main navigation. Then, through{% for item in navs %}Iterate over each first-level menu.item.IsCurrentVariables can help us determine whether the current menu item is active, making it convenient to add CSS styles. Whenitem.NavListWhen present, it indicates that this top-level menu has a secondary submenu, and we can nest one inside it.ulLabel these submenu items. This way, a navigation bar with a clear structure and support for first-level dropdowns is preliminarily established.
四、Break through limitations: Create a deeper dropdown menu (second level and above)
Anqi CMS'snavListThe label is configured directly in the background, and indeed only supports a navigation structure of up to two levels (i.e., one-level menu + one-level dropdown).However, in the operation of actual websites, especially for content-rich sites, we often need three-level or even more dropdown menus.categoryListTags to build a deeper menu.
The core idea is: utilizenavListTags to generate the first two levels of menus, whennavListThe secondary menu item corresponds to a category page, we can get itsPageIdand then throughcategoryListlabel, with thisPageIdasparentIdIn the template, dynamically retrieve and render the subcategories under this category to achieve a multi-level dropdown menu.
The following are two common scenarios and their implementation methods:
Category under category (Multi-level category menu)This method is often used to display all subcategories or product categories under the first-level category in the navigation dropdown menu, forming a 'mega menu'.
`twig