Managing and displaying the category list in AnQi CMS is the core of website content organization.It is crucial to clearly show the classification structure for optimizing user navigation experience or improving search engine crawling efficiency.The AnQi CMS provides simple and powerful template tags, allowing you to easily display your content categories on the homepage, category pages, or anywhere else you need on your website.
Understand the Core:categoryListTag
The main tag used to obtain the category list in the Anqi CMS template system iscategoryList. This tag can help you extract the classification data of the website as needed and display it on the page. Its usage is very intuitive, usually in{% categoryList 变量名称 with 参数 %}and ends with{% endcategoryList %}End, the middle is traversed through a loop to traverse the classification data.
While usingcategoryListWhen labeling, there are several key parameters that can help you accurately control which categories to display.
moduleId: This is one of the most important parameters, used to specify which content model (such as article model, product model, etc.) under the category you want to obtain. For example,moduleId="1"may represent the article model, andmoduleId="2"May represent a product model. When creating categories in the background, each category belongs to a specific content model, so specifying the model ID here is the basis for ensuring the correct category is obtained.parentId: This parameter is used to control the hierarchical relationship of categories.- When set to
parentId="0"At that time, you will get the top-level category. This is very useful when displaying the main content block on the homepage. - When set to
parentId=item.IdWhen (inside the loop), you can get the subcategories under the current category. This is very convenient for building multi-level navigation menus or displaying the subcategories of the parent category on the parent category page.
- When set to
limit: Used to limit the number of categories displayed, for examplelimit="10"It will only display the first 10 categories.all=true: If you want to get all categories under a specified model, regardless of the level, you can use this parameter.
Display top category list on the website homepage
The home page usually needs to display the main content categories of the website, guiding users into different content areas. This is usually part of the website navigation or content block.
Here is an example of a top category list displayed on the homepage:
<nav class="main-nav">
<ul>
{% categoryList topCategories with moduleId="1" parentId="0" %}
{% for item in topCategories %}
<li class="nav-item {% if forloop.Counter == 1 %}first-item{% endif %}">
<a href="{{ item.Link }}" title="{{ item.Title }}">
{{ item.Title }}
</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
</nav>
In this example:
- We defined a variable
topCategoriesto store the obtained category data. moduleId="1"Assuming it is an article model, ensure that we are getting the article category.parentId="0"Explicitly indicates that we should only get the top-level categories.forLoop throughtopCategorieseach one in theitem,item.LinkProvide the category link address,item.TitleProvide the category name.forloop.CounterCan be used to add special styles to the first category, for examplefirst-item.
Display the subcategory list or同级分类 on the category page
When a user enters a specific category page, you may want to display the subcategories of the category so that the user can further refine the browsing range; or show other categories at the same level as the current category, making it convenient for the user to switch.
Display subcategory list:
Assuming you are visiting a parent category page and want to display all its subcategories below.
{# 假设当前页面是一个分类页面，可以直接获取到当前分类的ID #}
<div class="sub-categories">
<h3>探索更多分类</h3>
<ul>
{% categoryList subCategories with parentId=category.Id %} {# category.Id 动态获取当前分类的ID #}
{% for item in subCategories %}
<li>
<a href="{{ item.Link }}" title="{{ item.Title }}">
{{ item.Title }}
{% if item.HasChildren %} ({{ item.ArchiveCount }}) {% endif %} {# 如果有子分类，显示其下文档数量 #}
</a>
</li>
{% empty %}
<li>当前分类下没有子分类。</li>
{% endfor %}
{% endcategoryList %}
</ul>
</div>
Here:
parentId=category.IdDynamically obtain the ID of the current access category and use it as the parent to obtain its child categories.item.HasChildrenIt is a boolean value that can be used to determine whether the current category has subcategories, thus enabling some conditional display or interactive design.item.ArchiveCountThe number of documents directly contained in the category will be displayed, helping users understand the content volume of the category.
The category is displayed in combination with the document list:
A more common requirement is to iterate over the main categories on the homepage or a specific page, and display several of the latest articles or products under each category.
<section class="featured-content">
{% categoryList mainSections with moduleId="1" parentId="0" limit="4" %} {# 获取前4个顶级文章分类 #}
{% for category in mainSections %}
<article class="content-block">
<h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>
<ul class="article-list">
{% archiveList articlesInCategory with categoryId=category.Id type="list" limit="5" %} {# 获取当前分类下最新的5篇文章 #}
{% for article in articlesInCategory %}
<li>
<a href="{{ article.Link }}" title="{{ article.Title }}">
<img src="{{ article.Thumb }}" alt="{{ article.Title }}" />
<h4>{{ article.Title }}</h4>
<p>{{ article.Description|truncatechars:80 }}</p>
</a>
</li>
{% empty %}
<li>该分类下暂无文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
<div class="view-more">
<a href="{{ category.Link }}">查看更多 »</a>
</div>
</article>
{% endfor %}
{% endcategoryList %}
</section>
This example demonstrates how to convertcategoryListwitharchiveListUse tags together:
- First, use
categoryListGet the top-level category (mainSections) - In
mainSectionsWithin the loop again, usearchiveListtags, throughcategoryId=category.IdThe parameter, passing the current category ID toarchiveListSo as to get the documents under the category. type="list"andlimit="5"Control to display the latest 5 articles.article.ThumbDisplay article thumbnails,article.Description|truncatechars:80Then truncate the article summary to keep the page tidy.
Flexible template customization
The AnQi CMS supports custom naming of templates, which means you can design exclusive templates for specific categories. In the background "Document Category" settings, you can specify a "category template" for a particular category, for exampledownload.html. When the user accesses the category, the system will automatically apply the template you specified.
In addition, if you want to have more fine-grained control over the category list during template design, you can useitem.Logooritem.ThumbTo display a custom image for the category, or useitem.DescriptionTo show the category introduction.
By using these flexible tags and parameters, you can build category display effects that meet various business needs and design styles in Anqi CMS, greatly enhancing the discoverability and user experience of the website.
Frequently Asked Questions (FAQ)
- How can I make the category list only display categories under specific content models (such as articles or products), and not display categories under other models?
- Answer:You can use
categoryListlabel'smoduleIdSpecify the content model ID of the category to be retrieved. For example, `{% categoryList categories with moduleId=“1” %}
- Answer:You can use