When building a website, a clear and organized content structure is the foundation for improving user experience and search engine optimization.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 an 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 AnQiCMS backend, category management is the core of content structure.You can create independent category systems for different content models (such as articles, products, etc.).Each category can have its own parent category, thereby building a hierarchical relationship with varying depths.For example, you can have a top-level category such as 'News Center', which includes subcategories like 'Company News', 'Industry Dynamics', and so on. The 'Industry Dynamics' category may also have more refined subcategories such as 'Technology Trends' and 'Market Analysis'.This layering is not only convenient for management, but also lays a foundation for the front-end display of multi-level nested lists.
The core of template call:categoryListtags
To display these multi-level categories on the website front-end, AnQiCMS mainly relies on its powerfulcategoryListTemplate tag. This tag helps us get 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 want to get the top-level categories without parent categories.categoriesis the variable name we define for the category data we obtain, which can be used in the loop later.itemOr use a custom variable name to access the detailed information of each category.
Build the logic of multi-level nested lists.
AnQiCMS template uses syntax similar to Django, with loops and conditional judgments very intuitive, which provides convenience for constructing complex nested structures. The core idea for displaying multi-level categories is to check if the current category contains subcategories while traversing the parent categories, and if it does, call it again.categoryListLabel to get and display its subcategories.
Here is a typical multi-level category nesting logic example:
{# 获取顶级分类，例如文章模型下的所有顶级分类 #}
{% 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 go throughitem.HasChildrenTo determine whether it has subcategories. If true, we will nest an internal.categoryListLabel, and pass the current top-level category.item.IdasparentId, so that we can accurately get its direct subcategories.subCategories. You can repeat this nested logic as needed to display more hierarchical classifications.
Combine content list display
Many times, we not only want to display the categories themselves, but also want to see the latest articles or product lists under a certain category.AnQiCMS also provides a convenient way to achieve this.archiveListLabel.
For example, in the top-level category loop, if a category does not have any 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 demonstrates 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 subcategories.archiveListTagged throughcategoryId=item.IdParameters, accurately obtained the content under the current category.
Some practical tips.
- Style control:In the loop,
forloop.CounterIt can help you get the index of the current loop, 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 accessed by the user, which is convenient for highlighting. In addition,item.SpacerThe label can automatically add a prefix space to subcategories, achieving a visual indentation effect, making the hierarchical relationship clear at a glance. - [en] SEO Optimization:AnQiCMS has built-in comprehensive SEO tools, including static rule management. When designing category lists, make sure the category links (
item.Link）Use friendly pseudo-static URLs. At the same time, take advantage ofbreadcrumbtags to display breadcrumb navigation at the top of the page, which not only improves user experience but also benefits search engines in understanding the website structure. - Back-end management:Flexible display order of categories, custom URLs, and the ability to set independent templates for specific categories (configurable in the "Document Categories" section of the backend), all of these features can help you have a more refined control over the front-end display.
AnQiCMS through its intuitive template tags and flexible backend management, allows you to easily handle complex multi-level classification structures.Whether it is to build a simple hierarchical navigation or display a composite list with content, AnQiCMS can provide an efficient and customizable solution to help your website take a step up in content organization and user experience.
Common Questions (FAQ)
1. How to get only the direct child categories of the current category, rather than all levels of child categories?
You just need to specify incategoryListthe labelparentIdThe parameter is the ID of the current parent category. For example, if you want to get the direct subcategories of the category with ID 10, you can write it like this:{% categoryList subCategories with parentId="10" %}In the loop,item.IdIt can provide the current parent category ID.
2. Does AnQiCMS support classification nesting between different content models (such as article models and product models)?
AnQiCMS's category design strictly binds each category to a specific content model. This means that a 'article category' cannot be a subcategory of a 'product category'.