Display of navigation list and its sub-menu in AnQiCMS template
As an experienced AnQi CMS website operations personnel, I am well aware of the importance of a clear and efficient website navigation for user experience and content access. AnQi CMS provides powerful and flexible navigation list tags for template developers.navListenabling us to easily retrieve and display the main navigation, footer navigation, and even more complex multi-level navigation structures with submenus on the website front-end.
Retrieve the website navigation list
In the Anqi CMS template, we use built-innavListLabel to retrieve navigation data of the website.This tag is designed to be very intuitive, it allows us to define a variable to store navigation data, and then iterate through this variable to render the navigation structure.{% navList navs %}...{% endnavList %}of whichnavswhich is the variable name we specify for the navigation list. You can name it according to your preference.
navListThe tag supports several important parameters, used to finely control the navigation data you want to obtain. Among them,typeIdThe parameter is particularly important. In the Anqi CMS backend management interface, you can create and manage different navigation categories under "Website Navigation Settings", such as "Top Main Navigation", "Footer Navigation", "Sidebar Navigation", etc. Each category has a uniquetypeId. By specifying innavListthe tagtypeId="您的导航类别ID"you can accurately call the navigation data of a specific area. If not specifiedtypeIdThe system will default to retrieve the navigation category with ID 1, which is usually the main navigation. Additionally, in the multi-site management scenario, you can also usesiteIdParameters are used to specify the data to be called from a specific site, ensuring the independence of content across different sites.
Traversal and display of navigation items
Once throughnavListThe tag has obtained navigation data,navsA variable will become an array object containing all the navigation items. In order to display these navigation items in the template, we need to useforLoop to iterate them one by one. Inside the loop, each navigation item is exposed as aitemvariable, and we can access various properties to build navigation links.
EachitemObjects provide rich fields to help us build complete navigation links. The most commonly used ones areTitle(Navigation display name),Link(Navigation link address), andIsCurrentCheck if the current link is active. UtilizeIsCurrentAttribute, we can add a specific CSS class to the navigation item corresponding to the current visited page (for exampleactiveHighlight visually to enhance the user experience.
For example, a simple top-level navigation menu can be constructed in this way:
<ul class="main-nav">
{% navList navs %}
{% for item in navs %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
{% endnavList %}
</ul>
Display sub-menu structure
Of Security CMSnavListLabels not only support obtaining top-level navigation but can also easily handle multi-level sub-menus. Each navigationitemobject may contain a property namedNavListwhich is exactly the collection of its sub-menus.NavListThis is also an array object, which means we can use nestedforloops to traverse and display sub-menu items.
A common practice when dealing with sub-menus is to first judge the currentitemDoes it existNavListIfitem.NavListIf it is not empty, it means that the navigation item has a submenu, at this point we can render a dropdown menu or a multi-level menu structure. This judgment is usually used{% if item.NavList %}to achieve.
Combine judgment logic and nested loops, we can build a typical two-level navigation menu:
<ul class="main-nav">
{% navList navs %}
{% for item in navs %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.NavList %} {# 判断是否存在子菜单 #}
<ul class="submenu">
{% for inner in item.NavList %} {# 遍历子菜单 #}
<li class="submenu-item {% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{ inner.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
Combine content display to create a complex navigation
In actual operation, the navigation bar sometimes needs to display richer content, such as directly displaying the list of hot products under the product category, or displaying sub-category links under the 'About Us' menu. Anqi CMS'snavListwith the tag andarchiveList(Document list) andcategoryListThe combination of (category list) tags makes it possible to meet these complex requirements.
itemWithin the objectPageIdThe field plays an important role. When a navigation menu item links to a category or page configured in the background,PageIdThe ID of the category or page will be stored. Using this ID, we can dynamically call the document list under the corresponding category or further subcategory list in the submenu.
For example, in a product navigation dropdown, in addition to displaying the usual subcategories, we can also display some products under that category:
<ul class="main-nav">
{% navList navList with typeId=1 %} {# 假设 typeId=1 是主导航 #}
{% for item in navList %}
<li class="nav-item">
<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>
{# 如果二级导航项链接的是一个分类，且 PageId > 0 #}
{% if inner.PageId > 0 %}
{% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 调用该分类下的8个产品 #}
{% if products %}
<ul class="nav-menu-grandchild">
{% 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>
By this flexible combination method, we can build a multi-level navigation system that is both beautiful and practical according to the specific needs of the website, greatly enhancing the user's browsing experience and the efficiency of the website's information architecture.
Summary
Of Security CMSnavListThe label provides great convenience and flexibility for building website navigation. From simple single-level menus to complex menus with sub-menus, even dynamic content display of multi-level navigation, we can make reasonable use of them.typeIdParameter,forLoop and combine with other tags to achieve diverse navigation needs.As a website operator, mastering the use of these template tags is the key to improving website user experience and content management efficiency.
Frequently Asked Questions
1. How to create and manage different navigation categories in the Anqi CMS backend?
You can find the "Backend Settings" -> "Website Navigation Settings" option in the AnQi CMS backend navigation menu.Here, you can enter the 'Navigation Category Management' page, add new navigation categories such as 'Footer Navigation', 'Mobile End Navigation', etc., and assign a unique ID to each category.After creating the category, you can select the corresponding category in the "Navigation Link Settings" to add specific navigation link items and their sub-menus.
2. Why is my secondary menu not displaying?
Please check a few aspects.Firstly, make sure that you have added a submenu to the main navigation item in the 'Website Navigation Settings' of the AnQi CMS backend.{% if item.NavList %}This judgment condition, if this judgment is missing or the judgment logic is incorrect, the submenu will not be rendered. In addition, confirm your submenu items'item.NavListDoes the property correctly include the submenu data.
3. How to add custom icons or description information to navigation items?
In the AnQi CMS backend, under 'Website Navigation Settings' -> 'Navigation Link Settings', you can also fill in the 'Subtitle Name' and 'Navigation Description' for each navigation item. This information can be displayed in the template throughitem.SubTitleanditem.DescriptionTo obtain and display.For icons, you usually need to add a custom field in the background (if the system does not support icon upload by default), or add icon styles for specific navigation items through CSS on the front end.