How to display both subcategories and the list of articles under the category on a category page?

When operating the AnQiCMS website, we often encounter such needs: we want to display not only the list of articles under a category page but also clearly list all its subcategories for users to navigate more finely.The Anqi CMS with its flexible template engine and rich built-in tags can fully help us easily achieve this goal.

Understanding the category page and template mechanism of Anqi CMS

In Anqi CMS, each category (whether it is an article category or a product category) can be associated with an independent template file. As a rule, this template file is named{模型table}/list.htmlor more precisely,{模型table}/list-{分类ID}.htmlThis means that when a user visits a category page, the system automatically loads the corresponding template file to render the page content.

The key to having both sub-categories and article lists is to skillfully use the functionalities provided by Anqi CMScategoryListtags to retrieve sub-categories, as well asarchiveListtags to retrieve the articles under the category.

Core idea: flexible applicationcategoryListandarchiveListTag

Our core strategy is to display subcategories and article lists on the same category page:

1. Determine the current category:In the category page, the current category information being accessed (such as ID, name, etc.) is usually already available as a contextual variable, such as through{{category.Id}}Directly obtain.
2. to retrieve and display subcategories:UsecategoryListtags, and specifyparentIdThe parameter is the ID of the current category, and you can get its direct subcategories.
3. Get and display the list of articles:UsearchiveListtags, and specifycategoryIdThe parameter is the ID of the current category, which can retrieve all articles under the category. To better enhance the user experience, the article list will usually be combined withpaginationtags to implement pagination display.

Next, we will introduce how to implement this function step by step in the template.

Detailed steps and code implementation

Suppose we want to create a model for the "article" model (whose table name isarticle) to implement this feature. You need to find or create it in the directory of the current template theme.article/list.htmlFile. If you want to use an independent template for a specific category, you can also specify the corresponding template file in the background category settings.

1. Get the list of subcategories of the current category.

Inarticle/list.htmlIn the template, we can first obtain the subcategories of the current category.categoryListlabel'sparentIdThe parameter is crucial, as it can specify which parent category's subcategories we want to obtain.

{# 获取当前分类的ID，假设当前分类对象已在页面上下文中可用为 'category' #}
{% set currentCategoryId = category.Id %}

{# 使用 categoryList 标签获取当前分类下的所有子分类 #}
{% categoryList subCategories with parentId=currentCategoryId %}
    {% if subCategories %} {# 判断是否有子分类 #}
        <div class="sub-categories-section">
            <h2 class="section-title">子分类</h2>
            <ul class="sub-categories-list">
                {% for item in subCategories %}
                    <li class="sub-category-item">
                        <a href="{{ item.Link }}" title="{{ item.Title }}">
                            {{ item.Title }}
                            {% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}"/>{% endif %}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% else %}
        <p>当前分类下暂无子分类。</p>
    {% endif %}
{% endcategoryList %}

In this code block:

• We first obtained the current category'sId.
• {% categoryList subCategories with parentId=currentCategoryId %}Based on the current category ID, it retrieves all direct subcategories and stores the results insubCategoriesthe variable.
• We use{% if subCategories %}to determine if there are subcategories, to avoid displaying an empty list when there are no subcategories.
• Inforthe loop,item.Linkanditem.TitleProvide links and titles for subcategories.item.ThumbCan be used to display thumbnails for subcategories (if set in the background).

2. Retrieve and display the list of articles under the category.

After displaying the sub-categories, you can immediately display the list of articles under the current category. Here we will usearchiveListtags and enable pagination.

{# 使用 archiveList 标签获取当前分类下的文章列表 #}
{# type="page" 开启分页功能，limit="10" 设置每页显示10篇文章 #}
{% archiveList articles with categoryId=currentCategoryId type="page" limit="10" %}
    {% if articles %} {# 判断是否有文章 #}
        <div class="article-list-section">
            <h2 class="section-title">本分类最新文章</h2>
            <ul class="article-items">
                {% for item in articles %}
                    <li class="article-item">
                        {% if item.Thumb %}
                            <a href="{{ item.Link }}" class="article-thumb-link">
                                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb"/>
                            </a>
                        {% endif %}
                        <div class="article-info">
                            <h3><a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a></h3>
                            <p class="article-description">{{ item.Description|truncatechars:120 }}</p>
                            <div class="article-meta">
                                <span>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                                <span>阅读量：{{ item.Views }}</span>
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ul>

            {# 添加分页导航 #}
            <div class="pagination-section">
                {% pagination pages with show="5" %}
                    <ul>
                        {% if pages.PrevPage %}
                            <li><a href="{{ pages.PrevPage.Link }}">上一页</a></li>
                        {% endif %}
                        {% for item in pages.Pages %}
                            <li class="{% if item.IsCurrent %}active{% endif %}">
                                <a href="{{ item.Link }}">{{ item.Name }}</a>
                            </li>
                        {% endfor %}
                        {% if pages.NextPage %}
                            <li><a href="{{ pages.NextPage.Link }}">下一页</a></li>
                        {% endif %}
                    </ul>
                {% endpagination %}
            </div>
        </div>
    {% else %}
        <p>当前分类下暂无文章。</p>
    {% endif %}
{% endarchiveList %}

In this code block:

• {% archiveList articles with categoryId=currentCategoryId type="page" limit="10" %}It will retrieve the articles under the current category, set 10 articles per page, and enable pagination mode.
• We also use{% if articles %}to determine if there are any articles.
• InforIn the loop, it displays the article's title, link, description (usingtruncatecharsfilter to extract), publication time (usingstampToDatefilter to format), reading volume, and thumbnail.
• After the article list, it immediately usedpaginationtags to generate pagination navigation,show="5"indicating that up to 5 page buttons are displayed.

Integrate all the code together(article/list.htmlexample)

Now, we will merge the above two parts of the code into an `article