How to display a category list based on content model or parent-child relationship?

AnQi CMS is an efficient enterprise-level content management system that provides great flexibility in content organization and display.For many websites, how to display a category list based on different content models or hierarchical relationships of categories is a very common and important requirement.This is not only related to the organization structure of the website content, but also directly affects the user experience and SEO effect.

In Anqi CMS, implementing such a display is not complex.The built-in template tags provide us with powerful functions, allowing us to easily control the output of the classification list.

Understand the classification system of Anqi CMS

Before delving into how to display the category list, we first need to understand how AnQi CMS constructs its category system.The system introduced the concept of 'content model', such as the default article model and product model.Each category must belong to a specific content model. This means that you can define a set of categories for articles, and another completely independent set for products.This design greatly enhances the flexibility of content management, allowing your website to accommodate various types of content.

At the same time, the classification of Anqi CMS also supports multi-level hierarchical relationships, known as the 'parent-child relationship'.You can create top-level categories and further create subcategories under these top-level categories to form a clear navigation path.

Core Tool:categoryListTemplate Tag

To display the category list based on the content model or parent relationship, we mainly use Anqicms'scategoryListTemplate tag. This tag allows us to filter and display classified data based on multiple conditions and provides rich parameters for fine-grained control of the output result.

The basic way to use it is like this:{% categoryList categories with moduleId="1" parentId="0" %} ... {% endcategoryList %}.

Here, categoriesThis is the custom variable name for the category list we have obtained, you can also replace it with another name as needed.moduleIdandparentIdThese are the two most important parameters of this label.

1. Filter by content model (moduleId) moduleIdThe parameter is used to specify which content model category you want to retrieve. AnQi CMS usually assigns an ID to the "Article" model.1Assign an ID to the "Product" model2If you have customized other content models, they will also have corresponding IDs. By settingmoduleId="1"You can then only display article-related categories; set tomoduleId="2"If so, the product-related categories will be displayed.

2. Filter based on parent relationship (parentId) parentIdThe parameter is used to control the display level of categories.

   • When you setparentId="0"then,categoryListThis will display all top-level categories under the specified content model. This is a common method for building the main navigation or first-level category menu.
   • If you want to display all subcategories under a specific parent category, just setparentIdto the ID of the parent category. For example,parentId="10"It will display all subcategories under the category with ID 10.
   • Additionally, if you want to get the subcategories of the current category in a loop, we usually willparentIdThe value is set to the current category in the loopitem.Id.

Practical demonstration: Flexibly build category lists

After understanding the basic knowledge, let's look at some common application scenarios.

Scenario one: Display all top-level categories (for example, the website's main navigation)

Suppose we want to display all top-level categories of the article models in the website's header navigation.

<ul>
    {% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    </li>
    {% endfor %}
    {% endcategoryList %}
</ul>

This code will iterate over all articlesparentIdWith0and generate a link and title for each category.

Scenario two: Display child categories under a specific parent category (for example, sidebar navigation)

If your website has a category ID of5The “Solution” category, and you want to display all subcategories below it in the sidebar.

<div class="sidebar-menu">
    <h3>解决方案</h3>
    <ul>
        {% categoryList subCategories with parentId="5" %}
        {% for item in subCategories %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
        </li>
        {% endfor %}
        {% endcategoryList %}
    </ul>
</div>

Here we use it for the subcategory list.subCategoriesThis variable name, and specify the parent category ID of5.

Scene three: Nested display of multi-level categories (for example, multi-level dropdown menus)

In many complex navigation or product category displays, we need to show multi-level nested category lists. Anqi CMS allows you toforwithin a loopcategoryListtags, and combineitem.HasChildrenproperty to determine whether the current category has subcategories.

<ul class="main-nav">
    {% categoryList categories with moduleId="2" parentId="0" %} {# 获取产品模型的顶级分类 #}
    {% for item in categories %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
        {% if item.HasChildren %} {# 判断当前分类是否有子分类 #}
        <ul class="sub-nav">
            {% categoryList subCategories with parentId=item.Id %} {# 获取当前分类的子分类 #}
            {% for inner in subCategories %}
            <li>
                <a href="{{ inner.Link }}">{{ inner.Title }}</a>
                {% if inner.HasChildren %} {# 如果子分类也有下级，可以继续嵌套 #}
                <ul class="sub-sub-nav">
                    {% categoryList subCategories2 with parentId=inner.Id %}
                    {% for inner2 in subCategories2 %}
                    <li><a href="{{ inner2.Link }}">{{ inner2.Title }}</a></li>
                    {% endfor %}
                    {% endcategoryList %}
                </ul>
                {% endif %}
            </li>
            {% endfor %}
            {% endcategoryList %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endcategoryList %}
</ul>

This code first retrieves the top-level categories under the product model, then in each loop of the top-level category, it checks if it has any subcategories. If there are, it uses them againcategoryListLabel, andparentIdSet the ID of the current parent category (item.Id). Proceed in this manner to implement multi-level nesting.

Scenario four: Display the document summary of the category under the category list

Sometimes, we not only want to display categories, but also hope to show the latest several documents next to or below each category, for example, in some module on the homepage. At this time, we cancategoryListnested in a looparchiveList.

<div>
    {% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
    <div class="category-block">
        <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
        <ul class="article-list">
            {% archiveList archives with type="list" categoryId=item.Id limit="5" %} {# 获取当前分类的最新5篇文档 #}
            {% for archive in archives %}
            <li>
                <a href="{{ archive.Link }}">{{ archive.Title }}</a>
                <span>({{ stampToDate(archive.CreatedTime, "2006-01-02") }})</span>
            </li>
            {% empty %}
            <li>该分类暂无文档</li>
            {% endfor %}
            {% endarchiveList %}
        </ul>
        <a href="{{ item.Link }}" class="more">查看更多</a>
    </div>
    {% endfor %}
</div>

BycategoryId=item.Id,archiveListThe tag can accurately obtain the documents under the current loop category.limit="5"This limits the number of displayed documents.

Summary

BycategoryListLabel collaborationmoduleIdandparentIdParameters, we can flexibly build various category lists in Anqi CMS.Whether it is a simple top-level category, or a complex multi-level nested navigation, or even a mixed display of categories and documents, it can be easily realized.Mastering the use of these tags will make the organization structure of your website content clearer, allowing users to easily find the information they need, thereby improving the overall operation effect of the website.

Frequently Asked Questions (FAQ)

How to judge and highlight the current visited page category in the category list?

You can incategoryListin the loopitemUse on the objectitem.IsCurrentto judge the properties. For example,{% if item.IsCurrent %}active{% endif %}Can be used to highlight the current category's