In the Anqi CMS, properly organizing website content categories is an important aspect for improving user experience and website maintainability. Whether it is to build a clear multi-level navigation menu to help users quickly locate information, or to cleverly display different categories of content in the page content area,categoryListLabels are the core tools that realize these functions.
Core tags:categoryListIntroduction
categoryListThe label is a tag specifically used in the Aiqi CMS template engine to obtain the website category list.It is very flexible, able to retrieve the classification of specific content models, the sub-classifications under specific parent categories, and even all classifications of the entire website according to your needs.
The basic structure of using it is like this:{% categoryList categories with moduleId="1" parentId="0" %} ... {% endcategoryList %}
Let's break down the key parameters of this tag:
moduleId：Security CMS supports multiple content models, such as you may have article models (usually ID 1), product models (usually ID 2), and so on.moduleIdThe parameter is used to specify which content model category you want to retrieve. For example,moduleId="1"It will retrieve article categories,moduleId="2"It will retrieve product categories.parentId: This is the key to controlling the hierarchy of categories.- If you want to getTop-level category, you can set it to
parentId="0". - If you are iterating over a category and want to get its directsub-level categoriesIf it is, it can be omitted.
parentIdparameters,categoryListThe tag will intelligently read the current loop category ID as the parent ID. - If you want to get the current category'ssibling category, you can set it to
parentId="parent".
- If you want to getTop-level category, you can set it to
limit：If you only want to display a specific number of categories, you can uselimitto limit the number of returned items, for examplelimit="10". You can even setlimit="2,10"To indicate starting from the 2nd category, get 10 categories.siteIdWhen you use the multi-site feature, you can accesssiteIdSpecify to retrieve category data under a specific site. Usually, this parameter can be ignored.
WhencategoryListAfter the tag is executed, it will return a namedcategories(You can also customize this variable name) array. When you useforloop through this array, eachitemrepresents a category, which contains a wealth of properties, such as:
item.IdThe unique ID of the category.item.Title: The name of the category.item.Link：Classification link address, can be used directly for<a>Tagshrefproperties.item.Description：Classification introduction.item.Logo：Classification logo image address.item.Thumb: The thumbnail address of the category.item.HasChildrenAn English translation of 'auto' is 'English'. A boolean value used to determine if the current category has subcategories, which is very useful when building multi-level menus.item.IsCurrent：An indicator of whether the current category is the category of the page the user is visiting, commonly used for navigation highlighting.item.ArchiveCount：The number of documents under the current category (excluding subcategories).
Build multi-level classification navigation: let users find the direction at a glance
A well-structured website navigation is like a map, which can help users find their destination quickly. UtilizecategoryListLabel, you can easily build a complex navigation structure from the top-level menu to multi-level dropdown menus.
Firstly, we usually start by getting the top-level category, which serves as the first level of our navigation menu.
{# 假设我们正在构建一个文章分类的导航菜单，文章模型ID为1 #}
<ul class="main-nav">
{% categoryList topCategories with moduleId="1" parentId="0" %}
{% for item in topCategories %}
<li class="nav-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{# 检查当前分类是否有子分类，如果有，则渲染子菜单 #}
{% if item.HasChildren %}
<ul class="sub-nav">
{# 再次调用 categoryList，此时 parentId 留空，它会自动获取当前 item.Id 的子分类 #}
{% categoryList subCategories %}
{% for subItem in subCategories %}
<li class="sub-nav-item {% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
{# 您可以继续在这里嵌套，以构建三级甚至更多级别的菜单 #}
{% if subItem.HasChildren %}
<ul class="sub-sub-nav">
{% categoryList subSubCategories %}
{% for subSubItem in subSubCategories %}
<li class="sub-sub-nav-item {% if subSubItem.IsCurrent %}active{% endif %}">
<a href="{{ subSubItem.Link }}">{{ subSubItem.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
This code demonstrates how to achieve nesting.categoryListThe key is the internal tag to build multi-level navigation.categoryListIt will be based on the external loopitem.IdAutomatically obtain its sub-category, anditem.HasChildrenIt is responsible for judging whether the structure of the submenu needs to be rendered. At the same time,item.IsCurrentIt can help you add the current visited category.activeClass, implement navigation highlight effect.
Display the category list in the content area: enrich the page content
categoryListLabels are not only used for navigation, they can also play an important role in the main content area of the page, such as displaying the 'Hot Categories' on the homepage or the classification content block under a specific module.
For example, on the homepage of the website, we might want to display the two major categories 'Articles' and 'Products', and show several of the latest articles or products under each category. This requires thatcategoryListWitharchiveList(Document list tag) combined for use.
{# 假设文章模型ID为1，产品模型ID为2 #}
<div class="content-sections">
{# 获取顶级文章分类 #}
{% categoryList articleCategories with moduleId="1" parentId="0" limit="3" %}
<section class="section-block">
<h2>最新文章</h2>
<div class="category-grid">
{% for cat in articleCategories %}
<div class="category-card">
<h3><a href="{{ cat.Link }}">{{ cat.Title }}</a></h3>
<p>{{ cat.Description|truncatechars:80 }}</p> {# 截取分类描述，限制字符数 #}
<ul class="article-list">
{# 在每个分类下获取最新的3篇文章 #}
{% archiveList articles with categoryId=cat.Id limit="3" order="id desc" %}
{% for article in articles %}
<li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
{% endfor %}
</div>
</section>
{% endcategoryList %}
{# 获取顶级产品分类 #}
{% categoryList productCategories with moduleId="2" parentId="0" limit="3" %}
<section class="section-block">
<h2>热门产品</h2>
<div class="category-grid">
{% for cat in productCategories %}
<div class="category-card">
<h3><a href="{{ cat.Link }}">{{ cat.Title }}</a></h3>
<img src="{{ cat.Thumb }}" alt="{{ cat.Title }}" class="category-thumb">
<ul class="product-list">
{# 在每个分类下获取最新的4个产品 #}
{% archiveList products with categoryId=cat.Id limit="4" order="id desc" %}
{% for product in products %}
<li><a href="{{ product.Link }}">{{ product.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
{% endfor %}
</div>
</section>
{% endcategoryList %}
</div>
This code demonstrates how to traverse several top-level categories, and then use them inside each category.archiveListTags can be used to get specific articles or products under the category. This allows users to view rich and categorized content without leaving the current page.
Useful Tips and Considerations
moduleIdThe importance ofAlways remember to specify the correct content type (article, product, etc.) according to what you want to get.moduleIdTo avoid obtaining incorrect classified data.limitof the flexible useIn both navigation and content areas,limitthe parameters can help you control the number of displayed items, to avoid the page becoming too bulky.item.IsCurrenthighlight implementationIn the navigation menu,item.IsCurrentThis boolean value can easily add a CSS class to the category currently being accessed by the user, making it highlighted and enhancing the user experience.- **Styles and