How does AnQiCMS display the list of all top-level categories?

In website construction and content operation, clear classification navigation is the foundation of user experience, as well as the core of content organization.For users of AnQiCMS, how to efficiently display the list of all top-level categories on the website is the first step in building the website structure.AnQiCMS with its flexible template engine and rich built-in tags makes this task exceptionally simple and intuitive.

Understanding the structure of categories and core tags

In AnQiCMS, content is organized according to the "content model" and "category".A category always belongs to a specific content model (such as an article model, product model, etc.), and categories can have a hierarchical relationship.Top-level category, as the name implies, it refers to those categories that do not have a parent category, they are the top level of the category hierarchy.

To display the list of top-level categories, we mainly use a core tag in the AnQiCMS template system:categoryList. This tag is used to retrieve and display category data and provides various parameters to accurately control the range of categories we want to retrieve.

How to display the list of all top-level categories

We will explain in detail the following steps on how to display the list of all top-level categories in the AnQiCMS template.

Firstly, we need to determine in the template file where you want to display these category lists. This is usually in the navigation bar, sidebar, or some area on the homepage, for exampleindex.html(Home page template) orpartial/header.html(Header common template) etc.

Next, we will usecategoryListtags to retrieve the required category data. This tag needs to be configured with two key parameters to accurately filter out all top-level categories:moduleIdandparentId.

  1. Confirm content model ID (moduleId)The classification of AnQiCMS is closely related to the content model.This means you need to tell the system which content model's top-level category you want to retrieve.moduleIdWith1If it is a "product" content model,moduleIdusually is2. You can view or edit the ID of each model in the 'Content Management' -> 'Content Model' section of the AnQiCMS backend.

  2. Specify the top-level category (parentId="0")In order to ensure that only the top-level categories are obtained, we need toparentIdthe parameter to0. In AnQiCMS,parentId="0"expressly indicate that the category has no parent category, i.e., it is a top-level category.

With these two key parameters, we can buildcategoryListtags. Here is an example of getting all top-level categories under the "Article" model:

{% categoryList categories with moduleId="1" parentId="0" %}
    {# 循环遍历获取到的顶级分类 #}
    {% for item in categories %}
        <li>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {# 您也可以在这里添加其他分类信息，例如简介或缩略图 #}
            {% if item.Description %}<p>{{ item.Description }}</p>{% endif %}
            {% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}"/>{% endif %}
        </li>
    {% empty %}
        <li>暂无顶级分类信息。</li>
    {% endfor %}
{% endcategoryList %}

In this code block:

  • {% categoryList categories with moduleId="1" parentId="0" %}This line of code will query all from the databasemoduleIdWith1(Article model) ANDparentIdWith0(Top category) classification data, and store the results in a namedcategories.
  • {% for item in categories %}: This is a loop structure, it will iterate through one by onecategoriesEach category in the variable. In each loop, the data of the current category will be assigned toitemVariable.
  • {{ item.Link }}: Displays the link address of the current category, clicking on it will jump to the list page of the category.
  • {{ item.Title }}Display the current category name.
  • {{ item.Description }}Display the current category description.
  • {{ item.Thumb }}Display the current category thumbnail.
  • {% empty %}If:categoriesNo data in the list.emptyContent inside the block (for example, “No top-level category information available.”) will be displayed.

In this way, you can flexibly display the top-level category list of the required content model at any location on the website.This tag-based calling method greatly simplifies template development, allowing you to focus more on website design and content presentation.

Advanced applications and practical skills

  • Display top-level categories of multiple content models:You can use tags separately to display the top-level categories of articles and products on a page.moduleIdWith1and2ofcategoryListAnd display them in different areas.
  • Determine whether the current category is selected:When building the navigation menu, you may want to highlight the category that the user is currently accessing.itemThere is a variable with oneIsCurrentfield, which is a boolean. You can use{% if item.IsCurrent %}Add a CSS class to the currently selected item to highlight it.
  • Modularize the code:It is recommended to keep the template file tidy and maintainable by placing this commonly used category list code snippet in a separate partial file, for examplepartial/top_categories.htmlUse where necessary{% include "partial/top_categories.html" %}For reference

Through AnQiCMS'scategoryListTags, it becomes easy to display the list of all top-level categories, greatly enhancing the flexibility of the website structure and the efficiency of content organization.

Frequently Asked Questions (FAQ)

  1. How to obtain the top-level category of a specific content model (such as 'product')?You just need to adjustmoduleIdthe value of the parameter. For example, to obtain the top-level category of the product model, you can setmoduleId="1"changed tomoduleId="2"(Please confirm the specific ID according to your backend settings).

  2. Can I control the display order of the top-level categories?Yes, you can edit each category in the 'Content Management' -> 'Document Category' of the AnQiCMS backend, where there is a 'Display Order' field.The lower the number, the earlier the category is displayed in the list.categoryListLabels will be displayed in this order by default.

  3. How to display the list of subcategories under the top-level category?To display subcategories, you can iterate over the top-level categories and setforit again within the loopcategoryListLabel, andparentIdthe current top-level category toitem.Id. At the same time,itemthe variable also has aHasChildrenThe field can determine whether the current category has subcategories, helping you decide whether to display it nested. For example:

    {% for item in categories %}
    <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
    {% if item.HasChildren %}
        <ul>
            {% categoryList subCategories with parentId=item.Id %}
                {% for subItem in subCategories %}
                    <li><a href="{{ subItem.Link }}">{{ subItem.Title }}</a></li>
                {% endfor %}
            {% endcategoryList %}
        </ul>
    {% endif %}
{% endfor %}