In the Anqi CMS, the classification hierarchy of the website is the core of content organization, which not only affects the user's browsing experience but is also an important link in search engine optimization. In order to effectively build and display these classification structures, we mainly rely on two powerful template tags: categoryListandcategoryDetailThey work together, allowing you to flexibly present clear and organized content categories on the website front-end.
Build a category list:categoryListtags
categoryListThe main function of tags isList one or more content categories on a website. Whether you want to build a main navigation menu, a sidebar category list, or display popular categories at the bottom of the page,categoryListyou can easily achieve it.
When you need to use this tag, you usually start like this:{% categoryList categories with moduleId="1" parentId="0" %}Here,categoriesIt is the variable name you specify for this group of classification data, and you can name it freely.moduleIdThe parameter is crucial, it tells the system which content model's categories you want to retrieve (for example, the article model ID is usually 1, and the product model ID may be 2).parentIdThe parameter is used to control which level of classification you want to retrieve: set to"0"Represents getting the top-level category; If you want to get the subcategories under a specific category, you can set it to the ID of the parent category; If you are on a category page and want to get the sibling categories of the current category, you can setparentId="parent".
IncategoryListThe inside of the label, you can useforLoop through each category item obtained and access its various properties to build your list. For example,item.TitleThe name of the category will be displayed,item.LinkProvide the URL of the classification page,item.Descriptionthen you can display the introduction of the classification.
Display a multi-level classification structureYescategoryLista highlight. By nesting again internally,categoryListtags, and making use ofitem.IdAs a subcategoryparentIdYou can easily build an infinite-level navigation menu. At the same time,item.HasChildrenThe property helps you determine if a category has subcategories, thereby deciding whether to render the next-level menu, making your navigation more interactive.
For example, creating a multi-level category menu might look like this:
<ul class="main-nav">
{% categoryList topCategories with moduleId="1" parentId="0" %}
{% for item in topCategories %}
<li class="nav-item {% if item.HasChildren %}has-dropdown{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{% if item.HasChildren %}
<ul class="dropdown-menu">
{% categoryList subCategories with parentId=item.Id %}
{% for subItem in subCategories %}
<li class="dropdown-item"><a href="{{ subItem.Link }}">{{ subItem.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
Through such a structure, your website navigation can clearly display the hierarchical relationship of content, making it easy for users to quickly find the information they need.
Get category details:categoryDetailtags
categoryDetailTags are used forObtaining detailed information about a single categoryIt is usually on the category page (such aslist-{分类id}.htmlUsed in the template, to display the current category's title, description, content, or images, etc. In addition, when you need to reference specific category details at other locations on the website,categoryDetailIt is also very convenient.
The usage of this tag is usually:{% categoryDetail with name="Title" %}. If you call it on the category detail page, it will intelligently fetch the current page's category information. If you want to get data for a specific category, you can passidortokenparameters, such as{% categoryDetail with name="Description" id="5" %}Will get the description of the category with ID 5.
categoryDetailVery rich information can be obtained, including the category ofId/Title/Link/Description/Content(Introductional text of the category),Logo(Large image or Banner image of the category),Thumb（Category thumbnail），even in the background custom additional fields. This allows you to design a unique and informative layout for each category page.
For example, at the top of the article category page, you may want to display the name and detailed description of the current category, as well as show a category Banner image:
<div class="category-header">
<img src="{% categoryDetail with name='Logo' %}" alt="{% categoryDetail with name='Title' %}" class="category-banner">
<h1>{% categoryDetail with name='Title' %}</h1>
<p class="category-description">{% categoryDetail with name='Description' %}</p>
{% categoryDetail categoryContent with name="Content" %}
<div class="category-full-content">
{{categoryContent|safe}}
</div>
</div>
categoryListWithcategoryDetailcollaboration
These tags are not isolated, they often collaborate to achieve more complex functions. For example, when displaying a document list, each document is associated with a category ID (item.CategoryId)。如果您想在文档卡片中显示其所属分类的名称和链接，就可以在archiveListCombine within a loop.categoryDetail:
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-card">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></p>
<p>{{ item.Description }}</p>
</div>
{% endfor %}
{% endarchiveList %}
This usage greatly enhances the flexibility and richness of content presentation, making the relationship between documents and categories more intuitive.
Summary
categoryListandcategoryDetailIs an indispensable tag used in the Anqicms template making process for handling category hierarchy structure. By usingcategoryList, you can easily build various forms of category lists and navigation menus; andcategoryDetailThen allow you to deeply explore the details of each category, providing users with a more personalized browsing experience.合理地运用这两个标签，不仅能让您的网站内容井然有序，也能显著提升网站的整体易用性和搜索引擎友好度。
Common Questions (FAQ)
1. How to set multi-level category relationships when managing categories in the background?In the backend content management of Anqi CMS, when you add or edit categories, there will be an option for 'Parent Category'.By selecting different parent categories, you can easily establish a hierarchical structure.For example, create a "news
2. Why did I use a filter in the template?categoryListWhy nothing is displayed?This usually has several reasons. First, please checkmoduleIdThe parameter is correct, it needs to match the content model ID of the category you want to display. Secondly,parentIdIs the parameter set correctly, for example, if you want to display the top-level category, make sureparentIdresponse for"0". Finally, confirm that you have indeed created the categories in the background, and that these categories all belong to the ones you specifiedmoduleId.
**3. I want to use a custom template style for the specific category page, should