How to use the `categoryList` tag to display the list of articles/products categories on the homepage or sidebar?

When building and optimizing a website, a clear navigation structure is crucial for user experience and search engine optimization. AnQiCMS (AnQiCMS) provides us with powerful template tags, includingcategoryListTags are a core tool used to flexibly display article or product category lists on the website homepage or sidebar.With it, we can easily organize the website content neatly, allowing visitors to find the information they are interested in at a glance.

Why is the classification list so important?

Imagine when a visitor comes to a rich content website, if all the articles or products are piled up together without clear categories, they may feel at a loss and leave quickly.A well-structured classification list that can help users quickly locate information, improve browsing efficiency, and convey the organization logic of the website content to search engines, thereby improving the website's crawling efficiency and ranking.Whether it is displaying the latest information in the "News Center" or listing product categories in the "Product Display",categoryListCan be used for everything.

MastercategoryListBasic usage of tags

categoryListThe core function of tags is to retrieve the classification data set up on our backend. Its basic structure is usually a with{% categoryList ... %}and ends with{% endcategoryList %}The block ends. Inside this block, we can iterate through each category information obtained by the loop.

Let's take a look at some key parameters of this tag, which give us great flexibility:

• moduleId: This is the key parameter of the specified content model. AnQi CMS supports various content models such as articles, products, etc. By settingmoduleIdWe can precisely tell the system which type of content classification we want to obtain. For example, if you want to display article categories, you would usually usemoduleId="1"; if it is product classification, it may bemoduleId="2"(The specific ID can be viewed in the "Content Management" -> "Content Model" in the background).
• parentId: This parameter is used to control the hierarchical relationship of categories.
  • When we want to display only the top-level categories of the website, we can setparentId="0". This is very common on the homepage or main navigation.
  • If we want to get the child categories under a specific category, we can assign the ID of the parent category toparentId.
  • Further, if on a category list page, we want to display the 'brother' category of the current category, we can setparentId="parent".
• allAs the name suggests, when set toall=trueAt that time, it will retrieve all categories under the specified model, regardless of the level. This may be used for special display requirements, such as generating a website map.
• limit: This parameter allows us to control the number of categories displayed, such aslimit="10"It will only display the first 10 categories. For the list page, it also supports offset mode, such aslimit="2,10"Indicates starting from the second data item to fetch 10 items.
• siteId: For users using the AnQi CMS multi-site management function,siteIdCan help us call the classification data under a specific site. Generally, we do not need to set it manually.

Traverse and display classification information

When we usecategoryListAfter the tag gets the classification data, it will usually combineforLoop through these data, and display the detailed information of each category. In the loop, we can access the attributes of each category throughitemvariables, such as:

• {{item.Id}}: The unique identifier of the classification.
• {{item.Title}}: The category name, this is the content displayed most frequently.
• {{item.Link}}: The access link to the category page, convenient for users to click and jump.
• {{item.Description}}: A brief description of the category.
• {{item.Logo}}or{{item.Thumb}}: The thumbnail or Logo image link corresponding to the category.
• {{item.HasChildren}}: A boolean value indicating whether the category has a subcategory, which is very useful when building multi-level navigation.
• {{item.IsCurrent}}Indicates whether the current category is the category on the current page, which can be used to add a highlight style to the current category.
• {{item.ArchiveCount}}The number of articles or products included in the category.

Practical Application: Display Category List on Homepage or Sidebar

Let's demonstrate how to apply it through several practical examplescategoryList.

1. Display Top Article Categories on Homepage or Sidebar

Suppose we want to display all top-level article categories in the sidebar on the homepage, so that users can quickly understand the main content direction of the website.

<div class="sidebar-block">
    <h3>文章分类</h3>
    <ul>
        {% categoryList categories with moduleId="1" parentId="0" %}
        {% for item in categories %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }} ({{ item.ArchiveCount }})</a>
        </li>
        {% endfor %}
        {% endcategoryList %}
    </ul>
</div>

This code first goes throughmoduleId="1"Specify what we need to get the article category, then go throughparentId="0"Make sure to get only the top-level categories. In the loop, we displayed the name of each category and the number of articles it contains, and linked to the corresponding category page.

2. Display product categories and subcategories in the sidebar

For product display websites, we may need to provide more detailed product category navigation in the sidebar, including multi-level subcategories.

<div class="sidebar-block">
    <h3>产品分类</h3>
    <ul>
        {% categoryList productCategories with moduleId="2" parentId="0" %}
        {% for parentItem in productCategories %}
        <li>
            <a href="{{ parentItem.Link }}">{{ parentItem.Title }}</a>
            {% if parentItem.HasChildren %}
            <ul class="sub-categories">
                {% categoryList subCategories with parentId=parentItem.Id %}
                {% for subItem in subCategories %}
                <li>
                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                </li>
                {% endfor %}
                {% endcategoryList %}
            </ul>
            {% endif %}
        </li>
        {% endfor %}
        {% endcategoryList %}
    </ul>
</div>

In this example, we first retrieve the top-level product categories. When iterating through each top-level category, we checkparentItem.HasChildrenwhether it has child categories. If there are any, we make an nested call.categoryListAnd, toparentIdthe current top-level category toId(i.e.),parentItem.IdThus, you can obtain and display the sub-categories below. This nested structure can very intuitively display a multi-level classification system.

3. Combine the category list with the latest articles displayed.

Sometimes, we not only want to display the category itself, but also hope to show several of the latest articles under each category, which is very common in the home page content aggregation area.

<div class="homepage-section">
    {% categoryList categories with moduleId="1" parentId="0" limit="4" %}
    {% for catItem in categories %}
    <div class="category-block">
        <h3><a href="{{ catItem.Link }}">{{ catItem.Title }}</a></h3>
        <ul>
            {% archiveList articles with type="list" categoryId=catItem.Id limit="5" %}
            {% for artItem in articles %}
            <li>
                <a href="{{ artItem.Link }}">{{ artItem.Title }}</a>
                <span class="publish-date">{{ stampToDate(artItem.CreatedTime, "2006-01-02") }}</span>
            </li>
            {% empty %}
            <li>该分类下暂无文章。</li>
            {% endfor %}
            {% endarchiveList %}
        </ul>
    </div>
    {% endfor %}
    {% endcategoryList %}
</div>

Here we first obtained 4 top-level article categories. Inside the loop of each category, we again usedarchiveListtags to get the latest 5 articles under the category (throughcategoryId=catItem.Idandlimit="5")stampToDateThe filter helps us format the article's publication timestamp into a readable date.

Summary

categoryListTags are one of the foundations of Anqi CMS content operation, providing us with the powerful ability to build clear and efficient website navigation.By flexibly using its parameters and combining with other tags, we can achieve a variety of needs from simple classification displays to complex list aggregations.A meticulously designed category list, which not only enhances the user's browsing experience but also contributes to the website's SEO performance.

Frequently Asked Questions (FAQ)

1. Why isn't any content displayed in my category list?

First, check if the corresponding article or product category has been created in your background. Second, ensuremoduleIdThe parameter is set correctly, it tells the system which type of classification you want to retrieve (for example, articles are usuallymoduleId="1", products aremoduleId="2"). If you only want to display top-level categories, please confirmparentId="0"The parameter has been added correctly.

How to highlight the corresponding category in the sidebar for the current visited category page?

IncategoryListIn the loop, eachitemincludes oneIsCurrentProperty. You can use this property to add CSS classes, for example:<li><a href="{{ item.Link }}" class="{% if item.IsCurrent %}active{% endif %}">{{ item.Title }}</a></li>This link in the sidebar will be highlighted when the user visits a category page.

3. How do I display all subcategories under a category, regardless of the hierarchy level?

categoryListThe tag itself only supports direct access to one level of subcategories (by specifyingparentId）。If you need to display an infinite level of subcategories, you need to implement recursion or combine other logic in the template. The usual approach is to call the loop againcategoryList，to display the currentitem.IdasparentIdEnter and cooperateitem.HasChildrenMake a judgment. However, for most websites, two to three levels of classification is enough to provide clear navigation.