Manage website content in Anqi CMS, sometimes we need to clearly display the top-level category list of a specific content model on the homepage or in the sidebar and other key positions.This not only effectively guides visitors to browse the website content, improve user experience, but also is an important aspect of website content architecture optimization and search engine friendliness.By using AnQiCMS's flexible template system and powerful tag functions, this requirement is met directly and efficiently.

Understanding the Core: Content Model and Classification

In 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, news, and 'product model' for displaying product information.Each content model can have an independent classification system. To display the top-level classification list of a specific content model, it is first necessary to clarify which content model's classification we want to display.

The concept of "category" is the cornerstone of organizing content. Top-level categories refer to categories without parent categories, usually serving as the highest level of the content system.

Key tools:categoryListTemplate Tag

The Anqi CMS template system uses a syntax similar to Django, obtaining and displaying data through various template tags. To get the category list, we need to usecategoryListThe tag is specifically designed to retrieve category data and provides rich parameters to finely control the output results.

The two most critical parameters are:

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

Step Details: Display Top Categories on the Homepage or Sidebar

Step 1: Determine the Content Model ID

First, we need to know the unique ID of the target content model. This is usually checked in the Anqie CMS backend management interface.

  1. Log in to the AnQi CMS background.
  2. Navigate to 'Content Management' -> 'Content Model'.
  3. Here, you will see the list of all created content models, such as "article model", "product model", and so on.Each model will have a corresponding ID (usually a number).For example, by default, the 'Article Model' ID may be 1, and the 'Product Model' ID may be 2.Remember the model ID you want to display for the category.

Step 2: Choose a suitable display location

You can choose to display in the main content area of the homepage(index.html) or the website's universal sidebar(partial/aside.htmlOr a file with a similar name, depending on the structure of your template), or display the category list at the header, footer, or other locations. If the list is general and needs to be reused across multiple pages, it is recommended to place it in a separate template fragment file (such aspartial/top_categories.htmlThen proceed{% include "partial/top_categories.html" %}The tag is used to include it in the page that needs to be displayed. This modular approach makes your template code cleaner and easier to maintain.

Step 3: Write the template code

Now, let's write the actual template code. Below is a general code example demonstrating how to obtain the top-level category of the 'article model' and display it as a linked list.

Assuming we want to display the "article model" (assuming an ID of1) top-level category list:

<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" %}: This is the core tag, it will come from the ID of1In the content model, retrieve all top-level categories and store the results in a variable namedcategories.
  • {% for item in categories %}：TraversecategoriesEach category data in the variable.
  • item.Link: Output the URL link of the current category.
  • item.TitleOutput the name of the current category.
  • item.HasChildrenThis is a boolean value, if there are subcategories under the current category, it will returntrueYou can use this feature to add different styles or icons to items with subcategories.
  • {% endcategoryList %}:categoryListThe end tag that wraps the looping content of the list.

If you want to display several of the latest articles under each top-level category below, 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 nested.archiveListLabel, it will be under the current category (determined byitem.Id) to get the latest 3 articles and store them inarticlesthe variable.
  • type="list": This indicates getting a regular list instead of a paginated list.
  • limit="3": Limit to displaying only 3 articles.
  • {% empty %} ... {% endarchiveList %}If:archiveListNo articles were retrieved, "No articles available" will be displayed.

By organizing the code in this way, you can easily display the top-level categories of a specific content model and its associated content at any location on the website, greatly enriching the form of content display on the website.

Practical suggestions

  • 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 updateAfter modifying the template code, if the front-end page does not take effect immediately, please try to clear the system cache of Anqi CMS to ensure that the latest code is loaded.
  • Modular referenceIf 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.htmlThen proceed{% include "partial/top_categories.html" %}In the required place, it improves code reuse and maintenance efficiency.

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

Frequently Asked Questions (FAQ)

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