When building a website, a clear and user-friendly navigation system is crucial. It directly affects whether users can quickly find the information they need and also influences how search engines understand the structure of the website. AnQiCMS provides powerfulnavListTags allow us to flexibly build a navigation system that includes multi-level submenus and tightly associates navigation items with website content.
Next, we will delve into how to utilizenavListTags, create a multi-level navigation system that is both beautiful and practical for your website.
The foundation of website navigation: starting from the backend settings.
Before starting work on the template layer, we need to lay the foundation for the navigation system in the AnQiCMS backend.The AnQiCMS backend provides a "Navigation Settings" feature, where you can define the entire navigation structure of the website.
The first is "Navigation Category Management".This allows you to create navigation areas with different names, such as "Top Main NavigationtypeIdTo identify.
The next is "Navigation Link Settings", which is the place to construct specific menu items. Here, you can add navigation links and select their type:
- Built-in linkFor example, the home page of the website, the home page of the article model, the home page of the product model, etc., these are system preset common entries.
- Category/Single Page LinkYou can directly select the article categories, product categories, or standalone single pages that have been created in the background as navigation targets.This is very crucial because it provides a bridge for us to associate more content in the template later.
- External LinkIf you need to link to external resources or a custom internal URL, you can choose this type.
In the background, each navigation link can be set to have up to two levels of hierarchy, meaning a main navigation item can have a sub-navigation item.Each navigation item includes information such as 'Display Name', 'Subtitle Name', 'Navigation Description', and 'Link Type', and supports sorting by 'Display Order'.
UnderstandingnavListThe core mechanism of the tag
Once the navigation structure is set up on the backend, we can use it in the template.navListCall these data with the tag.navListThe usage of the tag is as follows:
{% navList navs %}
{# 循环输出导航项 #}
{% endnavList %}
Here,navsIt is the variable name we define for the navigation list, and you can name it according to your habit.navListLabel supports several important parameters:
typeId: corresponds to the navigation category ID defined in the "Navigation Category Management" backend. By specifyingtypeIdYou can precisely call the top navigation, footer navigation, and other different menu groups. For example,.{% navList navs with typeId=1 %}It will call the navigation category with ID 1.siteIdIf you manage multiple sites and want to call data from a specific site, you can do so bysiteIdparameters.
In{% for item in navs %}in the loop, eachitemobject contains the following useful fields:
Title: The display name of the navigation item.SubTitleNavigation item subtitle name.DescriptionNavigation item description.LinkNavigation item link address.IsCurrentAn boolean value indicating whether the current navigation item corresponds to the page the user is visiting, commonly used to set highlight styles.NavListIf the current navigation item has child navigation, this field will contain an array with the same structure as the parent.itemSame, convenient for us to nested loop to build multi-level menus.PageId:This is a very important fieldWhen the navigation item links to the "category page link" or "single page link" in the background,PageIdIt stores the ID of the category or single page. It is the key to our implementation of navigation and deep content association.
Build a navigation with multi-level sub-menus
AnQiCMS backend supports two-level menu configuration directly. In the template, we can achieve this two-level menu display through nested loopsitem.NavListto easily implement this two-level menu display:
<ul>
{% navList navs with typeId=1 %}
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 判断是否有子菜单 #}
<dl>
{%- for inner in item.NavList %}
<dd class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
This code first loops through the first-level navigation items, if a first-level navigation item'sitem.NavListis not empty, it will continue to loop through its sub-navigation items, forming a standard two-level dropdown menu.
Associated content, achieving more flexible navigation
PageIdThe introduction of fields has greatly expandednavListThe function of tags. Although the backend only directly supports two-level menus, but throughPageIdWe can dynamically call more related content based on the category or single page ID associated with the secondary menu items at the template level, thus achieving complex effects of multi-level menus visually, or directly displaying the content list in the menu dropdown area.
Scene one: Display more subcategories under the second-level menu (simulating a third-level menu)
Assuming your secondary navigation item is associated with an article category, and this category has more subcategories, you can utilizeitem.PageIdCombinecategoryListTags, dynamically pull and display these three-level categories in the template.
<ul>
{% navList navList with typeId=1 %}
{%- for item in navList %}
<li>
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %}
<ul class="nav-menu-child"> {# 二级菜单容器 #}
{%- for inner in item.NavList %}
<li>
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{% if inner.PageId > 0 %} {# 检查二级菜单项是否关联了分类 #}
{% categoryList categories with parentId=inner.PageId %} {# 调用该分类的子分类 #}
{% if categories %}
<ul> {# 三级分类容器 #}
{% for subCategory in categories %}
<li>
<a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
In this code,inner.PageIdascategoryListofparentIdParameters, accurately specifies which subcategory of the category to be retrieved. This way, even if there is no direct configuration of the third-level navigation on the backend, we can still dynamically present it through the logic of the template.
Scenario two: Directly associate and display document/product list under the second-level menu
You can also choose to display the latest articles or hot products under the associated category directly in the dropdown area of the second-level menu items, rather than just displaying the subcategories.This is very useful for content display websites, such as e-commerce or information portals.
<ul>
{% navList navList with typeId=1 %}
{%- for item in navList %}
<li>
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %}
<ul class="nav-menu-child"> {# 二级菜单容器 #}
{%- for inner in item.NavList %}
<li>
<a href="{{ inner.Link }}">{{inner.Title}}</a>
{% if inner.PageId > 0 %} {# 检查二级菜单项是否关联了分类 #}
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 调用该分类下的最新8篇文档/产品 #}
{% if products %}
<ul class="nav-menu-child-content"> {# 内容列表容器 #}
{% for productItem in products %}
<li><a href="{{productItem.Link}}">{{productItem.Title}}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endarchiveList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
Here, we utilizeinner.PageIdasarchiveListofcategoryIdParameters, obtained from the background, are associated with the document or product list under the second-level menu item. Bylimit="8"The number of items that can be displayed can be controlled,type="list"then