How to display a multi-level nested category list in AnQiCMS, such as top-level categories and their subcategories?
When building a website, a clear and organized content structure is the foundation for improving user experience and search engine friendliness.Especially for content-rich websites, how to efficiently display multi-level nested category lists, such as top-level categories and their subcategories, is a concern for many operators.AnQiCMS as a flexible enterprise-level content management system provides intuitive and powerful template tags, allowing you to easily meet this requirement.
How AnQiCMS organizes category content
In the AnQiCMS backend, category management is the core of the content structure.You can create an independent classification system for different content models (such as articles, products, etc.).Each category can have its own parent category, thus building a hierarchy with different depths.For example, you can have a top-level category called "News Center", which includes subcategories such as "Company News", "Industry Dynamics", and so on. Under "Industry Dynamics", there may be further细分 such as "Technical Trends", "Market Analysis", and so on.This hierarchical structure not only facilitates management, but also lays the foundation for displaying multi-level nested lists on the front end.
The core of template calling:categoryListTag
To display these multi-level categories on the website front end, AnQiCMS mainly relies on its powerfulcategoryListTemplate tag. This tag helps us obtain classification data under specified conditions and is a key tool for building multi-level lists.
When we want to get all top-level categories, we can use it like thiscategoryListTags:
{% categoryList categories with moduleId="1" parentId="0" %}
{# 在这里循环处理顶级分类数据 #}
{% endcategoryList %}
here,moduleId="1"It usually represents the article model (specific ID can be viewed in the background content model), andparentId="0"It explicitly tells the system that we only retrieve the top-level categories without parent categories.categoriesIt is the variable name we define for the retrieved category data, which can be used in the loop later.itemOr customize a variable name to access the details of each category.
Build the logic for multi-level nested lists.
AnQiCMS template uses syntax similar to Django, with loops and conditionals being very intuitive, which provides convenience for building complex nested structures. The core idea to display multi-level categories is to check whether the current category contains subcategories while traversing the parent categories, and if it does, call it again.categoryListTag to get and display its subcategories.
Here is a typical example of multi-level category nesting logic:
{# 获取顶级分类，例如文章模型下的所有顶级分类 #}
{% categoryList categories with moduleId="1" parentId="0" %}
<ul class="main-category-list">
{% for item in categories %}
<li class="category-item">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{# 检查当前分类是否有子分类 #}
{% if item.HasChildren %}
<ul class="sub-category-list">
{# 如果有子分类，再次调用 categoryList 获取这些子分类 #}
{% categoryList subCategories with parentId=item.Id %}
{% for innerItem in subCategories %}
<li class="sub-category-item">
<a href="{{ innerItem.Link }}">{{ innerItem.Title }}</a>
{# 您可以在这里继续嵌套，检查 innerItem.HasChildren 获取三级分类 #}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
In this example, we first useparentId="0"Get all top-level categories. While traversing each top-level categoryitemwe useitem.HasChildrenTo determine if it has child categories. If true, we will nest an internalcategoryListlabel and pass the current top-level categoryitem.IdasparentIdso that we can accurately obtain its direct child categoriessubCategories. You can repeat this nested logic as needed to display more hierarchical categories.
Combine the content list display.
At times, we not only want to display the category itself, but also want to see the latest articles or product lists directly under a certain category.AnQiCMS also provides a convenient way to achieve this.You can flexibly introduce in the logic of judging whether the category has subcategoriesarchiveList.
For example, in the top-level category loop, if a category has no subcategories, we can directly display the articles under that category:
{# 假设我们正在构建一个产品展示页面， moduleId="2"代表产品模型 #}
<div class="product-categories-section">
{% categoryList productCategories with moduleId="2" parentId="0" %}
{% for item in productCategories %}
<div class="category-block">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<ul class="category-sub-items">
{% if item.HasChildren %}
{# 如果有子分类，显示子分类列表 #}
{% categoryList subCategories with parentId=item.Id %}
{% for subItem in subCategories %}
<li><a href="{{ subItem.Link }}">{{ subItem.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
{% else %}
{# 如果没有子分类，直接显示该分类下的产品列表 #}
{% archiveList products with type="list" categoryId=item.Id limit="8" %}
{% for product in products %}
<li>
<a href="{{ product.Link }}">
<img src="{{ product.Thumb }}" alt="{{ product.Title }}" />
<span>{{ product.Title }}</span>
</a>
</li>
{% empty %}
<li>当前分类下没有产品。</li>
{% endfor %}
{% endarchiveList %}
{% endif %}
</ul>
</div>
{% endfor %}
{% endcategoryList %}
</div>
This example shows how to decide whether to continue displaying the next level of categories or to display the product list under the current category in a loop, based on whether there are child categories.archiveListTag throughcategoryId=item.IdThe parameter accurately retrieves the content under the current category.
Some practical tips
- Style control:In the loop,
forloop.CounterIt can help you get the current loop index, often used to add different styles or numbering to list items.item.IsCurrentIt can be determined whether the current category is the category corresponding to the page being visited by the user, which is convenient for highlighting display. In addition,item.SpacerTags can automatically add prefix spaces to subcategories to achieve visual indentation effects, making the hierarchical relationships clear at a glance. - SEO optimization:AnQiCMS has built-in comprehensive SEO tools, including static rule management. When designing the category list, make sure the category links (
item.LinkUse friendly pseudo-static URLs. At the same time, utilizebreadcrumbtags to display breadcrumb navigation at the top of the page, which not only improves user experience but also helps search engines understand the website structure. - Backend Management:Flexible category display order, custom URLs, and the ability to set independent templates for specific categories (configurable in the background "Document Category"), all of which can help you finely control the front-end display.
AnQiCMS through its intuitive template tags and flexible backend management, allows you to easily navigate complex multi-level classification structures.Whether it is to build a simple hierarchical navigation or to display a composite list with content, AnQiCMS can provide an efficient and customizable solution to help your website reach a new level in content organization and user experience.
Frequently Asked Questions (FAQ)
How to only get the direct child categories of the current category, rather than all levels of subcategories?
You just need to specify incategoryListthe tag explicitly.parentIdThe parameter is the ID of the current parent category. For example, if you want to get the direct subcategories of a category with ID 10, you can write it like this:{% categoryList subCategories with parentId="10" %}In the loop,item.IdIt can provide the ID of the current parent category.
2. Does AnQiCMS support classification nesting between different content models (such as article models and product models)?
In AnQiCMS's category design, each category is strictly bound to a specific content model. This means that an 'article category' cannot become a subcategory of a 'product category',