As an expert who has been deeply engaged in the content operation of AnQiCMS for a long time, I fully understand the importance of the classification list in website structure and user experience. Flexible usecategoryListTags can help us efficiently organize content, build a clear navigation system, and provide readers with a more accurate path to content discovery. Below, I will elaborate on how to usecategoryListTag to get and loop to display the category list under the specified content model.
Using AnQiCMS'scategoryListTag to get and loop to display the category list under the specified content model.
In AnQiCMS template development,categoryListThe tag is used to obtain the core tool for website category data. It allows us to accurately extract and display category information according to different needs, such as content model, hierarchical relationships, etc.This is crucial for building dynamic navigation, category list page sidebar, content filter, and other functions.
UnderstandingcategoryListThe core function of the tag
categoryListThe main function of the tag is to retrieve category data that meets specific conditions from the database.It supports various parameters to finely control the range and method of data acquisition and returns the result in a recyclable object form for easy rendering in templates.AnQiCMS's template engine syntax is similar to Django, therefore it is used incategoryListWe usually combine{% for ... in ... %}Loop tags to traverse the obtained category data
Key parameter analysis: specify content model and hierarchical control
To implement obtaining the category list under the specified content model,moduleIdthe parameter is the core. At the same time,parentIdthe parameter is used to control the hierarchical relationship of categories, helping us build multi-level category navigation.
moduleId: Specify the unique identifier of the content model
moduleIdThe parameter is used to filter out categories that belong to a specific content model. In AnQiCMS, a content model is the foundation of our custom content structure, such as the "article" model, "product" model, and so on.Each content model has a unique ID.
- Example of usage:
moduleId="1"ormoduleId="2". If the "Article" model ID is 1, and the "Product" model ID is 2, thenmoduleId="1"only the article category will be retrieved, whereasmoduleId="2"only the product category will be retrieved. - Application scenario:When we need to display different content model categories in different areas of the website (such as displaying article categories in the sidebar of the article list page, and product categories in the sidebar of the product list page), this parameter is essential.
parentId: Controls the hierarchy of categories
parentIdThe parameter is used to control the level of the category we want to retrieve.
- To get the top-level category:setting
parentId="0"Get all the top-level categories under the content model. This is very useful when we want to build the main navigation menu. - Get the subcategories:When traversing the parent category in a loop, we can use the current parent category's
Idas the child category'sparentIdto achieve nested display of multi-level categories. - Get the sibling category:to
parentIdis set to"parent"(Valid only on the current page as a category list page), can obtain the sibling categories of the current category.
limit: Control the display quantity and offset
limitThe parameter is used to limit the number of categories returned. It supports two modes:
- Fixed number:
limit="10"It means that up to 10 categories can be displayed. - Offset mode:
limit="2,10"Starting from the second record, retrieve 10 categories of data. This is very useful when skipping a few records is required in some special layouts.
Other auxiliary parameters
allGet all categories at all levelsWhenall=truethen,categoryListIt will get the specifiedmoduleIdAll categories under it, regardless of their level. This is very useful when it is necessary to display all categories in full without concerning the hierarchical structure.siteId: Multi-site data callFor users who use the AnQiCMS multi-site management function,siteIdThe parameter allows us to specify which site to retrieve category data from. Generally, if only managing one site, this parameter does not need to be filled in.
Loop traversal and data access
categoryListTags return a iterable collection of objects (usually namedcategoriesor a variable name you define). We use{% for ... in ... %}Loop to access each category item. Within the loop, each category item is usually nameditem, and provides various fields for us to call.
itemCommon fields of the object:
Id:Category ID, unique identifier.Title:Category name, used for display on the front end.Link:URL link corresponding to the category, for easy navigation.Description:Category overview or description.ParentId:ID of the parent category.Logo/Thumb:Category large image or thumbnail address, which can be used for category navigation icons or backgrounds.Spacer:Prefix used to display hierarchical indentation (e.g.):--配合 multi-level category display effect.}HasChildren:Boolean value indicating whether the current category has subcategories. This is very useful when building dynamic menus.IsCurrent:Boolean value indicating whether the current category is the category of the current page. It can be used to highlight the current navigation item.ArchiveCount:The number of documents included in the current category.
Practical Application Examples
1. Retrieve all top-level categories under the "Article" model
The following code retrieves all top-level categories under the content model with ID 1 (assuming it is an "article" model) and prints out their names and links.
<nav class="main-categories">
<h3>文章分类</h3>
<ul>
{% categoryList articleCategories with moduleId="1" parentId="0" %}
{% for item in articleCategories %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
</nav>
2. Implement multi-level category navigation (taking the 'Product' model as an example)
This example shows how to build a two-level navigation where the top-level categories come from the 'Product' model (assumingmoduleId="2")，and display its direct subcategories below.
<ul class="product-menu">
{% categoryList productRootCategories with moduleId="2" parentId="0" %}
{% for rootCategory in productRootCategories %}
<li {% if rootCategory.IsCurrent %}class="active"{% endif %}>
<a href="{{ rootCategory.Link }}">{{ rootCategory.Title }}</a>
{% if rootCategory.HasChildren %}
<ul class="submenu">
{% categoryList productSubCategories with parentId=rootCategory.Id %}
{% for subCategory in productSubCategories %}
<li {% if subCategory.IsCurrent %}class="active"{% endif %}>
<a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
3. Combine the document list to display the content under the category.
This scenario is common on the homepage or specific column pages, and it needs to display each category and the latest documents under the category. Suppose we have an article model(moduleId="1")
<section class="latest-articles">
<h2>最新文章</h2>
{% categoryList mainArticleCategories with moduleId="1" parentId="0" %}
{% for category in mainArticleCategories %}
<div class="category-block">
<h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>
<ul class="article-list">
{% archiveList articlesInCategory with type="list" categoryId=category.Id limit="5" %}
{% for article in articlesInCategory %}
<li>
<a href="{{ article.Link }}">
{% if article.Thumb %}<img src="{{ article.Thumb }}" alt="{{ article.Title }}" />{% endif %}
<h4>{{ article.Title }}</h4>
<p>{{ article.Description|truncatechars:80 }}</p>
<span class="date">{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
</a>
</li>
{% endfor %}
{% else %}
<li>该分类下暂无文章。</li>
{% endarchiveList %}
</ul>
</div>
{% endfor %}
{% endcategoryList %}
</section>
Summary
categoryListThe label is a powerful and flexible tool in the AnQiCMS template system. It allows for precise