How to filter and display the article list according to a specified category ID?

As an experienced enterprise CMS website operation person, I know the importance of content organization and display for user experience and SEO.In daily work, we often need to filter and display article lists according to specific categories so that readers can quickly find the content they are interested in.Today, I will elaborate on how to flexibly and efficiently filter and display article lists in AnQiCMS according to the specified category ID.

Categorizing content is the foundation of a website's effective operation. Whether it's news, product introductions, or blog articles, precise categorization not only enhances the clarity of the website's structure but also helps search engines better understand the content, thereby bringing in higher-quality traffic.In AnQiCMS, we take advantage of the powerful template tag features, making it easy to achieve this goal.

Core Functionality and Implementation Principles

In the AnQiCMS template system, the core tag used to get the article list isarchiveList. This tag provides rich and flexible parameters, allowing us to filter articles based on various conditions, including filtering by category ID.It can handle articles of different content models (such as articles, products) and supports various modes such as normal list display, paginated list display, and related article display.archiveListLabel, we can accurately extract article data that meets specific classification conditions from the database and render it in the front-end template.

Determine the target category ID and content model

Before starting to write code in the template, you first need to specify which category of articles you want to display and obtain the unique identifier of the category - the category ID.At the same time, AnQiCMS supports various content models (for example, the default article model ID is 1, and the product model ID is 2), you also need to determine the content model ID for these articles.This information is usually found in the content management area of AnQiCMS backend, each category and content model has its corresponding ID.For example, if you want to display articles under the "News Center" category, you need to first find the ID of the "News Center" category in the background, assuming the ID is5And the article belongs to the default "Article Model" (itsmoduleIdusually is1)

Call in the templatearchiveListTag

Once the target category ID and content model ID are obtained, they can be used in the AnQiCMS template files.archiveListTag to call the article list. This tag usually needs to be wrapped in a{% archiveList ... %}and{% endarchiveList %}structure, and use{% for ... %}a loop to iterate over the obtained article data.

Here is a basic code example showing how to get the category ID for5the first 10 articles under the article model:

{% archiveList archives with type="list" moduleId="1" categoryId="5" limit="10" %}
    {% for item in archives %}
        <li>
            <a href="{{ item.Link }}">
                <h5>{{ item.Title }}</h5>
                <p>{{ item.Description }}</p>
                <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>阅读量: {{ item.Views }}</span>
            </a>
        </li>
    {% empty %}
        <li>该分类下暂时没有文章。</li>
    {% endfor %}
{% endarchiveList %}

In the code above:

• archivesThis is the variable name we define for the article list, you can use any meaningful name.
• type="list"This indicates that we want to display articles in list form rather than pagination mode.
• moduleId="1"The content model specified is the article model.
• categoryId="5"It is the key parameter for filtering articles based on category ID.
• limit="10"It limits the number of displayed articles to 10.
• {% for item in archives %}The loop will process each article one by one.
• {% empty %}the block will bearchivesAlternative content is displayed when the list is empty.

Custom list display and data field

archiveListthe tags returned byitemThe object includes various attributes of the article, and you can flexibly call them in the template according to your actual needs. Common fields include:

• item.Title: Article title
• item.Link: Article link
• item.Description: Article Summary
• item.Thumboritem.Logo: Article thumbnail or cover image
• item.CreatedTime: Article publish timestamp (needs to be passed throughstampToDateTag Formatting)
• item.Views: Article views
• item.CategoryId: Article category ID

To make the article list more rich, we can also combine other tags to get more information. For example, to display the name of the category to which the article belongs, you can usecategoryDetailTags:

{% archiveList archives with type="list" moduleId="1" categoryId="5" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <a href="{{ item.Link }}">
                <h4>{{ item.Title }}</h4>
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
                {% endif %}
                <p>{{ item.Description }}</p>
                <div class="article-meta">
                    <span>分类: {% categoryDetail with name="Title" id=item.CategoryId %}</span>
                    <span>发布于: {{ stampToDate(item.CreatedTime, "2006年01月02日") }}</span>
                    <span>阅读量: {{ item.Views }}</span>
                </div>
            </a>
        </div>
    {% endfor %}
{% endarchiveList %}

Here, {% categoryDetail with name="Title" id=item.CategoryId %}Can be based on the current article'sCategoryIdDynamically retrieve and display the category name, greatly enhancing the relevance and user experience of the content.

Implement article list pagination (optional)

For categories with a large number of articles, we usually need to implement pagination to optimize loading speed and browsing experience.archiveListTag by settingtype="page"Parameters, and combinepaginationTags can easily implement pagination lists.

{% archiveList archives with type="page" moduleId="1" categoryId="5" limit="10" %}
    {# 文章列表内容与上述类似 #}
    {% for item in archives %}
        <div class="article-item">
            <a href="{{ item.Link }}">
                <h4>{{ item.Title }}</h4>
                <p>{{ item.Description }}</p>
                <div class="article-meta">
                    <span>分类: {% categoryDetail with name="Title" id=item.CategoryId %}</span>
                    <span>发布于: {{ stampToDate(item.CreatedTime, "2006年01月02日") }}</span>
                </div>
            </a>
        </div>
    {% endfor %}
    {% empty %}
        <p>该分类下暂时没有文章。</p>
    {% endarchiveList %}

    {# 分页导航 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %}
            <ul>
                <li {% if pages.FirstPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a></li>
                {% if pages.PrevPage %}
                    <li><a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a></li>
                {% endif %}
                {% for pageItem in pages.Pages %}
                    <li {% if pageItem.IsCurrent %}class="active"{% endif %}><a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a></li>
                {% endfor %}
                {% if pages.NextPage %}
                    <li><a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a></li>
                {% endif %}
                <li {% if pages.LastPage.IsCurrent %}class="active"{% endif %}><a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a></li>
            </ul>
        {% endpagination %}
    </div>

Here, type="page"indicationsarchiveListGenerate pagination data, andpaginationThe tag is responsible for rendering pagination navigation links,show="5"indicating that up to 5 page number buttons are displayed. This ensures that the page performance and readability are maintained even if there are a large number of articles under the category.

**Practical Recommendations and Optimization**

In actual operation, the reasonable use of these tags can greatly improve the efficiency of content management and the user experience of the website. In addition to the above examples, you can also make use ofarchiveListOther parameters can be further refined, for example, by sorting by publish time (order="id desc"), by sorting by view count (order="views desc"), and by filtering by recommended attributes (flag="c"Indicates recommended articles) etc. Pay attention to the naming conventions and directory structure of the template files, AnQiCMS supports through{模型table}/list-{分类ID}.htmlIn this way, customized templates for specific categories are provided, which offers great convenience for personalized display.

Provided by AnQiCMSarchiveListThe label and its rich parameters provide strong support for website operators to build highly customized content display pages.By understanding and proficiently using these features, you can easily create a clear, rich, and user-friendly website experience according to the reader's needs.

Frequently Asked Questions (FAQ)

1. How to display lists of articles from multiple categories at the same time?

If you need to display articles from multiple specified categories on a page, you canarchiveListlabel'scategoryIdseparate multiple category IDs with commas in the parameter. For example,categoryId="1,5,8"Articles with category IDs 1, 5, and 8 will be displayed simultaneously.

2. How can you ensure that only the list of articles for a specific content model (such as articles or products) is displayed?

InarchiveListYou can filter through the tags.moduleIdParameters are used to specify the ID of the content model. For example,moduleId="1"It is usually used to display the content of the article model, whilemoduleId="2"it may be used to display the content of the product model. Make sure you usemoduleIdThe content type you want to display matches.

3. How to implement pagination of the article list?

To implement pagination of the article list, you need to in thearchiveListSet in the labeltype="page"parameters. Then, inarchiveListAfter the tag is closed, usepaginationTags to render pagination navigation.paginationThe tag acceptsshowParameters to control the number of pages displayed, for example{% pagination pages with show="5" %}.