Manage website content in AnQi CMS, sometimes we need to clearly display the top-level category list of a specific content model at key positions such as the homepage or sidebar.This can not only effectively guide visitors to browse the website content and enhance user experience, but also is an important part of optimizing website content structure and SEO-friendly.With the flexible template system and powerful tag functions of AnQiCMS, this requirement can be achieved directly and efficiently.

Understanding the Core: Content Model and Category

In the Anqi CMS, the core of content management lies in the 'content model'.You can create different content models based on your business needs, such as 'Article Model' for publishing blogs and news, and 'Product Model' for displaying product information.Each content model can have an independent classification system.To display the top-level category list of a specific content model, first it is necessary to clarify which content model's categories we want to display.

The concept of 'classification' is the cornerstone of organizing content. Top-level categories refer to categories without parent categories and are usually the highest level in the content hierarchy.

Key Tools:categoryListTemplate tags

The template system of Anqi CMS adopts syntax similar to Django, using various template tags to retrieve and display data. To retrieve the category list, we need to usecategoryListLabel. This label is specifically designed for retrieving classification data and provides rich parameters for fine-grained control of the output results.

Among them, the two most critical parameters are:

  • moduleId：Used to specify which content model's categories you want to get. Different content models have unique IDs in the backend.
  • parentId="0"This is a very important parameter, it tells the system that we only need to get those categories without parent categories, that is, 'top-level categories'.

步骤详解：在首页或侧边栏展示顶级分类

第一步：确定内容模型ID

Firstly, we need to know the unique ID of the target content model. This is usually viewed in the backend management interface of the Aanqi CMS.

  1. Log in to the Anqi CMS backend.
  2. Navigate to "Content Management" -> "Content Model".
  3. Here, you will see a list of all created content models, such as "Article ModelEach model will have a corresponding ID (usually a number).For example, by default, the ID of the "Article ModelPlease remember the model ID you want to display for the category.

Step 2: Choose an appropriate display location

You can choose the main content area on the home page(index.html) or the general sidebar of the website(partial/aside.htmlor similar names of files, depending on your template structure), or display category lists at the header, footer, and other positions. If the list is generic and needs to be reused across multiple pages, it is recommended to place it in an independent template fragment file (for examplepartial/top_categories.html), then through{% include "partial/top_categories.html" %}Label it to be displayed on the required page. This modular approach allows your template code to be more organized and easier to maintain.

Step 3: Write the template code

Now, let's write the actual template code.The following is a general code example demonstrating how to retrieve the top-level category of the 'Article Model' and display it as a linked list.

假设我们要在侧边栏显示“文章模型”（其ID假设为1）的顶级分类列表：

<div class="sidebar-block">
    <h3>文章分类</h3>
    <ul>
        {% categoryList categories with moduleId="1" parentId="0" %}
            {% for item in categories %}
                <li class="category-item">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {# 如果需要，可以判断当前分类是否有子分类，并显示一个指示符 #}
                    {% if item.HasChildren %}
                        <span class="has-children-indicator">›</span>
                    {% endif %}
                </li>
            {% endfor %}
        {% endcategoryList %}
    </ul>
</div>

Code analysis:

  • {% categoryList categories with moduleId="1" parentId="0" %}：这是核心标签，它会从ID为1The content model retrieves all top-level categories and stores the results in a variable namedcategories.
  • {% for item in categories %}: Iterate overcategoriesEach category data in the variable.
  • item.Link: Output the URL link of the current category.
  • item.Title：输出当前分类的名称。
  • item.HasChildren：这是一个布尔值，如果当前分类下有子分类，它会返回trueEnglish. You can use this feature to add different styles or icons to items with subcategories.
  • {% endcategoryList %}:categoryListThe terminator of the label, the loop content of the list is wrapped inside.

If you want to display several of the latest articles under each top-level category, you can extend the code like this (assuming you want to display 3 articles):

<div class="sidebar-block">
    <h3>文章分类</h3>
    <ul>
        {% categoryList categories with moduleId="1" parentId="0" %}
            {% for item in categories %}
                <li class="top-category-item">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.HasChildren %}
                        <span class="has-children-indicator">›</span>
                    {% endif %}
                    {# 显示该顶级分类下的最新文章 #}
                    <ul class="sub-articles">
                        {% archiveList articles with categoryId=item.Id type="list" limit="3" %}
                            {% for article in articles %}
                                <li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
                            {% empty %}
                                <li>暂无文章</li>
                            {% endfor %}
                        {% endarchiveList %}
                    </ul>
                </li>
            {% endfor %}
        {% endcategoryList %}
    </ul>
</div>

Explanation of the extended code:

  • {% archiveList articles with categoryId=item.Id type="list" limit="3" %}This is a nested one.archiveListThe label, it will get the latest 3 articles under the current category (determined by)item.Id), and store them inarticlesthe variable.
  • type="list"It means to get a normal list instead of a paginated list.
  • limit="3"：Limit to displaying only 3 articles.
  • {% empty %} ... {% endarchiveList %}IfarchiveListIf no articles are retrieved, it will display 'No articles available.'.

Through such code organization, you can easily display the top-level categories and associated content of a specific content model at any location on the website, greatly enriching the display form of the website's content.

Practical Tips

  • Style ControlThe above code only shows the structure, you need to combine CSS styles to beautify the display of the category list to match your website design.
  • Cache UpdateIn the modified template code, if the front-end page does not take effect immediately, please try to clear the security CMS system cache to ensure that the latest code is loaded.
  • Modular reference：If your website has multiple sidebars or different pages that need to display similar category lists, you can consider saving the above code as a separate template file (for examplepartial/top_categories.html), then through{% include "partial/top_categories.html" %}Reference at the required location to improve code reusability and maintainability.

The template tag system of AnQi CMS provides great flexibility, allowing you to organize and display website content according to specific needs at will.Master these basic methods, and you will be able to make better use of the potential of AnQiCMS.

Common Questions (FAQ)

Q1: How to further display the child category list under the top-level category?A1: If you want to display subcategories under the top-level category, you can in the{% for item in categories %}loop, use `category