How to call and display the subcategory list or associated article list under a specified category in AnQiCMS?

When using AnQiCMS for website content management, we often need to display information based on a specific content organization method.How to flexibly call and display the list of subcategories under a specified category, or the list of articles associated with the category, is a scenario that many users will encounter.AnQiCMS powerful template engine and rich tag functions, making it intuitive and efficient to meet these requirements.

AnQiCMS uses a syntax similar to the Django template engine, which means you can retrieve and render data through concise tags without delving into complex programming code.This allows content operation personnel to easily handle the display logic of website content even without a deep development background.

Flexible calling and displaying the subcategory list under a specified category

When building the navigation, sidebar, or content index of a special page, we often need to list all the subcategories under a main category. AnQiCMS providescategoryListLabels can help us easily achieve this goal.

The most critical parameter is to call the subcategory list under the specified category.moduleIdandparentId.moduleIdUsed to specify the type of content model you want to retrieve (such as article model, product model, etc.), usually the ID corresponding to the article model is1, the product model could be2You can view the specific content in the background content model management.parentIdIt refers to specifying which category's subcategory you want to retrieve. IfparentIdis set to0You will get all top-level categories. If you want to get the subcategories under a specific category (such as ID forXcategory) under, just setparentIdis set toXJust do it.

Here is an example of how to call a specific category under an article model (for example, let's assume the category ID is10) example of the subcategory list:

{% categoryList subCategories with moduleId="1" parentId="10" %}
    <ul class="sub-category-list">
        {% for category in subCategories %}
            <li>
                <a href="{{ category.Link }}" title="{{ category.Title }}">{{ category.Title }}</a>
                {% if category.HasChildren %}
                    {# 如果子分类还有下级，可以继续嵌套调用，或者仅显示一层 #}
                    <span class="has-children-indicator">»</span>
                {% endif %}
            </li>
        {% empty %}
            <p>该分类下暂无子分类。</p>
        {% endfor %}
    </ul>
{% endcategoryList %}

In this code block,subCategoriesIt is the variable name defined for the subcategory list obtained.category.Linkandcategory.TitleIt will output the link and name of each subcategory separately.category.HasChildrenIt is a boolean value that can be used to determine whether the current category has deeper-level subcategories for different display processing on the front end.

Retrieve and display the list of associated articles under a specified category

In addition to displaying subcategories, we are more likely to display the content of articles under a specific category. AnQiCMS'sarchiveListTags are a powerful tool for handling such needs. They can not only retrieve article lists but also perform various filtering and sorting operations.

To display articles under a specified category, it is also necessary to be clear.moduleIdandcategoryId.categoryIdSet the category ID of the article you want to display. In addition,limitThe parameter can control the number of articles displayed,orderThe parameter can define the sorting rule (such as in reverse order by publication timeid descor sorted by view countviews desc)typeThe parameter determines the type of the list,listmeans to get a fixed number of lists,pagemeans you want to display in paginated mode.

The following is an example of displaying a category ID of15The example of the article list under the article model, including simple pagination:

<div class="category-articles">
    {# 调用分类ID为15的文章列表，每页显示10篇文章，并启用分页 #}
    {% archiveList articles with categoryId="15" moduleId="1" limit="10" order="id desc" type="page" %}
        {% for article in articles %}
            <div class="article-item">
                <a href="{{ article.Link }}" title="{{ article.Title }}">
                    <h3>{{ article.Title }}</h3>
                    {% if article.Thumb %}
                        <img src="{{ article.Thumb }}" alt="{{ article.Title }}" class="article-thumb">
                    {% endif %}
                    <p>{{ article.Description|truncatechars:100 }}</p> {# 截取前100个字符作为简介 #}
                    <span class="publish-date">发布于：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                    <span class="views">阅读量：{{ article.Views }}</span>
                </a>
            </div>
        {% empty %}
            <p>该分类下暂无文章。</p>
        {% endfor %}

        {# 结合分页标签，生成分页链接 #}
        {% pagination pages with show="5" %}
            <div class="pagination-controls">
                {% if pages.FirstPage %}
                    <a href="{{ pages.FirstPage.Link }}">首页</a>
                {% endif %}
                {% if pages.PrevPage %}
                    <a href="{{ pages.PrevPage.Link }}">上一页</a>
                {% endif %}
                {% for pageItem in pages.Pages %}
                    <a href="{{ pageItem.Link }}" class="{% if pageItem.IsCurrent %}active{% endif %}">{{ pageItem.Name }}</a>
                {% endfor %}
                {% if pages.NextPage %}
                    <a href="{{ pages.NextPage.Link }}">下一页</a>
                {% endif %}
                {% if pages.LastPage %}
                    <a href="{{ pages.LastPage.Link }}">末页</a>
                {% endif %}
            </div>
        {% endpagination %}
    {% endarchiveList %}
</div>

In this example,articlesIt is the article list variable we define. We display the article title, thumbnail, introduction, publication date, and reading volume.truncatechars:100Is a filter used to truncate the introduction content to a specified length and add an ellipsis, which is very practical when displayed on the list page.stampToDateIs a label for formatting timestamps, which can beCreatedTimeThis timestamp is converted to a readable date format. Whentype="page"then,paginationTags are automatically generated for pagination links based on the context of the current list.

Combined use: Build a more dynamic display.

AnQiCMS template tags can be flexibly combined to build more dynamic page content.For example, you may want to list multiple top-level categories first on a page, and then display the latest few articles under each category.

`twig

{% categoryList mainCategories with moduleId="1" parentId="0" %} {# 获取文章模型下的所有顶级分类 #}
    {% for mainCategory in mainCategories %}
        <div class="main-category-block">
            <h2><a href="{{ mainCategory.Link }}">{{ mainCategory.Title }}</a></h2>
            <ul class="articles-in-category">
                {# 在每个顶级分类下，调用其最新的5篇文章 #}
                {% archiveList articlesInCategory with type="list" categoryId=mainCategory.Id limit="5" order="id desc" %}
                    {% for article in articlesInCategory