How to efficiently organize and display a massive amount of content in website operation is the key to improving user experience and website usability.For those using AnQiCMS, the system provides powerful content models and template tag functions, which can help us easily implement multi-level document classification lists and clearly display the associated documents under each category.
Next, let's explore together how to use these features to build a website navigation with both hierarchy and rich content in Anqi CMS.
Understanding the content structure of Anqi CMS
In AnQi CMS, the content is mainly constructed around the two core concepts of 'content model' and 'category'.Content models (such as article models, product models) define the type of content and its unique fields, while categories are the organizational structure under these content models.Each document (whether an article or a product) belongs to a specific category.
To display different levels of document classification and their associated documents, we mainly use two key template tags of AnQi CMS:categoryListused to obtain classification information,archiveListUsed to retrieve the document list.
Get the top-level document category list.
Firstly, we need to display the top-level categories in the template. This is usually the basis of the website's main navigation. We can usecategoryListtags, and throughparentId="0"Specify to get all top-level categories without parent categories. Don't forget to specify through themoduleIdparameter to get the article model (usually1) or product model (usually2).
An example is provided to demonstrate the top-level category list of the article model:
{% categoryList categories with moduleId="1" parentId="0" %}
<ul>
{% for item in categories %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
</ul>
{% endcategoryList %}
In this code,categoriesis the variable name defined for the top-level category list,itemwhich is the instance of each category in the loop.item.LinkIt will automatically output the access link of this category.item.TitleIt will display the category name.
Show multi-level subcategories.
The website structure is often not just one layer. AnqiCMS'scategoryListLabel supports nested usage, allowing us to further display its subcategories under the top-level category. This is due toitemthe object ofHasChildrena field, which can determine whether the current category has any subcategories.
If a category has subcategories, we can call it again insidecategoryListand pass the current category'sIdasparentIdquery to the subcategory, so that it can be expanded layer by layer.
Consider a two-level classification display:
{% categoryList topCategories with moduleId="1" parentId="0" %}
<ul class="main-nav">
{% for category in topCategories %}
<li>
<a href="{{ category.Link }}">{{ category.Title }}</a>
{% if category.HasChildren %} {# 判断当前分类是否有子分类 #}
<ul class="sub-nav">
{% categoryList subCategories with parentId=category.Id %} {# 获取当前分类的子分类 #}
{% for subCategory in subCategories %}
<li><a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a></li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
This way, we can see a clear two-level navigation structure on the website. If more levels are needed, this pattern can be continued to nest.categoryList.
Associate and display documents under each category
Just showing the category names is not enough, users would like to see the specific content under each category. At this time,archiveListThe label comes into play. We can display categories in a loop while callingarchiveListto show the documents under the category.
The key is to pass the parameters of the current category.IdPass toarchiveListofcategoryIdso thatarchiveListIt will only retrieve documents belonging to the current category. To keep the page tidy, we usually limit the number of displayed documents, usinglimitThe parameter can be easily implemented.
For example, display the latest 5 documents under each category:
{% categoryList categories with moduleId="1" parentId="0" %}
<div class="category-section">
{% for cat in categories %}
<h3><a href="{{ cat.Link }}">{{ cat.Title }}</a></h3>
<ul class="document-list">
{% archiveList docs with type="list" categoryId=cat.Id limit="5" %} {# 获取当前分类下的5篇文档 #}
{% for doc in docs %}
<li><a href="{{ doc.Link }}">{{ doc.Title }}</a></li>
{% empty %} {# 如果当前分类下没有文档 #}
<li>暂无相关文档。</li>
{% endfor %}
{% endarchiveList %}
</ul>
{% endfor %}
</div>
{% endcategoryList %}
Comprehensive example: Building a complete hierarchical navigation and content list
Now, let's combine the above concepts to build a complete example that can display multi-level categories and the associated documents under each category.A common requirement is that if there are subcategories under a category, display the list of subcategories; if there are no subcategories, directly display the documents under the category.
{en} `twig {# Assume we are creating a product list page, the product model ID is 2 #}