In AnQiCMS, flexibly obtaining and displaying the category list of the specified content model is the key to building a clear website structure and a good user experience.Whether it is product display, article archive, or service introduction, the category list plays an important navigation role.AnQiCMS powerful template tag system, making this process intuitive and efficient.
Core tags:categoryListusefulness
In the template design of AnQiCMS, we mainly rely oncategoryListThis powerful tag to get classification data.It allows us to filter and organize the category information to be displayed based on different requirements, such as specifying content models, parent categories, display quantities, and so on.
categoryListThe basic structure of the label is usually like this:
{% categoryList categories with moduleId="1" parentId="0" %}
{# 在这里循环显示分类数据 #}
{% endcategoryList %}
Among them,categoriesIt is a variable name specified for the category list obtained, and you can name it according to your own habits.withParameters following are used to finely control the classification data we want to obtain.
Accurate positioning: detailed explanation of key parameters
To obtain the classification list of the specified content model,moduleIdThe parameter is indispensable.
moduleId: Specify the content model.Each content model created in the AnQiCMS backend (such as article model, product model, custom model) has a unique ID. By usingmoduleIdSet to the corresponding model ID, we can ensure that only the categories under the model are obtained.For example, the article model usually has an ID of 1, and the product model has an ID of 2.moduleId="2".parentId: to build a hierarchical structureCategories are often not flat but hierarchical.parentIdParameters are used to control which level of categories to retrieve:parentId="0"This will retrieve all top-level categories under the specified model. It is the most commonly used setting, usually used for the main category display in the main navigation or sidebar.parentId=item.Id: After obtaining the parent category in a loop, you can pass the current parent category to theIdchild level.categoryListThus, you can get all the child categories under the parent category. This is very useful for building multi-level dropdown menus or tree-like classification structures.parentId="parent"This parameter is used in specific cases, such as on a category page, to retrieve同级(brother) categories of the current category.
limitControl the number of displayed items.If you want to display only a part of the categories, for example, only the top 5 categories on the homepage can be displayed usinglimit="5"to limit the number of returned items.siteId: Data call under multi-siteIn a multi-site management environment, if you want to call data from other sites, you can usesiteIdParameters are used to specify the target site. For most single-site users, this parameter is usually not needed.all=true: Get all categoriesAlthough this topic focuses on the "specified content model", but understandall=trueThis parameter is also very helpful. It will retrieve all categories under all content models. However, to avoid data confusion, it is usually recommended to combinemoduleIdto refine the selection.
Display in a loop: Display data on the page
After obtaining the category list, we usually need to{% for %}display each of them one by one using a loop tag.categoryListThe tag will return an array containing multiple category objects, each with rich properties for use in templates:
item.Title: Category name.item.Link: Category access link.item.DescriptionCategory Introduction.item.Thumboritem.LogoThumbnail or large image address of the category, if set on the backend.item.IdUnique ID of the category.item.HasChildrenA boolean value indicating whether the category has subcategories, which is very useful when building dynamic navigation.item.IsCurrentIndicates whether the current category is the category corresponding to the page being accessed, which can be used to highlight the navigation.
Practice exercise: Build category list
Let us go through several practical examples to see how to obtain and display the category list of a specified content model on the page.
Scenario one: Display all top-level categories under the 'Article Model'.
Assuming your article model ID is 1, you need to display all top-level categories of articles on the homepage or article list page as the main navigation.
<nav class="main-category-nav">
<ul>
{% categoryList categories with moduleId="1" parentId="0" %}
{% for item in categories %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
</nav>
This code retrieves all first-level categories under the article model and adds the current visited categoryactiveStyle.
Scenario two: Build a multi-level navigation menu for the "product model"
If your website has a complex 'product model' (ID 2), you need to display a multi-level category menu, and you want only the menu items with subcategories to expand.
<ul class="product-menu">
{% categoryList topCategories with moduleId="2" parentId="0" %}
{% for topItem in topCategories %}
<li {% if topItem.IsCurrent %}class="active"{% endif %}>
<a href="{{ topItem.Link }}">{{ topItem.Title }}</a>
{# 判断当前分类是否有子分类 #}
{% if topItem.HasChildren %}
<ul class="sub-menu">
{% categoryList subCategories with parentId=topItem.Id %}
{% for subItem in subCategories %}
<li {% if subItem.IsCurrent %}class="active"{% endif %}>
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
Here, we first get the top-level product categories, and then in the loop of each top-level category, we go throughtopItem.HasChildrenCheck if there is a subcategory. If there is, nested one more.categoryListLabel, pass the parent category ID (topItem.Id) inparentIdParameter, to get and display its child categories.
**Scenario 3