How to get the link, Logo image, and document count in the `categoryList` loop?

As an experienced website operations expert, I fully understand the importance of an efficient and flexible content management system for daily operations.AnQiCMS with its high-performance architecture based on the Go language and the friendly syntax of the Django template engine, provides us with great convenience.Today, let's explore a very practical technique in website front-end display: how tocategoryListElegantly obtain the link, Logo image, and the number of documents under the category in a loop.

In the AnQiCMS template system,categoryListTags are specifically used to retrieve and display website category information. Whether you need to list top-level article categories or subcategories under a specific category,categoryListCan be handled flexibly. It allows us to filter categories by module ID (moduleId) or parent category ID (parentId) to build various complex navigation and content organization structures.

Once we pass throughcategoryListLabel gets the collection of classified data, the next task is to traverse these data, and display them on the web page. Here,forThe loop tag is particularly important, as it allows us to process each category item one by one. Typically, we will assign the obtained category list to a variable (such ascategories)，thenforLoop and name each category itemitemSo you can easily access the properties of each category.

Easily get the exclusive link of the category

Each category carries a unique path to its detail page, incategoryListthe loop, you can access{{item.Link}}Property, easily obtain the exclusive link of each category. This link is the accessible URL after AnQiCMS static rule processing, ensuring SEO friendliness and user experience.Just put it in<a>label'shrefin the properties, a clickable category navigation item appears before your eyes.

Accurately display the Logo and thumbnail of the category

Visual elements are crucial for enhancing user experience, especially for categorization identifiers.AnQiCMS has taken this into consideration in the category settings, allowing upload of Logo images and thumbnails for each category.categoryListthe loop,{{item.Logo}}Will provide you with the address of the large image or Banner image of the category, usually used in prominent positions or scenes requiring high-quality image display.{{item.Thumb}}It is usually used to display category thumbnails processed automatically by the system or set by the background, suitable for areas that need small-sized images such as lists, sidebars, etc. You can choose to use one according to the page layout and design requirements, and even judge first.LogoDoes it exist, if not, fallback toThumbTo ensure that the page always has appropriate images displayed.

A clear count of the number of documents

In addition to links and images, operators often also need to know how many documents are under each category.categoryListin the loop{{item.ArchiveCount}}The attribute directly returns the total number of documents under the category (and its subcategories, if not specially configured).This data is very helpful for creating a category list with statistical information, such as displaying information like "Tutorial (123 articles)" or "Product Category (50 models)", which can enhance users' expectations and interest in the category content.

Integration Application: Build Dynamic Category Lists

Let's take a comprehensive example that integrates all the information mentioned above into a typical classification list, helping you understand how they work together clearly.

{% categoryList categories with moduleId="1" parentId="0" %}
    <ul class="category-list">
    {% for item in categories %}
        <li class="category-item">
            <a href="{{ item.Link }}" class="category-link">
                {# 优先显示Logo图，如果没有则显示缩略图 #}
                {% if item.Logo %}
                    <img src="{{ item.Logo }}" alt="{{ item.Title }} Logo" class="category-logo">
                {% elif item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }} 缩略图" class="category-thumb">
                {% else %}
                    {# 如果两者都没有，可以显示一个默认占位符或文本 #}
                    <span class="category-icon-placeholder">{{ item.Title|slice:":1" }}</span>
                {% endif %}
                <h3 class="category-title">{{ item.Title }}</h3>
                <span class="document-count">({{ item.ArchiveCount }} 篇文档)</span>
            </a>
            {# 这里可以根据需要添加子分类的嵌套循环 #}
            {% if item.HasChildren %}
                {# 例如：{% categoryList subCategories with parentId=item.Id %}...{% endcategoryList %} #}
            {% endif %}
        </li>
    {% endfor %}
    </ul>
{% endcategoryList %}

In this code snippet, we first usecategoryListthe tag to get the article model(moduleId="1") under all top-level categories(parentId="0")。In each iteration of the loop,item.Linkthe access link of the category was generated,item.Logooritem.ThumbResponsible for displaying the visual identification of the category (an additional simple logic is added here, which displays the first letter of the title as a placeholder when neither Logo nor Thumb exist), anditem.ArchiveCountIt clearly shows the number of articles in the category.

Master these skills, and you will be able to build a beautiful and informative category list in AnQiCMS, greatly enhancing the organization of website content and user navigation experience.The AnQiCMS template system, with its intuitive tags and powerful data access capabilities, is indeed a rare good helper for content operators.

Frequently Asked Questions (FAQ)

Question:item.Logoanditem.ThumbWhat are the differences in practical application? How should I choose to use it?

Answer:item.LogoIt usually returns the complete address of the large image or Banner image you upload in the background, suitable for use at the top of the page, in the focus area, or when a larger, more expressive image is needed.item.ThumbIt returns the thumbnail address automatically processed by the AnQiCMS system or the one you set in the background, which is usually smaller in size and more suitable for scenarios where space and quick loading are needed, such as lists, sidebars, navigation menus, etc.You can flexibly choose to use it according to the specific page layout and design requirements, and even set a priority as shown in the article example to ensure that there is an alternative solution when one image is missing.

Question:item.ArchiveCountHow many documents include subcategories? What if I want to count only the documents under the current category?

Answer: By default,item.ArchiveCountCounts the total number of documents under the current category and all its subcategories. This is very convenient when building comprehensive category statistics. AnQiCMS'scategoryListIt is mentioned in the tag document,ArchiveCountThe calculation is the total number of documents under the category (and its subcategories, if not specifically configured). If you want to count the number of documents under the current category only and not include subcategories, you need toarchiveListExplicitly specify in the tagchild=falseTo get the document list, then manually calculate, or check the category detail tagscategoryDetailIs there a field for the number of documents in the current category (the document is not explicitly stated, but it is usually provided by CMS).

Question: If the category does not have a logo image or thumbnail uploaded,item.Logoanditem.ThumbWhat will be returned? How should I handle this situation?

Answer: If the category does not upload the corresponding Logo image or thumbnail,item.Logoanditem.ThumbThe property usually returns an empty string. To avoid blank spaces or errors on the page when images are missing, you can add conditional judgments in the template. For example, using{% if item.Logo %}Check if the Logo exists, if not