How to efficiently organize and display a large amount of content in website operation is the key to improving user experience and website usability.For friends using AnQiCMS, the system provides powerful content model and template tag features, which can help us easily implement multi-level document classification lists and clearly display the associated documents under each category.
Next, let's explore how to build a website navigation with both hierarchy and rich content using these features in Anqi CMS.
Understand the content structure of Anqi CMS
In Anqi CMS, the content is mainly constructed around the two core concepts of 'content model' and 'classification'.The content model (such as article model, product model) defines the type of content and its unique fields, and the category is the organizational structure under these content models.Each document (whether an article or a product) will belong to a specific category.
To display different levels of document categories and associated documents, we mainly use two key template tags of Anqicms:categoryListUsed to obtain category information, as well asarchiveListUsed 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 usecategoryListLabel, and throughparentId="0"Specify to get all top-level categories without a parent. Also, don't forget to go throughmoduleIdThe parameter specifies whether to get the article model (usually1) or the product model (usually2) category.
A simple example to show 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 block,categoriesIs the variable name defined for the top-level category list,itemIs the instance of each category in the loop.item.LinkWill automatically output the access link of the category,item.TitleThen it will display the category name.
Displays multi-level subcategories
The website structure is often not just one layer. Anqi CMS'scategoryListTags support nested usage, allowing us to further display child categories under the top-level category. This is due toitemWithin the objectHasChildrenfield, which can determine whether the current category has child categories.
If a category has subcategories, we can call it again within itcategoryListand use the current category'sIdasparentIdPass the query to the subcategory so that it can expand layer by layer
Consider displaying a two-level category:
{% 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 %}
So, we can see a clear second-level category navigation structure on the website. If more levels are needed, you can continue nesting according to this pattern.categoryList.
Associate and display the documents under each category.
It's not enough to just display the category names, users want to see the specific content under each category. At this point,archiveListtags come into play. We can call them while displaying categories in a loop,archiveListTo display the documents under the current category.
The key is to classify the current category.Idpass toarchiveListofcategoryIdParameters, in this wayarchiveListIt will only retrieve the documents belonging to the current category. To make the page tidy, we usually limit the number of displayed documents, usinglimitParameters 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: Build a complete hierarchical navigation and content list
Now, let's combine the aforementioned concepts to build a complete example that can display multi-level classifications and associated documents under each classification.A common requirement is that if a category has subcategories, the subcategory list should be displayed;If there are no subcategories, directly display the documents under the category.
`twig {# Assuming we are creating a product list page, the product model ID is 2 #}