In website operation, a clear and easy-to-navigate menu structure is a core factor in improving user experience and search engine friendliness.For websites with a large amount of content or a variety of product lines, building a multi-level, nested category navigation menu is particularly important.AnQiCMS (AnQiCMS) provides powerful template tag features, among whichcategoryListThe label is the key to achieving this goal.
This article will delve into how to utilizecategoryListThe label, flexibly builds and displays your multi-level category navigation menu.
Get to knowcategoryListThe label and its basic usage
categoryListThe tag plays a role in the Anqi CMS template in obtaining the list of category data. It helps us retrieve category information under different content models such as articles, products, etc.
Its basic structure is as follows when in use:
{% 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 habit.moduleIdThe parameter is crucial, it specifies which content model category you want to retrieve. For example,"1"typically represents an article model,"2"It may represent a product model. In the AnQi CMS backend, each category belongs to a specific content model, so this parameter is required to ensure 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 it to"0"It means that you want to get all top-level categories. This is the starting point for building a multi-level menu.
categoryListThe tag is in{% categoryList %}and{% endcategoryList %}betweenforLoop to iterate over each category item obtained. Each category itemitemProvided rich field information, for example:
item.IdUnique ID of the category.item.Title: The display name of the category.item.Link: The URL link of the category page.item.Description: The introduction or description of the category.item.ParentId: The ID of the parent category, for the top-level category, this value is usually0.item.HasChildrenA boolean value indicating whether the current category has subcategories. This field is the key to achieving multilevel nesting.item.IsCurrentA boolean value indicating whether the current category is the category of the current page, which can be used for highlighting.item.Spacer: If present, it will add a visual prefix to the subcategory (such as an indentation symbol).
By flexibly using these fields, we can design various complex navigation menus.
Build a two-level classification navigation menu
Firstly, we start building the navigation from the top-level categories of the website. Suppose we want to buildmoduleIdWith"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"Get all top-level categories. While traversing each top-level category, we useitem.HasChildrento determine if it has subcategories. If there are subcategories, we<li>call within the current tag againcategoryListtags, but this time we willparentIdis set toitem.IdThis represents the current top-level category ID, from which the subordinate subcategories can be obtained. This makes it easy to build a two-level navigation menu.
Implementing nested navigation with three layers and more.
Build a navigation with three or more levels, the core idea is to nest repeatedlycategoryListTags, each timeparentIdSet to the upper levelitem.Id. This process can be extended indefinitely according to your needs.
The following 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 loop in the second levelinner1In it, we judge againinner1.HasChildren. If true, call againcategoryList, willparentIdis set toinner1.Idto get the third-level classificationinner2This pattern can be extended to build a deeper navigation structure.
Practical tips and suggestions
When building multi-level category navigation, in addition to the correct use of tags, there are some practical considerations:
- Background category management is the foundationAll category hierarchies must be correctly set in the 'Content Management' -> 'Document Category' of the Anqi CMS backend.Make sure 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 tag is responsible for outputting HTML structure, while the visual effects of the navigation menu (such as hover drop-down, expand/collapse animation, highlight display, etc.) are entirely dependent on your CSS and JavaScript code.Reasonably designed menu style can significantly improve user experience. - Mark the current statusUtilize
item.IsCurrentVariable, you can easily add a specific CSS class to the category currently being accessed by the user and all its parent categories (for exampleactive), thus highlighting the user's position visually. - Avoid over nesting: Although
categoryListSupport 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. - Flexible application
limitParameterIf you only want to display some categories at a certain level, you can uselimit="数量"Parameters are controlled.
By processingcategoryListA deep understanding and flexible application of tags, you will be able 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.
Frequently Asked Questions (FAQ)
Q1: Why is my multi-level menu only displaying top-level categories and not the subcategories on the page?A1: First, check if the subcategories of the top-level category in your security CMS backend "Document Category" are set correctly, and make sure that the parent category of the subcategories points to the correct top-level category ID. Second, confirm whether you are using the loop of the top-level category in the template code.{% if item.HasChildren %}To judge and nest the second onecategoryListLabel, and the secondcategoryListofparentIdWhether the parameter is correctly pointing toitem.Id.
Q2: How to highlight the category of the current user in the navigation menu?A2:categoryListEach tag'sitemincludes oneIsCurrentThe boolean variable. Whenitem.IsCurrentWithtrueit indicates that the current category is the category corresponding to the page being visited by the user. You can<li>or<a>add a conditional judgment in the{% if item.IsCurrent %}active{% endif %}, and then style it with CSS.activeClass adds highlight style.
**Q3:moduleIdWhat is the role of the parameter? If I don't want