A detailed guide to listing category information by module or parent relationship in AnQiCMS (AnQiCMS) templates
As a senior security CMS website operator, I fully understand the importance of content organization.A clear and easy-to-navigate classification system not only improves user experience but is also the foundation of SEO optimization.AnQi CMS with its flexible content model and powerful template tag system, provides us with multiple ways to display category information in website templates according to module or parent-child relationship.This article will delve into how to use these features to build an efficient classification list.
Understanding the category structure of AnQiCMS
In Anqi CMS, categories are the framework for organizing website content.Each category is associated with a specific 'content model', such as 'article model' or 'product model'.This association ensures the structured and consistent classification of content.In addition, Anqi CMS supports multi-level categorization, which means that there can be a clear 'parent-child' relationship between categories, forming a hierarchical content structure.Understanding this structure is the first step in effectively calling classification information.
UsecategoryListTags to get category information
categoryListThe tag is the core tool used to list category information in the Anqi CMS template system.It allows us to filter and display categories based on different conditions, whether it is top-level categories, all categories under a specific model, or the child categories of a certain parent category.
The basic usage of this tag is{% categoryList categories with ... %}of whichcategoriesIs the variable name you define for the category list,...It is the parameter we use to specify the filtering and sorting conditions. In the loop iterationcategoriesWhen a variable is specified, we can access the detailed information of each category, such asitem.Id(Category ID),item.TitleCategory Title,item.Link(Category link),item.Description(Category description) as well asitem.HasChildren(Whether it includes subcategories) and others.
List top-level categories by content module
When building the main navigation or entry point of a specific module on a website, we often need to list the top-level categories that belong to a specific content model.For example, you may want to display all top-level categories under the 'Articles' and 'Products' main modules on the homepage.
To achieve this, we need to usemoduleIdparameters to specify the ID of the target content model and setparentId="0"to make it clear that only the top-level categories should be retrieved. The article model is usually set to default asmoduleId="1"The product model may bemoduleId="2"The specific ID can be viewed in the content model management on the backend.
{# 假设文章模型的ID是1 #}
<div class="main-articles-nav">
<h3>文章分类</h3>
<ul>
{% categoryList topCategories with moduleId="1" parentId="0" %}
{% for category in topCategories %}
<li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
</div>
{# 假设产品模型的ID是2 #}
<div class="main-products-nav">
<h3>产品分类</h3>
<ul>
{% categoryList productCategories with moduleId="2" parentId="0" %}
{% for category in productCategories %}
<li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
</div>
In this way, we can clearly display the classification of different content modules independently, providing users with targeted navigation entries.
List subcategories according to the parent-child relationship.
In addition to listing top-level categories, building multi-level navigation or displaying subcategories on category detail pages is a common requirement. The Anqi CMS parameters perfectly support this feature.categoryListTag throughparentIdParameters perfectly support this feature.
To get the direct subcategories of a specific category, you can specify the parent category'sIdpass toparentIdparameter. If the current page itself is a category page, we can also combinecategoryDetailThe tag dynamically retrieves the ID of the current category and then lists its subcategories.
{# 假设我们正在一个文章分类详情页，需要列出当前分类的所有子分类 #}
{# 首先获取当前分类的ID #}
{% categoryDetail currentCategoryId with name="Id" %}
<div class="sub-category-list">
<h3>当前分类的子分类</h3>
<ul>
{% categoryList subCategories with parentId=currentCategoryId %}
{% for subCategory in subCategories %}
<li><a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
</div>
We can also implement nested classification display, which is very useful when building complex tree navigation. This requires multiple layerscategoryListnested tags, each level using the classification ID of the previous level asparentId.
{# 嵌套多级分类示例：列出文章模型下的三级分类 #}
<nav class="multi-level-nav">
{% categoryList level1Categories with moduleId="1" parentId="0" %}
<ul>
{% for level1 in level1Categories %}
<li>
<a href="{{ level1.Link }}">{{ level1.Title }}</a>
{# 判断是否存在子分类 #}
{% if level1.HasChildren %}
{% categoryList level2Categories with parentId=level1.Id %}
<ul>
{% for level2 in level2Categories %}
<li>
<a href="{{ level2.Link }}">{{ level2.Title }}</a>
{% if level2.HasChildren %}
{% categoryList level3Categories with parentId=level2.Id %}
<ul>
{% for level3 in level3Categories %}
<li><a href="{{ level3.Link }}">{{ level3.Title }}</a></li>
{% endfor %}
</ul>
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
</nav>
Combine category list to display associated documents
The further application scenarios are, you may wish to list the categories while also displaying some documents under each category, for example, on the "Latest Articles" section of the homepage, displaying several latest articles by category. This can be achieved by usingarchiveListNested in a tagcategoryListImplement within the tag.
<div class="category-with-archives">
{% categoryList categories with moduleId="1" parentId="0" limit="4" %} {# 假设只显示4个顶级分类 #}
<section>
<h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>
<ul>
{% archiveList archives with type="list" categoryId=category.Id limit="5" %} {# 每个分类显示5篇文档 #}
{% for archive in archives %}
<li>
<a href="{{ archive.Link }}">
<img src="{{ archive.Thumb }}" alt="{{ archive.Title }}">
{{ archive.Title }}
</a>
</li>
{% empty %}
<li>暂无相关文档。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</section>
{% endcategoryList %}
</div>
Optimizations and注意事项 in practice.
In practical operation, to ensure website performance and user experience, please note the following points:
- clear
moduleIdandparentIdAlways be clear about which content model category you want to obtain, and which level these categories belong to. This will helpcategoryListEfficiently query data with tags. - Control
limitParameterAlways use list tags reasonably.limitParameters to limit the number of returned items, to avoid loading too much data at once, especially on the homepage or sidebar and other locations. - Utilize
HasChildren: When building multi-level navigation, useitem.HasChildrenConditional judgment to determine whether to render the container of sub-categories, thus avoiding the generation of empty HTML structures. - Template cache: The built-in cache mechanism of AnQi CMS can accelerate page loading when used properly. When performing complex data calls, if the data does not change frequently, consider related caching strategies.
- Static rulesMake sure your category link (
item.Link) is accessible on the front end. Anqi CMS provides flexible pseudo-static rule configuration to ensure that the generated URL is SEO-friendly.
By using precisioncategoryListTags and parameters, we can flexibly build any classification display method you want in the Anqi CMS template, whether it is a simple module navigation or a complex multi-level content structure, it can be easily realized, thus providing visitors with a clear structure, rich content, and easy to explore website.
Frequently Asked Questions (FAQ)
Q1: How to list all categories under all content models on any page, not just the categories of a specific module?
A1:You can usecategoryListtags and setall=trueGet all categories under all content models. If distinction is still needed, it can be done through the loop inside.item.ModuleIdoritem.ModuleName(IfModuleNamefield is available, but not explicitly listed in the document.item.ModuleIdAre there any judgments and grouping displays for example{% categoryList allCategories with all=true %}.
Q2: If my classification level is very deep, should I use multi-level nestingcategoryListWill tags affect website performance?
A2:Indeed, excessive nested loops can have a certain impact on front-end rendering performance, especially when dealing with large amounts of data.For deeply nested categories, it is recommended to optimize your template logic or consider lazy loading or asynchronous requests for subcategory data on the front end with JavaScript.At the backend, the high-performance architecture of AnQi CMS in Go language usually handles these queries well, but the frontend rendering is still the bottleneck.When designing categories in the background, reasonable hierarchical depth should also be considered to avoid unnecessary complexity.
Q3: I want to display the total number of documents under each category in the category list,categoryListDoes the tag support?
A3:Yes,categoryListrepeating item of the tagitemcontainsArchiveCountfield, which can be directly called to display the number of documents under the category. For example:{{ item.Title }} ({{ item.ArchiveCount }}). This is very helpful for users to understand the amount of content in the category.