How to get all the top-level category lists and display them on the page?

How to obtain and display all top-level category lists on the website page in AnQi CMS

As a website operator, I fully understand the importance of clear website structure for user experience and Search Engine Optimization (SEO).Categorization navigation is one of the core elements of website content organization, it not only guides users to quickly find the information they need, but also helps search engines better understand the content hierarchy of the website.AnQiCMS provides a直观 and powerful template tag system, allowing website operators to easily manage and display the classification structure of the website.

Understand the classification system of Anqi CMS

In AnQi CMS, content is organized in the form of 'categories'.Each category belongs to a specific "content model" (such as article model, product model), which makes content management more flexible and structured.To obtain the list of website categories, we first need to understand how these categories are associated with the content model, as it is often necessary to specify the content model ID when calling the category data.

applycategoryListTag to get category data

AnQi CMS template system provides a namedcategoryListThe tag is used to retrieve and display the classification data of the website.This tag is designed to be very flexible, it can be configured according to different needs (such as obtaining the classification of a specific model, obtaining the sub-category, obtaining all categories, etc.).For our current requirement - to get the list of all top-level categories,categoryListThe key to the tag is itsparentIdParameter.

Accurately obtain the top-level category list

To accurately retrieve all top-level categories that do not belong to any parent category, we need toparentIdthe parameter to"0"In addition, since each category in Anqicms is bound to a specific content model, when we retrieve the top-level categories, we also need to specify the categories belonging to themoduleIdFor example, if we want to get the article model (usuallymoduleId="1") under all top-level categories, then the combined tags will specifymoduleId="1"andparentId="0"Thus,categoryListThe tag can accurately return the top-level classification data we need.

Display the top-level classification list on the page

Once we pass throughcategoryListOnce the tag gets the top-level classification data, it can proceed throughforLoop to iterate through these data and display it on the page. Inside the loop, we can easily access various properties of each category, such as the category ID (item.Id), Title (item.Title) and link (item.Link) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assuming ) etc. The following is a specific template code example demonstrating how to retrieve the article model (assumingmoduleIdUnder 1), all top-level categories are displayed in a list with their titles and links:

{# 假设要获取文章模型（moduleId="1"）的所有顶级分类 #}
<nav class="main-category-navigation">
    <ul>
        {% categoryList categories with moduleId="1" parentId="0" %}
            {% for item in categories %}
                <li>
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {# 如果需要，可以根据 item.HasChildren 判断是否有子分类并决定是否加载更多内容 #}
                </li>
            {% empty %}
                <li>目前没有顶级分类可供显示。</li>
            {% endfor %}
        {% endcategoryList %}
    </ul>
</nav>

In this example,categoriesIs the variable name we define for the top-level category list. Through{{ item.Link }}and{{ item.Title }}We output the access address and display name of the classification separately.{% empty %}A block is a very practical feature that displays friendly prompt information when no category data is returned, enhancing user experience.

Integrate the code into your website template.

This code can be placed at different positions in the website template according to the design requirements. For example, if this is part of the main navigation of the website, it may be included inpartial/header.htmlorbase.htmlSuch a public template file is in order to maintain consistency across all pages. If it is a sidebar category list, it can be placed inpartial/aside.htmlEmbed it directly into the page template it needs, such asindex/index.html. No matter where it is placed,categoryListthe tag ensures that the latest category data is dynamically loaded without manual update.

The importance of the content model ID

In actual operation, please ensure thatmoduleIdThe value matches the content model ID associated with the category you want to retrieve. AnQi CMS allows users to customize content models, so different websites have different content models.moduleIdMay vary. You can view and manage the 'Content Model' in the 'Content Management' menu of the Anqi CMS backend. Specify correctly.moduleIdThis is a key step to obtain an accurate classification list.

BycategoryListLabel collaborationmoduleIdandparentId="0"Parameters, Anqi CMS provides an efficient and flexible way to retrieve and display all top-level categories of the website.This method not only maintains the clarity and tidiness of the website structure, but also greatly enhances the discoverability and user experience of the content.As an operations manager, I know that the ease of use of tools is the key to improving efficiency, and AnQi CMS does very well in this regard.

Frequently Asked Questions (FAQ)

1. How do I know about my content model?moduleIdare?

You can log in to the Anqi CMS backend, navigate to the "Content Management" menu, and then select the "Content Model".There, you will see all the defined content models and their corresponding IDs.For example, the 'Article Model' is usually ID 1, the 'Product Model' ID 2, but custom models will have their specific IDs.Be sure to use the exact numeric ID displayed here.

2. How should I modify the code if I want to display subcategories along with the top-level category?

If you want to display subcategories under the top-level category, you can do so in the top-level category'sforit again within the loopcategoryListLabel, andparentIdThe parameter is set to the current top-level category ofitem.Id. For example:{% categoryList subCategories with parentId=item.Id %}，then in this newsubCategoriesloop, display subcategories. This can build a multi-level navigation structure.

3. Why is my top-level category list not displaying any content?

There may be several reasons. First, please checkmoduleIdDid the parameter correctly specify the model ID you want to retrieve the content for.Next, confirm that there is indeed a top-level category in the "Content Management" -> "Document Category" section of the Anqi CMS backend, and that the "Parent Category" field of these categories is empty, indicating that they are top-level categories themselves.Finally, make sure your template file is saved in UTF-8 encoding format and there are no syntax errors that prevent the tags from being parsed correctly.