As an experienced website operations expert, I know the value of a flexible and efficient content management system for the success of a website.AnQiCMS (AnQiCMS) boasts its high-performance architecture based on the Go language and the Django-style template engine, which brings great convenience and endless possibilities to content display.Today, let's delve deeply into a very common demand in actual operation: How to implement nested category display in AnQiCMS templates, making your website structure clearer and user experience even better.
The foundation of organizing content: Understanding AnQiCMS classification structure
Before delving into the template code, we first need to understand how AnQiCMS organizes categories in the background.One of the core strengths of AnQi CMS is itsEach category can specify its 'parent category' when created, which naturally establishes a hierarchical relationship.For example, you can have a 'news center' as a primary category, under which you can have 'industry news' and 'company dynamics' as secondary categories. If needed, you can even set up a third-level category.This hierarchical relationship is the basis for nested display in our template.
In the background management interface, we can see that each category not only has a name and a brief introduction, but also some important attributes, such as the "document model" it belongs to and the most important "parent category" ID.At the same time, AnQiCMS also allows us to set custom URLs, thumbnails, and even exclusive 'category templates' for categories, which provides us with rich operability for subsequent template design.
The art of template engine: The use of Django-like syntax
The template creation of AnQiCMS is very user-friendly, it uses a syntax similar to Django's template engine.This means you can use intuitive labels to control the display logic of content.{{ 变量名 }}while logical judgments and loop control use single curly braces and percentage signs{% 标签 %}The core tool for nested display of multi-level categories isforloop tags andifConditional judgment tags, they will help us traverse the category data and render it conditionally according to its hierarchical relationship.
The core of realizing multi-level category nesting:categoryListTag
We mainly rely on displaying category lists in the AnQiCMS template,categoryListLabel. This label is powerful and can retrieve classification data of articles or products, and supports flexible filtering conditions.
categoryListThe key parameters of the label include:
moduleId: Used to specify which content model category we want to obtain (e.g., article model ID is 1, product model ID is 2).parentId: This is the core of achieving nested display. When set to"0"When it does, it retrieves all top-level categories; while if we want to get the child categories of a specific category, we can setparentIdto the parent category ofId.allIf set totrueand combinemoduleIdCan retrieve all categories under a specified model, regardless of the level.
categoryListThe label will return an array containing category objects.forIn the loop, each category object (we usually name ititem) includes many useful properties, such as:
IdUnique ID of the category.Title: Category name.Link: Link to the category page.ParentId: ID of the parent category.HasChildrenA boolean value indicating whether the current category contains subcategories. This property is particularly important when building nested structures, as it can be used to determine whether to render the next level menu.SpacerA prefix used to display the hierarchy relationship in the background, usually not used in the front-end display, but can help understand the hierarchy.
Build nested classification templates step by step
Let's go through a specific example to show how to usecategoryListtags to achieve nested display of three-level classification.
Suppose we want to display the article model (moduleId="1"All categories under this level are presented in a nested list format:
{%- comment -%} 首先，我们获取所有顶级分类 (parentId="0") {%- endcomment -%}
{% categoryList categories with moduleId="1" parentId="0" %}
<ul>
{%- for item in categories %}
<li>
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- comment -%} 检查当前分类是否有子分类，如果有，则继续获取下一级 {%- endcomment -%}
{%- if item.HasChildren %}
{%- comment -%} 获取当前一级分类的子分类，将当前分类的ID (item.Id) 作为下一级的 parentId {%- endcomment -%}
{% categoryList subCategories with parentId=item.Id %}
<ul>
{%- for inner1 in subCategories %}
<li>
<a href="{{ inner1.Link }}">{{inner1.Title}}</a>
{%- comment -%} 再次检查当前二级分类是否有子分类 {%- endcomment -%}
{%- if inner1.HasChildren %}
{%- comment -%} 获取当前二级分类的子分类，将当前二级分类的ID (inner1.Id) 作为下一级的 parentId {%- endcomment -%}
{% categoryList subCategories2 with parentId=inner1.Id %}
<ul>
{%- for inner2 in subCategories2 %}
<li>
<a href="{{ inner2.Link }}">{{inner2.Title}}</a>
</li>
{%- endfor %}
</ul>
{%- endcategoryList %}
{%- endif %}
</li>
{%- endfor %}
</ul>
{%- endcategoryList %}
{%- endif %}
</li>
{%- endfor %}
</ul>
{%- endcategoryList %}
In this code, we巧妙ly use nested structurescategoryListTags andforLoop:
- The outermost
categoryListResponsible for retrieving the top-level categories. - Within the loop of each top-level category, we use
{% if item.HasChildren %}to determine if it has subcategories. - If there are subcategories, we call
categoryListagain, but this time we setparentIdto the current parent category's{{ item.Id }}Thus, you can obtain the next level of classification. - This process can be nested infinitely according to your actual needs until all levels of classification are displayed.
Advanced Practice: Combining Navigation List Nesting
In addition to directly displaying categories, the navigation menu of our website also often needs to present multi-level categories. AnQiCMS'snavListTags also support multi-level nesting and can be easily combined with category data to achieve dynamic navigation.
InnavListEach navigation item in the tag,itemhasNavListA property, which itself is also an array, containing the child navigation items of the current navigation item. If the navigation item is linked to a category page, its