Hello! As an experienced website operations expert, I am more than happy to give you a detailed explanation of the AnQi CMS.categoryListThe powerful functions of tags, especially how to accurately obtain all top-level category lists on your website.Understanding and applying this tag will be a key step in building a clear and efficient website navigation system.
AnQi CMS实战：Skillfully UsecategoryListTags to easily present the top-level classification navigation of the website.
In a content management system, categories are the core framework that organizes information and guides users in browsing.Whether it is an article, product, or any other type of content, a clear classification structure can greatly enhance user experience and search engine friendliness.AnQiCMS (AnQiCMS) makes category management a breeze with its flexible content model design.categoryList.
Today, we will delve into how to巧妙运用 cleverly utilizecategoryListtags, accurately obtain all top-level category lists on a website, and build a solid and intuitive navigation foundation for your website.
Core Function Analysis:categoryListWhat is a tag?
categoryListThe label is a powerful and flexible tool provided by Anqi CMS template engine, whose main responsibility is to extract and present category information from the database.Through it, you can filter out the required category lists based on different conditions, such as for generating the main navigation menu, sidebar category tree, or the category index at the bottom of the website, etc.It can help you avoid the tedious work of manually maintaining a category list and achieve dynamic updates of the website structure.
Get all top-level categories:parentId="0"WithmoduleIdThe clever cooperation of
To get all top-level categories on the website, you need to understandcategoryListThe two core parameters of tags:parentIdandmoduleId.
parentId="0"【en】Filter the highest levelparentIdThe parameter is used to specify the parent ID of the category to be retrieved. When you setparentIdto"0"When you do that, you are actually telling the A security CMS system: "I only want those categories without parent categories, which are the highest-level categories."}]These categories are usually the primary categories in your website's content hierarchy, and they are the roots of all subcategories.moduleId【en】Limit the content modelOne of the major advantages of Anqi CMS is its highly customizable content model.Your website may have multiple content models such as "articlesmoduleIdParameters can be explicitly specified. For example, if the ID of your 'Article Model' is1,“Product Model”'s ID is2, then you need to pass the corresponding ID as required.
Combine these two parameters, and we can accurately filter out all top-level categories under a specific content model. Here is an actual template code example:
<nav>
<ul>
{# 假设文章模型的ID是1，这里获取所有顶级文章分类 #}
{% categoryList topArticleCategories with moduleId="1" parentId="0" %}
{% for category in topArticleCategories %}
<li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
{# 假设产品模型的ID是2，这里获取所有顶级产品分类 #}
{% categoryList topProductCategories with moduleId="2" parentId="0" %}
{% for category in topProductCategories %}
<li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
</nav>
In this example,topArticleCategoriesandtopProductCategoriesThis is the custom variable name for list data, you can name it according to your habit.{% for category in ... %}The loop will iterate over each top-level category obtained and assign its data tocategoryThis temporary variable is convenient for us to display later.
Understanding categorical data:categoryListThe returned treasure
WhencategoryListAfter successfully obtaining category data, the tag will return an array containing multiple category objects.Each category object encapsulates rich attribute information, and you can flexibly call it in the template according to your needs.
Id: The unique identifier of the category, commonly used for internal logic judgment or link construction.TitleCategory name, the title of the category that users see most directly.LinkCategory page URL address, used directly to build navigation links.Description[en] Short description of the category, which can be used in hover tips or SEO meta information.LogoandThumb[en] Cover image and thumbnail of the category, suitable for navigation or category lists that require image display.HasChildrenA boolean value indicating whether there are subcategories under the current category.trueorfalseThis is very useful for building interactive effects for multi-level dropdown menus.ArchiveCountThe number of contents (articles, products, etc.) under this category, which can be used to display the richness of the category contents.
Build top-level navigation that is both beautiful and feature-complete with these properties.
Practical Application: Build a clear top-level navigation
Now, let's integrate the aforementioned knowledge points and look at a more complete scenario of building a top-level navigation. Suppose we want to display the top-level categories of articles and product modules at the top of the website header, and add visual cues for items with subcategories:
<header>
<nav class="main-navigation">
<ul>
{# 获取文章模块的顶级分类 #}
{% categoryList articleNav with moduleId="1" parentId="0" %}
{% for category in articleNav %}
<li class="nav-item {% if category.HasChildren %}has-dropdown{% endif %}">
<a href="{{ category.Link }}">{{ category.Title }}</a>
{# 如果有下级分类，可以进一步在这里渲染子菜单，这里只是一个占位符 #}
{% if category.HasChildren %}
<span class="dropdown-icon">▼</span>
{# 这里可以嵌套另一个 categoryList 标签来获取子分类 #}
{# 例如：{% categoryList subCategories with parentId=category.Id %}{# ... #}{% endcategoryList %} #}
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
{# 获取产品模块的顶级分类 #}
{% categoryList productNav with moduleId="2" parentId="0" %}
{% for category in productNav %}
<li class="nav-item {% if category.HasChildren %}has-dropdown{% endif %}">
<a href="{{ category.Link }}">{{ category.Title }}</a>
{% if category.HasChildren %}
<span class="dropdown-icon">▼</span>
{# 同样，这里可以嵌套获取子分类 #}
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
</nav>
</header>
This code not only demonstrates how to obtain the top-level categories, but also introducesHasChildrenProperties that allow you to add specific styles or interactive effects to navigation items with subcategories, thereby building a more hierarchical website navigation. You can further nest as needed.categoryListTags, to display multi-level classification.
Advanced Usage Tips
Control Display Quantity:
limitParametersIf you only want to display a selection of top-level categories, you can uselimitparameter to limit the number, for example:limit="5"This is very practical in scenarios like 'Hot Categories' on the homepage.Multi-site scenario:
siteIdParametersAnQi CMS supports multi-site management. If you are operating multiple websites under an AnQi CMS instance and need to call the category data of different sites, you can usesiteIdSpecify the site category list to be retrieved using parameters. For example:with siteId="2" moduleId="1" parentId="0".Sorting:
orderParametersAlthough the default order set by the backend is usually used when retrieving top-level categories,categoryListit also supportsorderparameters, allowing you to sort byid/sortSort by （Custom sorting）and other criteria, so that the display order of categories is more in line with your operational strategy.
By analyzingcategoryListA deep understanding and flexible application of tags will enable you to efficiently manage and display the classification structure of the website, providing your users with a superior browsing experience and laying a solid foundation for the website's SEO.
Common Questions and Answers (FAQ)
Why did I use it?
parentId="0", butcategoryListWhy is the tag still not displaying any categories? Answer:The most common reason is that you may have forgotten to specifymoduleIdParameter.The AnQi CMS has various content models, each with its own classification system.If you do not tell the system which content model's top-level category you want to retrieve, it cannot find matching data.moduleId="X"where,Xis the ID of the content model you need.Question: How can I retrieve all categories under a specific content model, regardless of whether they are top-level categories? Answer:If you want to retrieve a specific