How to display all documents under the current category and its subcategories in AnQiCMS template?

In AnQiCMS template design, flexibly displaying content is the key to website operation.When you need to display articles in a category page not only the articles under the current category but also all the articles of the subcategories, or present them in a more structured way, AnQiCMS provides powerful template tags to meet these needs.This article will introduce you to how to implement this feature in your AnQiCMS template.

Understanding the category and document mechanism of AnQiCMS

In AnQiCMS, content is usually organized under 'Document Model' and 'Categories'.Each document (or article/product, etc.) belongs to a specific category, and categories can have parent-child hierarchical relationships.This hierarchical structure provides great flexibility for the organization and presentation of content.When we call content in the template, we need to specify which category (and its subcategories) to retrieve, as well as how to sort and limit the number.

Core tags:archiveListwithcategoryList

The core of displaying the current category and its subcategory documents lies in two template tags:

  1. categoryList(Category list tag): Used to retrieve category information, including the subcategories of the current category. By traversing this list, we can obtain the IDs and names of all subcategories.
  2. archiveList(Document list label)Used to retrieve the document list. This tag is very powerful, allowing you to filter documents through various parameters, the most critical of which iscategoryId(Category ID) andchild(whether to include documents in subcategories).

Next, we will demonstrate the specific operations through two common scenarios.

Scenario one: directly display the current category and all its subcategories of documents.

This is the most direct requirement, that is, to list all documents that belong to the current category and all its subcategories (including grandchild categories, etc.) on a category page in one go.

To achieve this function, we mainly rely onarchiveListlabel'scategoryIdandchildparameters. When you are in a category page template (such as{模型table}/list.htmlUsed inarchiveListif omittedcategoryIdparameter,archiveListit will try to read the current page's category ID by default. AndchildThe parameter is set to default.trueIt means it will automatically include all subcategory documents.

Code example:

{# 假设我们正在一个分类列表页面的模板中，例如 articles/list.html #}

{# 首先，可以获取当前分类的详细信息，用于标题等展示，这不是必须的，但有助于页面上下文 #}
{% categoryDetail currentCategory with name="Id" %}
{% categoryDetail currentCategoryTitle with name="Title" %}

<h1>{{ currentCategoryTitle }} 及下属所有分类文档</h1>

<div class="document-list-container">
    {% archiveList archives with type="page" limit="10" order="id desc" %}
        {% for item in archives %}
        <div class="document-item">
            <a href="{{ item.Link }}">
                <h3>{{ item.Title }}</h3>
                {% if item.Thumb %}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="document-thumb">
                {% endif %}
                <p class="document-description">{{ item.Description }}</p>
                <div class="document-meta">
                    <span>所属分类: {% categoryDetail categoryName with name="Title" id=item.CategoryId %}{{ categoryName }}</span>
                    <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>浏览量: {{ item.Views }}</span>
                </div>
            </a>
        </div>
        {% empty %}
        <p>当前分类及其子分类下没有任何文档。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 如果需要分页，可以结合 pagination 标签 #}
    {% pagination pages with show="5" %}
    <div class="pagination-nav">
        {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}">上一页</a>{% endif %}
        {% for p in pages.Pages %}<a href="{{ p.Link }}" class="{% if p.IsCurrent %}active{% endif %}">{{ p.Name }}</a>{% endfor %}
        {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}">下一页</a>{% endif %}
    </div>
    {% endpagination %}
</div>

Code explanation:

  • {% categoryDetail currentCategory with name="Id" %}The code will implicitly get the ID of the current category page and assign its value tocurrentCategoryVariable (although this variable is not used directly, butarchiveListwill be automatically used when not specifiedcategoryIdas the category ID of the current page).
  • {% archiveList archives with type="page" limit="10" order="id desc" %}:
    • archives: Define a variable to store the list of retrieved documents.
    • type="page": This is a paginated list.
    • limit="10": Displays 10 articles per page.
    • order="id desc": Sorted by document ID in descending order, meaning the most recent ones are at the top.
    • : Because it was not specified.categoryId,archiveListIt will intelligently obtain the ID of the current category.
    • : Because it was not specified.childThe parameter, it will use the default value.trueIt will automatically include all subcategory documents.
  • {% for item in archives %}...{% empty %}...{% endfor %}: Loop through the document list, if the list is empty, then display.{% empty %}The content inside.
  • {% categoryDetail categoryName with name="Title" id=item.CategoryId %}: Inside the document loop, based on each article'sCategoryIdDynamically obtain the name of its category.
  • {% pagination pages with show="5" %}: Used to generate pagination navigation, allowing users to switch between different pages.

Scenario two: Display in layers: First, display the current category documents, and then display the subcategory documents and their layers in turn

If you want the page structure to be clearer, for example, first display the direct documents under the current main category, then list the subcategories, and then list the documents under each subcategory, you can use nested loops.

Code example:

`twig {# Assume we are in a category list page template, such as products/list.html #}

{# 1. Get the details of the current category #} {% categoryDetail currentCategoryDetail %}

{{ currentCategoryDetail.Title_in_English }}

{{ currentCategoryDetail.Description in English }}

Display direct documents under the current category (does not include documents under subcategories) #

documents under the {{ currentCategoryDetail.Title }}