How to list category information in AnQiCMS templates by module or parent-child relationship?

AnQiCMS (AnQiCMS) detailed guide on listing category information by module or parent relationship in templates

As a senior CMS website operator for information security, I know the importance of content organization.An intuitive and easy-to-navigate classification system not only enhances user experience but is also the foundation of SEO optimization.The Anqi CMS provides us with various ways to display category information in website templates by module or parent-child relationship, thanks to its flexible content model and powerful template tag system.This article will delve into how to use these features to build an efficient classification list.

Understand the classification structure of AnQiCMS

In the Auto CMS, categories are the framework for organizing website content.Each category is associated with a specific "content model", such as an "article model" or a "product model".This association ensures the structurization and consistency of classified content.Moreover, Anqi CMS supports multi-level categorization, which means that there can be a clear 'parent-child' relationship between categories, forming a hierarchical content structure.Understanding this structure is the first step in effectively calling the classification information.

UsecategoryListTag to get category information

categoryListThe label is a core tool used in the AnQi CMS template system to list category information.It allows us to filter and display categories based on different conditions, whether it's top-level categories, all categories under a specific model, or the child categories of a certain parent category.

This tag's basic usage is{% categoryList categories with ... %}where,categoriesis the variable name you define for the category list...It is the parameter we use to specify the filtering and sorting conditions. In the loop traversalcategoriesWhen a variable is defined, we can access the detailed information of each category, such asitem.Id(Category ID),item.Title(category title),item.Link(category link),item.Description(Category Description) as well asitem.HasChildren(Whether it includes subcategories) and so on.

List top-level categories by content module

When building the main navigation or entry of a specific module on a website, we often need to list the top-level categories that belong to a particular content model.For example, you may want to display all the first-level categories under the two main modules "Articles" and "Products" on the homepage.

To achieve this, we need to usemoduleIdparameters to specify the ID of the target content model, and setparentId="0"to explicitly get only the top-level categories. The article model is usually set tomoduleId="1",Product model may bemoduleId="2"The specific ID can be viewed in the content model management on the backend.

{# 假设文章模型的ID是1 #}
<div class="main-articles-nav">
    <h3>文章分类</h3>
    <ul>
        {% categoryList topCategories with moduleId="1" parentId="0" %}
            {% for category in topCategories %}
                <li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
            {% endfor %}
        {% endcategoryList %}
    </ul>
</div>

{# 假设产品模型的ID是2 #}
<div class="main-products-nav">
    <h3>产品分类</h3>
    <ul>
        {% categoryList productCategories with moduleId="2" parentId="0" %}
            {% for category in productCategories %}
                <li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
            {% endfor %}
        {% endcategoryList %}
    </ul>
</div>

In this way, we can clearly display the classification of different content modules independently, providing users with targeted navigation entries.

List subcategories by parent-child relationship

In addition to listing top-level categories, building multi-level navigation or displaying subcategories on category detail pages is a common requirement. The Anqi CMS supports this feature perfectly.categoryListTagged throughparentIdThe parameters perfectly support this feature.

To get the direct subcategories of a specific category, you can specify the parent category'sIdPass toparentIdparameter. If the current page itself is a category page, we can also combinecategoryDetailTag dynamically retrieves the current category ID and lists its subcategories.

{# 假设我们正在一个文章分类详情页,需要列出当前分类的所有子分类 #}
{# 首先获取当前分类的ID #}
{% categoryDetail currentCategoryId with name="Id" %}

<div class="sub-category-list">
    <h3>当前分类的子分类</h3>
    <ul>
        {% categoryList subCategories with parentId=currentCategoryId %}
            {% for subCategory in subCategories %}
                <li><a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a></li>
            {% endfor %}
        {% endcategoryList %}
    </ul>
</div>

We can also implement nested multi-level classification display, which is very useful when building complex tree navigation. This requires multiple layerscategoryListNested tags, with each level using the classification ID of the previous level asparentId.

{# 嵌套多级分类示例:列出文章模型下的三级分类 #}
<nav class="multi-level-nav">
    {% categoryList level1Categories with moduleId="1" parentId="0" %}
        <ul>
            {% for level1 in level1Categories %}
                <li>
                    <a href="{{ level1.Link }}">{{ level1.Title }}</a>
                    {# 判断是否存在子分类 #}
                    {% if level1.HasChildren %}
                        {% categoryList level2Categories with parentId=level1.Id %}
                            <ul>
                                {% for level2 in level2Categories %}
                                    <li>
                                        <a href="{{ level2.Link }}">{{ level2.Title }}</a>
                                        {% if level2.HasChildren %}
                                            {% categoryList level3Categories with parentId=level2.Id %}
                                                <ul>
                                                    {% for level3 in level3Categories %}
                                                        <li><a href="{{ level3.Link }}">{{ level3.Title }}</a></li>
                                                    {% endfor %}
                                                </ul>
                                            {% endcategoryList %}
                                        {% endif %}
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endcategoryList %}
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    {% endcategoryList %}
</nav>

Combine classification list to display related documents

The further application scenarios are, you may wish to display some documents under each category while listing the categories, for example, in the 'Latest Articles' section on the homepage, displaying a few latest articles by category. This can be achieved by...archiveListthe template)categoryListTo implement inside the tag.

<div class="category-with-archives">
    {% categoryList categories with moduleId="1" parentId="0" limit="4" %} {# 假设只显示4个顶级分类 #}
        <section>
            <h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>
            <ul>
                {% archiveList archives with type="list" categoryId=category.Id limit="5" %} {# 每个分类显示5篇文档 #}
                    {% for archive in archives %}
                        <li>
                            <a href="{{ archive.Link }}">
                                <img src="{{ archive.Thumb }}" alt="{{ archive.Title }}">
                                {{ archive.Title }}
                            </a>
                        </li>
                    {% empty %}
                        <li>暂无相关文档。</li>
                    {% endfor %}
                {% endarchiveList %}
            </ul>
        </section>
    {% endcategoryList %}
</div>

optimizations and注意事项 in practice

In practical operations, to ensure website performance and user experience, please pay attention to the following points:

  • ClearmoduleIdandparentId:Always be clear about which content model category you want to retrieve and which level these categories belong to. This will helpcategoryListTag data queries efficiently.
  • ControllimitParameters:Use list tags appropriatelylimitThe parameter is used to limit the number of returned items, to avoid loading too much data at once, especially on the homepage or sidebar and other locations.
  • UtilizeHasChildrenWhen building multi-level navigation, useitem.HasChildrenThe condition judgment is used to determine whether to render the container of subcategories, which can avoid generating empty HTML structures.
  • Template caching:Security CMS built-in caching mechanism, proper use can accelerate page loading. When performing complex data calls, if the data does not change frequently, consider related caching strategies.
  • Static rules:Ensure your category link (item.Link) is accessible on the front end. Anqi CMS provides flexible pseudo-static rule configuration to ensure that the generated URLs are SEO-friendly.

Through the refined application ofcategoryListTags and parameters, we can flexibly build any classification display method in the security CMS template that you want, whether it is a simple module navigation or a complex multi-level content structure, it can be easily realized, thus providing visitors with a clear structure, rich content, and easy to explore website.


Common Questions (FAQ)

Q1: How to list all categories under all content models on any page, not just the categories of a specific module?

A1:You can usecategoryListLabel and setall=trueGet all content models and their categories. If distinction is still needed, it can be made within the loop.item.ModuleIdoritem.ModuleName(ifModuleNameavailable, not explicitly listed in the document, butitem.ModuleIdThere is such a thing) for judgment and grouping display. For example:{% categoryList allCategories with all=true %}.

Q2: If my classification level is very deep, will multi-layer nestingcategoryListaffect website performance?

A2:Indeed, excessive nested loops can have a certain impact on front-end rendering performance, especially when dealing with large amounts of data.For deeply nested categories, it is recommended to optimize your template logic, or consider lazy loading or asynchronous requests for subcategory data on the frontend using JavaScript.In the backend, the high-performance architecture of the Go language in the AnQi CMS can usually handle these queries well, but front-end rendering is still the bottleneck.When designing categories in the background, it should also consider a reasonable level depth to avoid unnecessary complexity.

Q3: I want to display the total number of documents under each category in the category list,categoryListdoes the tag support?

A3:Yes,categoryListLoop item of tagsitemcontains "auto"ArchiveCountField, which can be directly called to display the number of documents under the category. For example:{{ item.Title }} ({{ item.ArchiveCount }})This is very helpful for users to understand the amount of classification content.