How to build a multi-level navigation menu in AnQiCMS template?
Hello, I am the familiar Anqi CMS website operation veteran you know.The importance of navigation menus in daily website maintenance and content optimization is self-evident. It is not only a guide for users to browse the website but also a key to search engines understanding the structure of the website.Today, let's delve into how to build a flexible and efficient multi-level navigation menu in AnQiCMS templates.
Understanding AnQiCMS navigation system
The core of building multi-level navigation menus in AnQiCMS lies in combining the background navigation settings with the flexible application of front-end template tags.The design of AnQiCMS aims to provide a highly customizable content management solution, which is particularly evident in the construction of the navigation menu.We need to organize the navigation data in the background first, and then use template tags to display the structured data on the website front-end.
Configuration and management of background navigation data
The first step in building multi-level navigation is to perform detailed configuration in the AnQiCMS backend.We will manage the navigation links of the website under the 'Background Settings' and 'Navigation Settings' function.
First, you can create different navigation categories to distinguish different navigation locations, such as top main navigation, footer navigation, or sidebar navigation.This is the top-level logic of the organization navigation content.
After selecting a specific navigation category, you can start adding specific navigation links.Each navigation link provides an 'Up Navigation' option, which is the key to implementing multi-level menus.By specifying a link as the "parent navigation" of another link, you create a hierarchy.AnQiCMS supports up to two-level navigation links, which means you can have a main menu item and a sub-menu under it.
When adding navigation links, you can choose from multiple types of 'link types'.The built-in link provides a quick way to the homepage or model homepage.“Category page link” allows you to select a created category or single page as a navigation target, which is very useful for dynamic content.External links provide the greatest flexibility, allowing you to manually input any internal or external URL.In addition, you can customize the "Display Name", "Subtitle Name", and "Navigation Description" to meet the diverse display needs of the front-end.
Practice of building multi-level navigation in AnQiCMS template
Once the background navigation data is configured, the next step is how to render these data into a beautiful and functional multi-level navigation menu in the front-end template. AnQiCMS templates use syntax similar to Django template engine, variables are passed through double braces{{变量}}Define, logical control is through{% 标签 %}Implementation.
The core tag used to obtain the navigation list isnavList. It allows us to obtain the background configuration navigation data in the form of variables. The basic usage is{% navList navs %}{% endnavList %}of whichnavsIt is the variable name we define, it will contain an array object containing all navigation items. If you have set multiple navigation categories in the background, you can usetypeIdSpecify the navigation category to be called with parameters, for example{% navList navs with typeId=1 %}.
To build multi-level navigation, we need to check whether each navigation item contains sub-navigation while traversing the main navigation items in a loop.navListEach tag returnsitemAn object that contains a namedNavListField. If it existsitem.NavListAnd is not empty, it means that the current navigation item has a sub-menu, and we can nest another one inside.forLoop to render these submenu items.
Below is an example of a basic two-level navigation menu template code.
<nav class="main-navigation">
<ul>
{% navList mainNavs with typeId=1 %}
{%- for item in mainNavs %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{%- if item.NavList %} {# 检查是否存在子导航 #}
<ul class="sub-nav-menu">
{%- for subItem in item.NavList %}
<li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
This code first goes throughnavListObtaintypeIdAll top-level navigation items for 1 (usually the default main navigation), and iterate through them. For each top-level navigation item, it will checkitem.NavListif there is any content. If there is, it will render an embedded<ul>List to display sub-navigation.item.IsCurrentField can help us determine whether the current link is the page the user is visiting, so we can addactiveclass to highlight.
Integrate content dynamically into the navigation menu
The strength of AnQiCMS lies in the flexibility of its content model.In some complex navigation scenarios, we may not only need to display fixed links, but also dynamically display the subcategories of the category to which the navigation item belongs or the latest document list under the navigation item.categoryListandarchiveListTag implementation.
When the link type of a navigation link is set to "Category Page Link",itemThe object will include aPageIdThe field stores the ID of the associated category. We can use thisPageIdto further query related content.
For example, under a product navigation menu, we may want to display the subcategories of the product category or list the latest products under the category directly:
<nav class="main-navigation">
<ul>
{% navList mainNavs with typeId=1 %}
{%- for item in mainNavs %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{%- if item.NavList %}
<ul class="sub-nav-menu">
{%- for subItem in item.NavList %}
<li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
{# 如果子导航项关联的是一个分类，且我们想显示其下级分类或文档 #}
{% if subItem.PageId > 0 %}
{% categoryList subCategories with parentId=subItem.PageId %}
{% if subCategories %}
<ul class="mega-menu-content"> {# 示例：三级菜单，或者作为大菜单内容 #}
{% for category in subCategories %}
<li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
{% endfor %}
</ul>
{% else %} {# 如果没有子分类，可以考虑显示该分类下的最新文档 #}
{% archiveList recentArchives with type="list" categoryId=subItem.PageId limit="5" %}
{% if recentArchives %}
<ul class="mega-menu-content">
{% for archive in recentArchives %}
<li><a href="{{ archive.Link }}">{{ archive.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
Such implementation makes the navigation menu not only a static link collection, but also a dynamic entry point for the website content, greatly enhancing the user experience and visibility of the website content.
Template organization and maintenance suggestions
In practical project development, it is strongly recommended to decompose the HTML structure of the navigation menu into reusable code snippets to maintain the cleanliness and maintainability of the template code. UsingincludeTags can extract common parts such as page headers, footers, or sidebars, for example{% include "partial/header.html" %}. For complex page layouts, you can useextendstags to define a basic skeleton template (such asbase.html），other pages inherit it to overwrite specific blocks（{% block content %}{% endblock %}），thus achieving high code reuse.
By using the above method, we can take advantage of the powerful functions provided by AnQiCMS to easily build multi-level navigation menus that are flexible and user-friendly to meet various needs.This not only beautifies the website interface, but also optimizes the user path, improving the overall operation efficiency of the website.
Frequently Asked Questions (FAQ)
Question: I have set up two-level navigation in the background, why does the front-end only display the main menu?Answer: Please check your template code. Make sure you are using it correctly while iterating over the main navigation items.{% if item.NavList %}To determine if there is a sub-navigation and to nest loops within conditions to render sub-menu items.If this part of the code is missing or the judgment logic is incorrect, the submenu will not be rendered correctly.At the same time, also confirm that the background navigation link's 'parent navigation' setting is correct, ensuring that each submenu item is associated with the correct parent menu.
Question: Can I implement a three-level or more menu in the navigation menu?Answer: AnQiCMS backend's 'Navigation Settings' currently supports up to two-level navigation (i.e., main menu items and their direct sub-menu items). If your design requirements indeed need three or more levels of menus, you need to combine the 'Category List Tags' (categoryListOr "Single Page List Tag" (pageList）to dynamically build a deeper menu structure, as shown in the example of dynamically integrating content in the article.This means that the content of the third-level menu will no longer be managed directly by the "navigation settings" backend, but will be dynamically obtained from article categories or single pages.
How can I make a navigation menu item jump to an external website when clicked?Answer: In the AnQiCMS backend's 'Navigation Settings', when you add or edit navigation links, select 'Link Type' as 'External Link'. Then, enter the full external URL you want to jump to in the 'Link Address' field (for examplehttps://www.example.com).Thus, when the front-end template renders the navigation item, its link address will be the external URL you specify, enabling direct redirection.