An enterprise-level content management system, AnQi CMS provides high flexibility and powerful functions in content organization and presentation.For enterprises, especially those with complex product lines or websites with a large amount of content, how to achieve clear and logical multi-level nested display of categories is the key to improving user experience and content management efficiency.Today, let's delve into how AnQiCMS elegantly achieves this goal.
AnQiCMS's foundation: Flexible content model and classification system
In AnQiCMS, the foundation of building multi-level categories is its 'flexible content model' and the closely related 'document classification' feature.This is like setting up different 'blueprints' for your website content, with each blueprint defining the unique properties and management methods for a category of content.For example, when we need to display products, we can create a special "product model" that includes fields unique to products such as price, inventory, SKU, and so on.
It is worth noting that AnQiCMS' categories are bound to the content model.This means, when you create a category for 'Electronics', it will clearly indicate which model it belongs to, such as 'Product Model'.All category operations, including the construction of multi-level categories, will be centered around this specific content model.This design ensures high structurization of content and clear management.
Building multi-level classification: Detailed backend operations
The backend interface design of AnQiCMS is intuitive, even non-technical personnel can easily get started. To build multi-level categories, such as product categories, you just need to follow the following steps:
Define the content model:Firstly, go to the "Content Management" module in the background and enter the "Content Model" settings.Here, you can create or edit a "Product Model" and add necessary custom fields, such as "Brand", "Material", etc., to meet your personalized product display needs.
Create Top-Level Category:Then, enter the "Document Classification" management page.Click "Add Category", set the first-level category for your product, such as "Home Appliances", "Digital Accessories", "Clothing & Shoes" and so on.At creation time, select the content model it belongs to as the previously created 'Product Model'.These top-level categories' 'parent category' option is usually set to none.
Create Sub-Level Category:Select a primary category, you can add subcategories for it.For example, under "Home AppliancesAt this moment, in the form for creating subcategories, select 'Parent Category' as the one you just created at the top level.AnQiCMS will intelligently prompt you to ensure that the child category you choose belongs to the same "content model" as the parent category, thus avoiding confusion in the data structure.This process can be nested infinitely, theoretically supporting any depth of classification levels, allowing you to organize content finely according to business logic.
Associate Products (Documents) with Category:Finally, when you publish a specific product in the "Document Management", just select the corresponding lowest-level category under its category.AnQiCMS will automatically assign products to the carefully designed classification structure you created.
Magic of Front-End Display: Flexible Use of Template Tags
How to display the nested category structure on the website front-end after the background settings are well arranged, which is the highlight of AnQiCMS template engine.AnQiCMS uses a syntax similar to Django template engine, providing a series of powerful tags to call and render data.
The Core of Realizing Multi-Level Nested Category Display iscategoryListLabel, it allows you to retrieve categories by condition and perform cyclic output.
Firstly, we can call all top-level product categories:
{% categoryList topCategories with moduleId="你的产品模型ID" parentId="0" %}
{# 在这里循环遍历所有一级分类 #}
{% for category in topCategories %}
<div class="top-level-category">
<a href="{{ category.Link }}">{{ category.Title }}</a>
{# 判断当前分类是否有子分类 #}
{% if category.HasChildren %}
<ul class="sub-level-categories">
{# 嵌套调用categoryList，获取当前分类的子分类 #}
{% categoryList subCategories with parentId=category.Id %}
{% for subCategory in subCategories %}
<li class="sub-level-category">
<a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
{# 如果还需要更深层次的嵌套，可以继续在这里判断subCategory.HasChildren并再次嵌套调用 #}
{% if subCategory.HasChildren %}
<ul class="third-level-categories">
{# 再次嵌套调用，获取三级分类 #}
{% categoryList thirdCategories with parentId=subCategory.Id %}
{% for thirdCategory in thirdCategories %}
<li><a href="{{ thirdCategory.Link }}">{{ thirdCategory.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</div>
{% endfor %}
{% endcategoryList %}
In the above template code, we:
- Outer layer
categoryList: ThroughmoduleId指定了要获取的分类所属的产品模型，并用 EnglishparentId="0"限定只获取顶级分类。 category.HasChildrenJudgment：在每次循环中，利用 EnglishHasChildrenThis boolean value is used to determine whether the current category has subcategories. It decides whether to continue the nested display.- Inner layer
categoryListNestedIfcategory.HasChildrenIf true, we will use it again internally.categoryListtags, andparentIdParameter is set to the current loop categorycategory.IdThus, it can accurately obtain its subcategories. This process can be nested in multiple layers according to your category depth requirements.
Moreover, if you wish to display the corresponding product list directly under a category rather than an empty subcategory list, you can use it whencategory.HasChildrenthe condition isarchiveListTag to call the products (documents) under this categorycategoryId=category.IdPerform association.