How to display the category list on the homepage or category page?

Manage and display the category list in the AnQi CMS is the core of website content organization.It is crucial to clearly present the category structure, whether it is for optimizing user navigation experience or for improving the crawling efficiency of search engines.The AnQi CMS provides simple and powerful template tags, allowing you to easily display your content categories on the home page, category pages, or any other place you need.

Understanding the core:categoryListtags

The main tag used to get the category list in the Anqi CMS template system iscategoryListThis tag can help you extract the classification data of websites as needed and display it on the page. Its usage is very intuitive, usually with{% categoryList 变量名称 with 参数 %}and ends with{% endcategoryList %}End, the middle is traversed through the loop to classify the data.

When usingcategoryListWhen labeling, there are several key parameters that can help you accurately control which categories to display:

  • moduleIdThis is one of the most important parameters, used to specify which content model (such as article model, product model, etc.) under which you want to get the categories. For example,moduleId="1"may represent the article model, whilemoduleId="2"可能代表产品型号。When creating categories in the background, each category will belong to a specific content model. Therefore, specifying the model ID here is the basis for obtaining the correct category.
  • parentId: This parameter is used to control the hierarchical relationship of categories.
    • When set toparentId="0"When you do this, you will receive the top-level category. This is very useful when displaying the main content block on the homepage.
    • When set toparentId=item.IdThe current subcategory under the current category can be obtained in the loop. This is very convenient for building multi-level navigation menus or displaying subcategories under parent categories on the parent category page.
  • limit: Used to limit the number of categories displayed, for examplelimit="10"Only the first 10 categories will be displayed.
  • all=true: If you want to get all categories under a specified model, regardless of the level, you can use this parameter.

Display top category list on the homepage in English

The homepage of a website usually needs to display the main categories of the website's content, guiding users to different content areas. This is often part of the website navigation or content block.

The following is an example of a top category list displayed on the homepage:

<nav class="main-nav">
    <ul>
        {% categoryList topCategories with moduleId="1" parentId="0" %}
            {% for item in topCategories %}
                <li class="nav-item {% if forloop.Counter == 1 %}first-item{% endif %}">
                    <a href="{{ item.Link }}" title="{{ item.Title }}">
                        {{ item.Title }}
                    </a>
                </li>
            {% endfor %}
        {% endcategoryList %}
    </ul>
</nav>

In this example:

  • We have defined a variabletopCategoriesStore the obtained category data.
  • moduleId="1"Assuming it is an article model, make sure we are getting the article category.
  • parentId="0"Clearly indicate that we only obtain the top-level categories.
  • forto iteratetopCategoriesof eachitem,item.LinkProvide the link address of the categories,item.TitleProvide the name of the category.
  • forloop.CounterCan be used to add a special style to the first category, for examplefirst-item.

Display subcategory list or同级分类on the category page

When the user enters a specific category page, you may want to display the subcategories of the category for users to further refine their browsing scope; or show other categories at the same level as the current category, to facilitate user switching.

Show subcategory list:

Assuming you are visiting a parent category page and want to display all its subcategories below.

{# 假设当前页面是一个分类页面，可以直接获取到当前分类的ID #}
<div class="sub-categories">
    <h3>探索更多分类</h3>
    <ul>
        {% categoryList subCategories with parentId=category.Id %} {# category.Id 动态获取当前分类的ID #}
            {% for item in subCategories %}
                <li>
                    <a href="{{ item.Link }}" title="{{ item.Title }}">
                        {{ item.Title }}
                        {% if item.HasChildren %} ({{ item.ArchiveCount }}) {% endif %} {# 如果有子分类，显示其下文档数量 #}
                    </a>
                </li>
            {% empty %}
                <li>当前分类下没有子分类。</li>
            {% endfor %}
        {% endcategoryList %}
    </ul>
</div>

Here:

  • parentId=category.IdAutomatically fetches the current visited category's ID and uses it as the parent to get its child categories.
  • item.HasChildrenis a boolean value that can be used to determine whether the current category has a subcategory, thus enabling some conditional display or interactive design.
  • item.ArchiveCountThe number of documents directly contained in the category will be displayed, helping users understand the content volume of the category.

Combine document list to display category:

An often required need is to traverse the main categories on the homepage or a specific page, and display several of the latest articles or products under each category.

<section class="featured-content">
    {% categoryList mainSections with moduleId="1" parentId="0" limit="4" %} {# 获取前4个顶级文章分类 #}
        {% for category in mainSections %}
            <article class="content-block">
                <h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>
                <ul class="article-list">
                    {% archiveList articlesInCategory with categoryId=category.Id type="list" limit="5" %} {# 获取当前分类下最新的5篇文章 #}
                        {% for article in articlesInCategory %}
                            <li>
                                <a href="{{ article.Link }}" title="{{ article.Title }}">
                                    <img src="{{ article.Thumb }}" alt="{{ article.Title }}" />
                                    <h4>{{ article.Title }}</h4>
                                    <p>{{ article.Description|truncatechars:80 }}</p>
                                </a>
                            </li>
                        {% empty %}
                            <li>该分类下暂无文章。</li>
                        {% endfor %}
                    {% endarchiveList %}
                </ul>
                <div class="view-more">
                    <a href="{{ category.Link }}">查看更多 &raquo;</a>
                </div>
            </article>
        {% endfor %}
    {% endcategoryList %}
</section>

This example demonstrates how tocategoryListWitharchiveListLabel combination usage:

  • First, usecategoryListGet the top-level category (mainSections).
  • InmainSectionsin the loop, use it again.archiveListTags, throughcategoryId=category.Idparameter, pass the current category ID toarchiveList, thus obtaining the documents under the category.
  • type="list"andlimit="5"Control the display of the latest 5 articles.
  • article.ThumbShow article thumbnail,article.Description|truncatechars:80Then truncate the article summary for display, keeping the page tidy.

Flexible template customization

The CMS supports custom naming of templates, which means you can design exclusive templates for specific categories. In the "Document Categorydownload.html. When the user accesses this category, the system will automatically apply the template you specified.

In addition, if you want to have more precise control over the category list during template design, you can utilizeitem.Logooritem.Thumbto display the custom image of the category, or useitem.Descriptionto display the introduction of the category.

Through these flexible tags and parameters, you can build a classification display effect that meets various business needs and design styles in the Anqi CMS, greatly enhancing the discoverability and user experience of the website.

Common Questions (FAQ)

  1. 问：How to make the category list only display categories under specific content models (such as articles or products) and not display categories under other models?
    • Answer:You can usecategoryListTagsmoduleIdSpecify the content model ID of the category to be retrieved using a parameter. For example, `{% categoryList categories with moduleId=“1”}