AnQi CMS is an efficient enterprise-level content management system that provides great flexibility in content organization and display.For many websites, how to display the category list based on different content models or the hierarchical relationships of categories is a very common and important requirement.This concerns not only the organization structure of the website content, but also directly affects user experience and SEO (Search Engine Optimization) effects.
In Anqi CMS, implementing such a display is not complicated.The built-in template tags provide powerful functions for us to control the output of category lists with ease.
Understand the classification system of AnQi CMS
Before delving into how to display the category list, we first need to understand how the Anqi CMS constructs its category system.The concept of 'content model' has been introduced, such as the default article model and product model.Each category must belong to a specific content model.This means you can define a set of categories for articles and another completely independent set for products.This design greatly enhances the flexibility of content management, allowing your website to accommodate various types of content.
At the same time, the classification of Anqi CMS also supports a multi-level hierarchical relationship, which is known as the 'parent-child relationship'.You can create top-level categories and further create subcategories under these top-level categories to form a clear navigation path.
Core Tools:categoryListTemplate tags
To display the category list based on content model or parent relationship, we mainly use Anqi CMS.categoryListTemplate tag. This tag allows us to filter and display categorized data based on various conditions and provides rich parameters to finely control the output results.
The basic usage is like this:{% categoryList categories with moduleId="1" parentId="0" %} ... {% endcategoryList %}.
Here,categoriesIt is the custom variable name for the obtained category list, and you can also replace it with other names as needed.moduleIdandparentIdThen these are the two most important parameters of this tag.
Filtered by content model (
moduleId)moduleIdThe parameter is used to specify which content model's categories you want to retrieve. Anq CMS usually assigns an ID to the "Article" model.1, assigning an ID to the "Product" model.2If you have customized other content models, they will also have corresponding IDs. By settingmoduleId="1", you can only display categories related to articles; set it tomoduleId="2", then it will display categories related to products.Filter by parent relationship (
parentId)parentIdThe parameter is used to control the level of category display.- When you set
parentId="0"whencategoryListThis will display all top-level categories under the specified content model. This is a common method used to build the main navigation or first-level category menu. - If you want to display all child categories under a specific parent category, just set the
parentIdvalue to the ID of the parent category. For example,parentId="10"It will display all subcategories under the category with ID 10. - Additionally, if you want to get the subcategories of the current category within a loop, we would usually
parentIdThe value is set to the current category in the loop.item.Id.
- When you set
Practical demonstration: Build category lists flexibly.
After understanding the basics, let's look at some common application scenarios.
Scene one: Display all top-level categories (e.g., website main navigation)
Suppose we want to display all top-level categories of the article models in the website header navigation.
<ul>
{% categoryList categories with moduleId="1" parentId="0" %}
{% for item in categories %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
This code will traverse all categories under the article modelparentIdresponse for0and generate a link and title for each category.
Scene two: Display child categories under a specific parent category (for example, sidebar navigation)
If your website has a category ID of5The "Solution" category, and you want to display all the subcategories below it in the sidebar.
<div class="sidebar-menu">
<h3>解决方案</h3>
<ul>
{% categoryList subCategories with parentId="5" %}
{% for item in subCategories %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
</div>
Here we use it for the subcategory list.subCategoriesThis variable name, and specify the parent category ID as5.
Scene three: Nested display of multi-level categories (e.g., multi-level dropdown menus)
In many complex navigation or product category displays, we need to show multi-level nested category lists. Anqi CMS allows you tofornested within a loopcategoryListtags, and combineitem.HasChildrenTo determine if the current category has child categories.
<ul class="main-nav">
{% categoryList categories with moduleId="2" parentId="0" %} {# 获取产品模型的顶级分类 #}
{% for item in categories %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.HasChildren %} {# 判断当前分类是否有子分类 #}
<ul class="sub-nav">
{% categoryList subCategories with parentId=item.Id %} {# 获取当前分类的子分类 #}
{% for inner in subCategories %}
<li>
<a href="{{ inner.Link }}">{{ inner.Title }}</a>
{% if inner.HasChildren %} {# 如果子分类也有下级，可以继续嵌套 #}
<ul class="sub-sub-nav">
{% categoryList subCategories2 with parentId=inner.Id %}
{% for inner2 in subCategories2 %}
<li><a href="{{ inner2.Link }}">{{ inner2.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
This code first retrieves the top-level categories under the product model, then checks if there are child categories in each top-level category. If there are, it uses the code againcategoryListtags, andparentIdSet the ID of the current parent category.item.IdThis continues, realizing multi-level nesting.
Scenario four: Display the document summary of the category under the category list.
Sometimes, we not only want to display categories, but also hope to show the latest several documents next to or below each category, such as in a module on the homepage. At this time, we can incategoryListNested in looparchiveListLabel.
<div>
{% categoryList categories with moduleId="1" parentId="0" %}
{% for item in categories %}
<div class="category-block">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<ul class="article-list">
{% archiveList archives with type="list" categoryId=item.Id limit="5" %} {# 获取当前分类的最新5篇文档 #}
{% for archive in archives %}
<li>
<a href="{{ archive.Link }}">{{ archive.Title }}</a>
<span>({{ stampToDate(archive.CreatedTime, "2006-01-02") }})</span>
</li>
{% empty %}
<li>该分类暂无文档</li>
{% endfor %}
{% endarchiveList %}
</ul>
<a href="{{ item.Link }}" class="more">查看更多</a>
</div>
{% endfor %}
</div>
PasscategoryId=item.Id,archiveListThe tag can accurately obtain the documents under the current loop category.limit="5"It limits the number of displayed documents.
Summary
PasscategoryListlabel combined withmoduleIdandparentIdParameters, we can flexibly build various category lists in the Anqi CMS.Whether it is a simple top-level category, a complex multi-level nested navigation, or even a mixed display of categories and documents, it can be easily realized.Mastering the use of these tags will make the organizational structure of your website content clearer, making it easier for users to find the information they need, thereby enhancing the overall operational effectiveness of the website.
Common Questions (FAQ)
How to judge and highlight the current visited page's category in the category list?
You can do this oncategoryListIn the loopiteman objectitem.IsCurrentby using properties. For example,{% if item.IsCurrent %}active{% endif %}which can be used to highlight the current category's