How to implement nested display of multi-level navigation menus in AnQiCMS templates?
To build a clear and feature-rich website in AnQiCMS, you can't do without flexible and diverse navigation menus.Multi-level navigation not only helps visitors quickly locate the content they need, but also optimizes the website structure and is friendly to search engines.AnQiCMS's powerful template engine and backend management features make it intuitive and efficient to implement complex nested navigation.
Understanding the structure of navigation menus in AnQiCMS: Basics
In AnQiCMS, the implementation of the navigation menu is divided into two main parts: first, the configuration and data management are carried out in the background, and secondly, the rendering display is achieved through specific tags and logic in the front-end template files.AnQiCMS uses a syntax similar to Django's template engine, which is renowned for its ease of learning and powerful features, making it easy for developers and operators to get started and convert technical information into practical display effects.
System built-innavListTags are the core tools for building navigation, which can help us obtain the navigation data set in the background. At the same time, combinedforloop,ifLogical judgment and general template tags, we can easily realize the nested display of multi-level menus.
Step 1: Configure multi-level navigation in the background.
First, we need to set up the navigation menu structure in the AnQiCMS backend.
- Enter "Website Navigation Settings": Log in to the AnQiCMS admin panel, find "Admin Settings
- Manage navigation categories:By default, the system will have a "default navigation" category.If you need to create independent menus for different areas of the website (such as top navigation, footer navigation, sidebar navigation), you can add new navigation categories in the 'Navigation Category Management'.
typeIdIt will be used when calling the template. - Add Navigation Link:
- Create a first-level navigation:Click 'Add navigation link', fill in 'Display name' and 'Link type'.The link type can be built-in links (such as home page, model home page), category page links (select an existing category or a single page), or external links (enter the URL manually).Select 'Parent navigation' as 'Top navigation' to create a first-level menu item.
- Create secondary navigation:To create a submenu, just click on “Add Navigation Link” again, and select the primary navigation you just created in the “Parent Navigation” dropdown list.This, the new link will appear as a sub-item of the first-level navigation.
- Display order:By adjusting the number of "Display Order", you can control the arrangement position of navigation items, the smaller the number, the closer it is to the front.
AnQiCMS navigation settings natively support nested two-level menus. This means you can easily set up "main menu -> sub menu" such a structure in the background.
The second step: implementation in the template file
After completing the background configuration, the next step is to display these data on the website front-end. The AnQiCMS template files are usually located/templatethe directory and use.htmlsuffix.
We usenavListTag to get navigation data configured on the back-end. The following is an example of a basic two-level navigation menu template code:
{# 假设我们调用的是默认导航类别，其 typeId 默认为1 #}
<nav class="main-navigation">
<ul>
{# 遍历所有一级导航项 #}
{% navList navs with typeId=1 %}
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}{% if item.NavList %} has-submenu{% endif %}">
<a href="{{ item.Link }}" {% if item.SubTitle %}title="{{ item.SubTitle }}"{% endif %}>
{{ item.Title }}
</a>
{# 如果当前一级导航有子菜单，则进行嵌套遍历 #}
{% if item.NavList %}
<ul class="submenu">
{% for subItem in item.NavList %}
<li class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}" {% if subItem.SubTitle %}title="{{ subItem.SubTitle }}"{% endif %}>
{{ subItem.Title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In this example:
{% navList navs with typeId=1 %}Used to gettypeIdNavigation data under category 1 is assigned to a variablenavs.- The outermost
{% for item in navs %}Loop through all first-level navigation items item.Linkanditem.TitleOutput the navigation link address and display name separately{% if item.IsCurrent %}Determine whether the current navigation item is the page the user is visiting, if it is, you can addactiveclass to highlight.{% if item.NavList %}It is crucial, as it checks whether the current top-level navigation item has a sub-navigation. Ifitem.NavListIf present, it will enter the inner layerforLoop through and display all second-level navigation items (subItem).
In-depth exploration: Flexible implementation of third-level and even more navigation
AlthoughnavListThe tag supports two-level navigation by default, but in actual website operation, we often need deeper menus, such as "First-level category -> Second-level category -> Product list under a specific second-level category"。AnQiCMS through flexible tag nesting, can fully meet this requirement.
To implement three-level or even more navigation, we can further nest other data calls in the loop of the second-level navigation, for examplecategoryList(Category List Tag) orarchiveList(Document list label), using the second-level navigation item'sPageIdto dynamically retrieve related content.
An example of a three-level navigation implementation for "Primary category -> Secondary category -> Document list under secondary category".
<nav class="main-navigation">
<ul>
{% navList navList with typeId=1 %}
{% for item in navList %}
<li class="{% if item.IsCurrent %}active{% endif %}{% if item.NavList %} has-submenu{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %}
<ul class="submenu">
{% for inner in item.NavList %}
<li class="{% if inner.IsCurrent %}active{% endif %}{% if inner.PageId > 0 %} has-third-level{% endif %}">
<a href="{{ inner.Link }}">{{ inner.Title }}</a>
{# 检查二级导航项是否关联了某个分类ID (PageId)，如果存在，则获取该分类下的文档 #}
{% if inner.PageId > 0 %}
{# 获取该分类下的文档，作为第三级菜单 #}
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
{% if products %}
<ul class="third-level-menu">
{% for product in products %}
<li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
In this expanded example:
- We focus on the inner layer.
{% for inner in item.NavList %}The loop represents a secondary navigation item. {% if inner.PageId > 0 %}Check if the current secondary navigation item is associated with a category when configured in the background (PageIdIt will be the ID of that category).- If associated with a category, we will nest it within
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %}Tags, get the most 8 documents under the category (