When building and optimizing a website, a clear navigation structure is crucial for user experience and search engine optimization. AnQiCMS provides us with powerful template tags, wherecategoryListThe label is a core tool used to flexibly display article or product category lists on the website homepage or sidebar.Through 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 visitors come to a rich-content website, if all 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 not only helps users quickly locate information and improve browsing efficiency, but also communicates the organizational logic of the website content to search engines, which is helpful in improving the crawling efficiency and ranking of the website.categoryListCan be used in many ways.

MastercategoryListBasic usage of the tag

categoryListThe core function of tags is to obtain the classification data set up in our background. Its basic structure is usually a{% categoryList ... %}Start, with{% endcategoryList %}The end block. Within this block, we can iterate over and obtain each category information.

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. Secure CMS supports various content models, such as articles, products, etc. Through settingmoduleIdWe can accurately tell the system which type of content category we want to retrieve. For example, if we want to display article categories, we would usually usemoduleId="1"; if it is a product category, it may bemoduleId="2"(The specific ID can be viewed in the background "Content Management" -> "Content Model").
  • 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 subcategories under a specific category, we can assign the ID of the parent category toparentId.
    • Further, if we want to display the "brother" category of the current category on a category list page, we can setparentId="parent".
  • all: As the name suggests, when set toall=trueWhen this is set, it will retrieve all categories under the specified model, regardless of the level. This may be used in special display requirements, such as generating a sitemap.
  • limitThis parameter allows us to control the number of categories displayed, for examplelimit="10"It will only display the first 10 categories. For the list page, it also supports the offset mode, for examplelimit="2,10"Represents starting from the 2nd data item and getting 10 items.
  • siteId: For users who use the Safe CMS multi-site management function,siteIdIt can help us call the category data under a specific site. Generally, we do not need to manually set it.

Traverse and display category information

When we usecategoryListAfter the tag gets the category 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 by variable:item变量访问每个分类的属性，比如：

  • {{item.Id}}: The unique identifier ID of the category.
  • {{item.Title}}: The name of the category, which is the content displayed most frequently.
  • {{item.Link}}: The access link of the category page, convenient for users to click and jump.
  • {{item.Description}}: The brief description of the category.
  • {{item.Logo}}or{{item.Thumb}}: The thumbnail or Logo image link corresponding to the category.
  • {{item.HasChildren}}: An English boolean value indicating whether the category has subordinate subcategories, 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 under this category.

Actual application: Display category list on the homepage or sidebar

Below, we will demonstrate how to apply by using several practical examplescategoryListLabel.

1. Display top-level article categories on the homepage or sidebar

Assuming we want to display all top-level article categories on the homepage sidebar, allowing users to 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 retrieves the latest 5 articles bymoduleId="1"Specified the article category we want to retrieve, then throughparentId="0"Ensure that only the top-level categories are obtained. In the loop, we display the name of each category and the number of articles it contains, and link to the corresponding category page.

2. In the sidebar, display product categories and their subcategories.

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. While iterating through each top-level category, we checkparentItem.HasChildrenwhether it has subcategories. If there are any, we nested callcategoryList，and thenparentIdSet to the current top-level categoryId(i.e.,)parentItem.Id），thus obtaining and displaying its subcategories. This nested structure can very intuitively present a multi-level classification system.

3. Category list combined with 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. Within 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 timestamp into a readable date.

Summary

categoryListLabels are one of the foundations of Anqi CMS content operations, 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 display to complex list aggregation.A meticulously designed category list, which not only enhances the browsing experience of users but also contributes to the SEO performance of the website.

Common Questions (FAQ)

1. Why is my category list not displaying any content?

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

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

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

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

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