In website operation, a clear and easy-to-navigate menu structure is a core element for improving user experience and search engine friendliness.For websites with a large amount of content or multiple product lines, building a multi-level, nested category navigation menu is particularly important.categoryListThe label is the key to achieving this goal.
This article will delve into how to utilizecategoryListLabels, flexibly build and display your multi-level category navigation menu.
KnowcategoryListLabel and its basic usage
categoryListThe label plays a role in the security CMS template in obtaining the category list data. It helps us retrieve the category information under different content models such as articles and products.
In use, its basic structure is as follows:
{% categoryList categories with moduleId="1" parentId="0" %}
{# 在这里循环输出分类数据 #}
{% endcategoryList %}
In this example:
categoriesIt is a variable name defined for the category list data obtained, and you can name it according to your habits.moduleIdThe parameter is crucial, it specifies which content model's categories you want to retrieve. For example,"1"usually represents an article model,"2"then it may represent the product model.In the AnQi CMS backend, each category belongs to a specific content model, so this parameter is required. It ensures that you can get the correct type of content category.parentIdThe parameter is used to specify the ID of the parent category. When you set"0"when, means you want to get all top-level categories. This is the starting point for building multi-level menus.
categoryListTags in{% categoryList %}and{% endcategoryList %}betweenforloop to iterate through each category item retrieved. Each category itemitemProvided rich field information, such as:
item.IdThe unique ID of the category.item.Title: The display name of the category.item.LinkThe URL link of the category page.item.DescriptionThe introduction or description of the category.item.ParentIdThe ID of the parent category, for top-level categories, this value is usually0.item.HasChildrenAn boolean value indicating whether the current category has subcategories. This field is a key to implementing multi-level nesting.item.IsCurrentAn English translation of 'auto' is 'English'. The value has been translated accordingly.item.SpacerIf present, it will add a visual prefix to the subcategory (e.g., indentation symbol).
By flexibly using these fields, we can design various complex navigation menus.
Build two-level classification navigation menu
Firstly, we start building the navigation from the top-level category of the website. Assuming we want to buildmoduleIdresponse for"1"a two-level menu for the article model.
<nav class="main-navigation">
<ul class="top-level-menu">
{% categoryList categories with moduleId="1" parentId="0" %}
{% for item in categories %}
<li class="menu-item {% if item.HasChildren %}has-submenu{% endif %} {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.HasChildren %}
<ul class="sub-menu">
{% categoryList subCategories with parentId=item.Id %}
{% for subItem in subCategories %}
<li class="menu-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
</nav>
In this example, we first useparentId="0"Retrieve all top-level categories. When traversing each top-level category, we utilizeitem.HasChildrento determine if it has any subcategories. If there are subcategories, we make a call within the current<li>label againcategoryListLabel, but this time it willparentIdsetitem.Id, which is the ID of the current top-level category, thus obtaining its subordinate subcategories. In this way, it is easy to build a two-level navigation menu.
Implement three or more levels of nested navigation
Build three or more levels of navigation, the core idea is repeated nestingcategoryListTags, each timeparentIdSet to the upper levelitem.IdThis process can be extended infinitely according to your needs.
Here is an example of a three-level nested navigation implementation:
<nav class="main-navigation">
<ul class="level-1-menu">
{% categoryList categories with moduleId="1" parentId="0" %}
{% for item in categories %}
<li class="menu-item {% if item.HasChildren %}has-submenu{% endif %} {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.HasChildren %}
<ul class="level-2-menu">
{% categoryList subCategories with parentId=item.Id %}
{% for inner1 in subCategories %}
<li class="menu-item {% if inner1.HasChildren %}has-submenu{% endif %} {% if inner1.IsCurrent %}active{% endif %}">
<a href="{{ inner1.Link }}">{{ inner1.Title }}</a>
{% if inner1.HasChildren %}
<ul class="level-3-menu">
{% categoryList subCategories2 with parentId=inner1.Id %}
{% for inner2 in subCategories2 %}
<li class="menu-item {% if inner2.IsCurrent %}active{% endif %}">
<a href="{{ inner2.Link }}">{{ inner2.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
</nav>
In this example, we are in the second loopinner1and judge againinner1.HasChildrenIf true, the function is called againcategoryList,parentIdsetinner1.Idto get the third-level classificationinner2This pattern can continue to extend to build a deeper level of navigation structure.
Practical tips and suggestions
When building multi-level category navigation, in addition to the correct use of tags, there are also some practical considerations:
- Backend category management is fundamentalAll categories' hierarchical relationships must be correctly set in the 'Content Management' -> 'Document Category' section of the 'Security CMS' backend.Ensure that you have correctly selected the "parent category" when adding a subcategory.Only when the background data structure is clear can the front-end tags be accurately called.
- Style control is indispensable:
categoryListThe label is responsible for outputting HTML structure, and the visual effects of the navigation menu (such as hover dropdown, expand/collapse animation, highlighting, etc.) are completely dependent on your CSS and JavaScript code.Design menus reasonably to significantly enhance user experience. - Marking the current state: Utilizing
item.IsCurrentVariables, you can easily add a specific CSS class to the category that the current user is visiting and all its parent categories (for exampleactive), thus emphasizing the user's position visually. - Avoid excessive nesting: Although
categoryListSupports deep nesting, but from the perspective of user experience, too deep navigation levels often reduce the usability of the website. It is usually recommended to control the depth of navigation to three or four levels within. - Use flexibly
limitParametersIf you only want to display some categories at a certain level, you can uselimit="数量"Control the parameters.
By processingcategoryListA deep understanding and flexible application of tags, enabling you to build any complexity of user-friendly multi-level classification navigation menus for the Anqi CMS website, thereby better organizing content, guiding users, and optimizing search engine crawling.
Common Questions and Answers (FAQ)
Q1: Why is my multi-level menu only displaying top-level categories and not the subcategories?A1: Firstly, please check whether the subcategories are correctly set for the top-level category in your security CMS backend's 'Document Categories', and ensure that the parent category of the subcategories points to the correct top-level category ID. Secondly, confirm if you are using the loop for the top-level category in the template code.{% if item.HasChildren %}to judge and nested the secondcategoryListtag, and the secondcategoryListofparentIdwhether the parameter points to the correctitem.Id.
Q2: How to highlight the current user's category in the navigation menu?A2:categoryListeach tag ofitemincludes oneIsCurrentThe boolean variable. Whenitem.IsCurrentresponse fortrue, it indicates that the current category is the category corresponding to the page the user is visiting. You can add a conditional judgment in the<li>or<a>tag, for example{% if item.IsCurrent %}active{% endif %}, and then use CSS toactiveAdd class highlight style.
**Q3:moduleIdWhat is the parameter used for? If I don't want