When building a website, a clear classification structure is crucial for enhancing user experience and content discoverability.AnQiCMS Based on its flexible content model and powerful template engine, we can easily display the category list and its hierarchy on the website front-end.Today, let's delve into how to implement this feature in the AnQiCMS template.
Understanding AnQiCMS category list tags:categoryList
AnQiCMS template is based on the Django template engine syntax of the Go language, providing intuitive and feature-rich tags for data manipulation. To display the category list, we will mainly usecategoryListThis tag. This tag can help us obtain the classification data of content models such as articles or products, and display them in the way we expect.
Let's start with a simple example. Suppose we want to display all top-level article categories in the website sidebar, we can write the template code like this:
{% categoryList categories with moduleId="1" parentId="0" %}
<ul class="main-categories">
{% for item in categories %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
</ul>
{% endcategoryList %}
In this code block:
{% categoryList categories ... %}We define a variable namedcategoriesThe variable, it will carry the category list data obtained from the database.moduleId="1"This is a very critical parameter. In AnQiCMS, each category belongs to a specific content model (for example, the article model is usually for articles)1，Product model may be2）。By specifyingmoduleId，we ensure that only the required content model classification is obtained.parentId="0"This parameter tells the system that we only want to retrieve top-level categories. If we want to retrieve subcategories under a specific category, we will pass the parent category.Id.{% for item in categories %}We useforin a loop to iterate overcategoriesEach category item in the variable.{{ item.Link }}This will output the current category's URL link.{{ item.Title }}This will display the current category's name.
Elegantly display multi-level category hierarchy
If our website category structure has a hierarchical relationship, such as "News" under "Company News" and "Industry Information", we can also do the same thing.categoryListTags can easily realize multi-level nested display.
Here is an example of displaying two-level categories:
{% categoryList mainCategories with moduleId="1" parentId="0" %}
<ul class="main-nav">
{% for mainItem in mainCategories %}
<li class="main-nav-item">
<a href="{{ mainItem.Link }}">{{ mainItem.Title }}</a>
{% if mainItem.HasChildren %}
<ul class="sub-nav">
{% categoryList subCategories with parentId=mainItem.Id %}
{% for subItem in subCategories %}
<li class="sub-nav-item">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
{# 如果需要更多层级，可以继续嵌套 categoryList 标签 #}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
We introduce several new concepts here:
{% if mainItem.HasChildren %}: This is a very useful condition judgment.HasChildrenProperty returns a boolean value, telling us whether the current category has subcategories. Only when a category has subcategories do we render its submenu, so as to avoid generating empty<ul>Label, make the page structure cleaner.parentId=mainItem.IdIn the inner loop, we will have the outer loopmainItemofIdasparentIdPass tocategoryListLabel, so that you can accurately get tomainItem's direct child category.item.Spacer：AnQiCMS 还提供了一个 EnglishSpacer字段，它会根据分类层级自动生成前缀（例如 English |--In the management backend or certain specific display scenarios, it can help us intuitively see the hierarchical depth of categories. When displayed on the front end, it is usually controlled by CSS to adjust indentation and hierarchical styles, butSpacerProvided an alternative option, remember to use|safeA filter to ensure HTML entities are parsed correctly.
Display the documents under the category list at the same time
Sometimes, we not only want to display the category itself, but also show some of the latest articles or products under each category. AnQiCMS also allows us to flexibly combinecategoryListandarchiveListLabel to achieve this requirement.
{% categoryList categories with moduleId="1" parentId="0" %}
<div class="category-block">
{% for catItem in categories %}
<h3><a href="{{ catItem.Link }}">{{ catItem.Title }}</a></h3>
<ul class="latest-articles">
{% archiveList archives with type="list" categoryId=catItem.Id limit="5" %}
{% for article in archives %}
<li>
<a href="{{ article.Link }}">
<h4>{{ article.Title }}</h4>
<p>{{ article.Description|truncatechars:100 }}</p>
</a>
</li>
{% empty %}
<li>当前分类暂无文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
{% endfor %}
</div>
{% endcategoryList %}
In this example:
- We have each
catItemNested another inside the looparchiveListLabel. categoryId=catItem.Id: Here we will categorize the currentcatItemofIdPass toarchiveList, ensuring that only the articles under this category are obtained.limit="5": Limit each category to display the latest 5 articles.type="list"：English translation: It means we just need a simple list, not a paginated list.{{ article.Description|truncatechars:100 }}：English translation: It was used.truncatecharsThe filter truncates the first 100 characters of the article description, and automatically adds an ellipsis to keep the page neat.
Summary
AnQiCMScategoryListLabels and their rich parameters and return attributes provide us with great flexibility to build various complex classification displays.Whether it is a simple flat list, a multi-level nested menu, or directly embedded related content in the category, it can be easily implemented with intuitive template syntax.Reasonably utilizing these functions will help us build a website with clear structure, rich content, and user-friendliness.In actual operation, don't forget to frequently check the tag details in the AnQiCMS official documentation, where you will find more detailed parameter descriptions and advanced usage, helping you realize more creative ideas.
Common Questions (FAQ)
1. Why does my classification list code have been written, but there is no content displayed on the front-end page?
This usually has several reasons:
Firstly, please checkmoduleId参数是否正确。AnQiCMS 中的分类是与特定的内容模型（如文章、产品）绑定的，如果moduleIdIncorrect or no article/product category specified, the list will not be displayed. Secondly, confirm the one you specified.parentIdIf used, subcategories do indeed exist. Finally, check if the corresponding category data has been created in your AnQiCMS backend.
2. I want to display categories in the navigation bar, but AnQiCMS'snavListtags can also be used as navigation, which one should I use?
navListTags are specifically used to display the navigation menu configured in the "Website Navigation Settings" on the back end.It focuses more on the overall navigation structure of the website, which may include a combination of categories, single pages, or external links.categoryListLabels focus on obtaining and displaying pure categorization data from the content model. If you need a navigation generated automatically based on background categorization data (for example, displaying all article categories),categoryListMore suitable; if you want the navigation menu content to be more flexible, you can manually drag and adjust the order in the background, and it includes multiple link types,navListIt will be a better choice. Both can be used together, for example, innavLista submenu item nested undercategoryListto display subcategories.
3. How to set different styles for different levels of categories (for example, use bold for first-level categories and italic for second-level categories)?
IncategoryListofforIn the loop, you can make use ofitem.ParentIdTo judge the level of the current category. For example, ifitem.ParentId == 0, it is the top-level category; ifitem.ParentId > 0, it is a subcategory. You can also combine CSS class names to achieve differentiated styles. For example:
{% categoryList categories with moduleId="1" %}
<ul>
{% for item in categories %}
<li class="{% if item.ParentId == 0 %}level-1{% else %}level-2{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
{# ... 更多嵌套分类 ... #}
</li>
{% endfor %}
</ul>
{% endcategoryList %}
By this means, you can uselevel-1andlevel-2with these CSS classes to define styles for different levels.