In the template development of AnQi CMS, category list (categoryList) Tag is one of the core tools for organizing website content and building navigation.It can help us easily display the classification structure of articles, products, and other content.However, in practical applications, we may not only need to display the categories themselves, but also need to flexibly adjust the page layout based on the number of categories, or decide whether to display an "All" option so that users can browse the content under all categories.

Then, how do wecategoryListReturn the total number of categories obtained from the list of categories and use it to control the display logic of the page. Next, we will delve into this practical skill.

UnderstandingcategoryListTag and its returned data

First, let's take a look back atcategoryListThe basic usage of the tag. The main function of this tag is to obtain the classification list of the website, and we can go throughmoduleIdSpecify the category of content model to be retrieved (for example, article model ID is 1, product model ID is 2), throughparentIdParameters to obtain child categories under a parent category, or throughparentId="0"获取顶级分类。

When we use{% categoryList categories with moduleId="1" parentId="0" %}This way, when calling a tag, it will return a method namedcategoriesThe array object.This array contains all the classification information that meets the conditions, such as each category's ID, title, and link.categoriesarray.

To get the total number of categories

In the template engine of AnQi CMS, there are several ways to easily obtaincategoryListthe total number of categories returned by the tag:

  1. UtilizeforIn the loopforloop.LengthPropertyWhen we areforiterate over the loopcategoriesan array when,forloopThis built-in object will automatically provide some information about the current loop, includingforloop.Lengthwhich represents the total length of the array currently being looped through.

    {% categoryList categories with moduleId="1" parentId="0" %}
    {% if categories %} {# 首先判断列表是否为空 #}
        {% for item in categories %}
            {# 这里的 forloop.Length 就是分类列表的总数 #}
            <p>当前分类总数：{{ forloop.Length }}</p>
            <p>分类名称：{{ item.Title }}</p>
        {% endfor %}
    {% endif %}
{% endcategoryList %}

    This method is very intuitive, especially suitable for when you are already iterating over a classified list and need to use the total count inside the loop.

  2. UselengthFilter lengthThe filter is a general-purpose filter provided by the AnQi CMS template engine, which can be used to get the length of strings, arrays, or key-value pairs. ForcategoryListreturnedcategoriesarrays, we can use it directly.lengthFilter to get the total count without entering the loop.

    {% categoryList categories with moduleId="1" parentId="0" %}
    {% set categoryCount = categories|length %}
    <p>分类列表总数：{{ categoryCount }}</p>
{% endcategoryList %}

    This method is more flexible because it canforRetrieve the total directly outside the loop, which is very suitable for situations where you need to know the total in advance, such as layout control. To keep the code neat, we usually assign it to a temporary variable (such ascategoryCount），convenient for subsequent use.

Actual application: control page layout and the 'All' option

After understanding how to get the total number of categories, we can apply it to the actual page design.

Scene one: Dynamically adjust the page layout based on the number of categories

Assuming we have a categorized navigation area, if the number of categories is less than 5, we want them to be displayed horizontally in a tiled manner; if there are more than 5, it may be necessary to display a 'More' button or use a two-column layout or more.

{% categoryList categories with moduleId="1" parentId="0" %}
    {% set categoryCount = categories|length %}

    {% if categoryCount > 5 %}
        <div class="category-nav-complex">
            {# 复杂的布局，例如多列或者带滚动条的布局 #}
            <p>当前有 {{ categoryCount }} 个分类，采用复杂布局。</p>
            <ul>
                {% for item in categories %}
                    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
                {% endfor %}
            </ul>
        </div>
    {% else %}
        <div class="category-nav-simple">
            {# 简单的布局，例如横向平铺 #}
            <p>当前有 {{ categoryCount }} 个分类，采用简洁布局。</p>
            <ul>
                {% for item in categories %}
                    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
{% endcategoryList %}

Scene two: Dynamically display the "All" option

In many category lists, we hope to provide an "All" option before all specific categories, which, when clicked, can view the content under all categories.If the website itself has only one category, or has no categories at all, then the "All" option may seem redundant.By getting the total number of categories, we can intelligently control the display of the "All" option.

<div class="category-filter-bar">
    {% categoryList categories with moduleId="1" parentId="0" %}
        {% set categoryCount = categories|length %}

        {# 只有当存在多个分类时，才显示“全部”选项。或者即使只有一个分类，也希望显示“全部” #}
        {% if categoryCount > 1 or categoryCount == 1 %} {# 可以根据实际需求调整这里的条件 #}
            <a href="/archive/list.html" class="{% if currentCategoryId == 0 %}active{% endif %}">全部</a>
        {% endif %}

        {% for item in categories %}
            <a href="{{ item.Link }}" class="{% if currentCategoryId == item.Id %}active{% endif %}">{{ item.Title }}</a>
        {% endfor %}
    {% endcategoryList %}
</div>

In this example,currentCategoryIdSuppose it is the category ID of the current page. When it is 0, it indicates that the "All" content is currently being viewed. ThroughcategoryCountThe judgment, we can make the 'All' option visible only when it is meaningful, to avoid page redundancy.

getcategoryListThe total number of returned category list is a simple but very useful trick. Whether it is to better control the page layout or to provide more intelligent user interaction, masteringforloop.LengthorlengthFilters can make your security CMS website template more flexible and adaptable.Through these methods, you can make the website content display more in line with user needs, providing a smoother browsing experience.

Common Questions (FAQ)

  1. forloop.Lengthand|lengthWhat are the differences between filters? forloop.LengthisforSpecial variable used inside the loop, it can only obtain the total length of the current loop list each time the loop iterates.|lengthThe filter can be applied to any array, string, or key-value object, regardless of whether it is inside a loop. In short,forit can directly obtain the length of the object. Briefly,forloop.LengthWith context constraints,.|lengthThe filter is more general.

  2. How to judgecategoryListIs the returned list empty?You can useifLabel direct judgment.categoriesDoes the variable exist or is its length greater than 0. For example:

    {% categoryList categories with moduleId="1" parentId="0" %}
    {% if categories %} {# 判断categories是否存在且不为空 #}
        {# 列表不为空时的处理逻辑 #}
    {% else %}
        {# 列表为空时的处理逻辑 #}
    {% endif %}
{% endcategoryList %}

    or using|lengthFilter:

    {% categoryList categories with moduleId="1" parentId="0" %}
    {% if categories|length > 0 %}
        {# 列表不为空时的处理逻辑 #}
    {% else %}
        {# 列表为空时的处理逻辑 #}
    {% endif %}
{% endcategoryList %}

  3. 除了总数，categoryList还能提供哪些有用的信息来控制页面显示？ categoryList标签返回的每个分类对象 (item) 包含许多有用的属性，例如item.Id(Category ID),item.Title(分类标题),item.Link(Category Link),item.Description(Category Description),item.HasChildren(Has Subcategory),item.IsCurrent(Is Current Category) etc. You can further refine the page display logic based on these properties, for example, judgeitem.HasChildrenTo decide whether to display the secondary menu or judgeitem.IsCurrentTo add an active style for the current category.