As an experienced website operations expert, I know 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 Django template engine provides us with great convenience.categoryListLoop gracefully to get the category link, Logo image, and the number of documents under the category.
In the template system of AnQiCMS,categoryListLabels are specifically used to search and display website classification information. Whether you need to list top-level article categories or subcategories under a specific category,categoryListCan respond 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 have passed throughcategoryListLabel obtained the category data set, the next task is to traverse these data, and display them on the web page. Here,forLoop tags are particularly important, as they allow us to process each category item one by one. Usually, we would assign the obtained list of categories to a variable (for example,categories), and thenforIn the loop, each category item is nameditem, making it convenient to access the properties of each category.
Easily obtain the exclusive link of the category
Each category carries a unique path to its detail page,categoryListin the loop, you can access{{item.Link}}属性，easily access the exclusive link of each category.This link is the accessible URL processed by AnQiCMS's pseudo-static rules, ensuring SEO-friendliness and user experience.<a>Tagshrefproperties, where a clickable category navigation item jumps out at you.
Accurately display the Logo and thumbnail of the category
Visual elements are crucial for enhancing user experience, especially for categorization identifiers.AnQiCMS in the category setting has considered this point, allowing to upload Logo image and thumbnail for each category.categoryListin the loop,{{item.Logo}}We will provide you with the address of the large picture or Banner image of the category, usually used in prominent positions or scenes requiring high-quality image display.{{item.Thumb}}Then it is usually used to display thumbnails that have been processed automatically by the system or set by the background, suitable for areas that require 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, it will fallback toThumbto ensure that the page always has appropriate images displayed.
a straightforward document quantity count
In addition to links and images, operators often also need to know how many documents are in each category.categoryListIn the loop{{item.ArchiveCount}}Property directly returns the total number of documents under the category (and its subcategories, if not specially configured).This data is very helpful for creating categorized lists with statistical information, such as displaying messages like 'Tutorial (123 articles)' or 'Product Category (50 models)', which can enhance users' expectations and interest in the categorized content.
Integration and Application: Build Dynamic Category Lists
Let's take a comprehensive example, which integrates all the information mentioned above into a typical classification list, helping you understand how they work together at a glance.
{% 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 usecategoryListtags to get the article model(moduleId="1"All top-level categories under parentId="0") in each iteration of the loop,item.Linkcategory access links were generated,item.Logooritem.ThumbResponsible for displaying the visual identifier of the category (here a simple logic is added, displaying the first letter of the title as a placeholder when neither Logo nor Thumb exist)item.ArchiveCountThen it clearly shows the number of articles under this category.
Master these skills, and you will be able to build beautiful and informative category lists in AnQiCMS, greatly enhancing the organization of website content and user navigation experience.AnQiCMS's template system is indeed a great helper for content operators with its intuitive tags and powerful data access capabilities.
Common Questions (FAQ)
Q:item.Logoanditem.ThumbWhat are the differences in practical application? How should I choose to use it?
Answer:item.LogoThe complete address of the large image or Banner image you upload for the category 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.ThumbThe returned value is the thumbnail address processed automatically by the AnQiCMS system or the one you set in the background. It is usually smaller in size and more suitable for scenarios such as lists, sidebars, navigation menus, etc., where space saving and fast loading are required.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.
Q:item.ArchiveCountHow many documents include subcategories? What if I want to only count documents under the current category?
Answer: By default,item.ArchiveCountIt will count the total number of documents under the current category and all its subcategories. This is very convenient when building comprehensive category statistics. AnQiCMS'scategoryListThe tag document mentioned,ArchiveCountThe calculation is the total number of documents under this category (and its subcategories, if not specifically configured). If you want to count only the number of documents under the current category and not include subcategories,archiveListspecify in the tag.child=falseGet the document list, then manually calculate, or check the category detail tagscategoryDetailIs there a field to provide the number of documents in the current category (the document does not specify explicitly, but CMS usually provides this information).
Q: If there is no Logo image or thumbnail image uploaded for the category,item.Logoanditem.ThumbWhat will be returned? How should I handle this situation?
Answer: If the category has not uploaded the corresponding Logo image or thumbnail,item.Logoanditem.ThumbProperties usually return an empty string. To avoid blank or error images on the page, you can add conditional judgments in the template. For example, using{% if item.Logo %}Check if the Logo exists, if not