How to display the category list and its hierarchical relationship in AnQiCMS template?

When building a website, a clear classification structure is the key to improving user experience and content discoverability.AnQiCMS with its flexible content model and powerful template engine allows us to easily display category lists and their hierarchical relationships on the website front end.Today, let's delve deeper into how to implement this feature in the AnQiCMS template.

Understand the AnQiCMS category list tags:categoryList

The AnQiCMS template is based on the Django template engine syntax in the Go language, providing intuitive and feature-rich tags for data manipulation. To display the category list, we will mainly usecategoryListThis tag. This tag helps us obtain classification data for 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 will carry the category list data retrieved 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...1The product model may be2Specified by"),moduleIdWe ensure that only the required content model classification is obtained.
• parentId="0"This parameter tells the system that we only want to retrieve the top-level categories. If we want to retrieve the subcategories under a specific category, we will pass the parent category'sId.
• {% for item in categories %}We useforto loop throughcategoriesEach 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 Dynamic' under 'Company News' and 'Industry Information', we can also usecategoryListLabels easily achieve multi-level nested display.

Here is an example of displaying two-level classification:

{% 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 %}

Here we introduce several new concepts:

• {% if mainItem.HasChildren %}: This is a very useful conditional judgment.HasChildrenThe property returns a boolean value that tells us whether the current category has subcategories. We only render the submenu when a category has subcategories to avoid generating empty<ul>Tags, make the page structure cleaner.
• parentId=mainItem.Id: Inside the inner loop, we will iterate over the outer loopmainItemofIdasparentIdpass tocategoryListTags, so we can accurately get tomainItemthe direct child category.
• item.Spacer: AnQiCMS also provides aSpacerfield, which automatically generates prefixes based on the category level (for example  |--), in the management background or in some specific display scenarios, it can help us intuitively see the level depth of the categories. When displayed on the front end, it is usually controlled by CSS to control the indentation and level styles, butSpacerProvided an alternative option, remember to use|safeA filter to ensure HTML entities are parsed correctly

Display documents under the category list at the same time

Sometimes, we want not only to display the category itself, but also to show some of the latest articles or products under each category. AnQiCMS also allows us to flexibly combinecategoryListandarchiveListTag 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 do this in eachcatItemA loop nested inside anotherarchiveList.
• categoryId=catItem.Id: Here we will classify the currentcatItemofIdpass toarchiveList, to ensure that only the articles under this category are obtained.
• limit="5": Limit each category to show the latest 5 articles.
• type="list": It means we just need a simple list, not a paginated list.
• {{ article.Description|truncatechars:100 }}: UsedtruncatecharsA filter to truncate the first 100 characters of the article description and automatically add an ellipsis to keep the page neat.

Summary

AnQiCMS'categoryListThe label and its rich parameters and return properties 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 embedding related content in the category, it can be easily realized through an intuitive template syntax.Reasonably utilizing these features will help us build a website with clear structure, rich content, and user-friendly interface.In actual operation, don't forget to check the tag details in the official AnQiCMS documentation, where there will be more detailed parameter descriptions and advanced usage, helping you to realize more creativity.

Frequently Asked Questions (FAQ)

1. Why is my category list code written, but there is no content displayed on the frontend page?

This usually has several reasons: First, please checkmoduleIdAre the parameters correct. In AnQiCMS, categories are bound to specific content models (such as articles, products), ifmoduleIdIncorrect or no article/product category, the list will not display naturally. Secondly, confirm the specifiedparentIdIf used, subcategories 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 the tags can also be used for navigation, which one should I use?navList标签也可以做导航，我应该用哪一个？

navListThe tag is specifically used to display the navigation menu configured in the background "Website Navigation Settings".It focuses more on the global navigation structure of the website, which may include combinations of categories, single pages, or external links and so on.categoryListThe tag focuses on retrieving and displaying pure classification data from the content model. If you need a navigation generated automatically based on backend classification data (for example, displaying all article categories),categoryListIt is more 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 various link types, thennavListIt would be a better choice. Both can be combined, for example, innavListnested under some menu itemcategoryListto display subcategories.

How to set different styles for different levels of categories (such as using bold for first-level categories and italic for second-level categories)?

IncategoryListofforIn the loop, you can useitem.ParentIdTo determine the level of the current category. For example, ifitem.ParentId == 0, it is a 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 %}

In this way, you can uselevel-1andlevel-2CSS classes to define different levels of styles.