How to retrieve and display a list of articles or products in a loop?

Build a vibrant website in AnQiCMS, the display of the content list is an indispensable part.Whether it is to display the latest published articles, hot products, or content under specific categories, AnQiCMS's powerful template engine can help us easily achieve it.This article will delve into how to retrieve and loop through lists of articles or products in AnQiCMS, helping you flexibly build diverse content display pages.

Understanding the content list mechanism of AnQiCMS

AnQiCMS uses a template engine syntax similar to Django, making content display intuitive and easy to master.In AnQiCMS, articles and products are considered a type of content, and they share a flexible content model system.This means that we can use a unified way to retrieve and display lists of different types of content.

The core template tags are the entry points for operating content, which are usually in the form of{% tag %}and the variables to be output are enclosed in{{ variable }}. For displaying content in a loop,forLoop tags are our powerful assistants.

Get the list of articles or products: core tagsarchiveList

To get the list of articles or products,archiveListTags are your preference. This tag is very flexible and can filter, sort, and limit content according to your needs.

UsearchiveListWhen labeling, it is usually specified a variable name to store the list of obtained content, for examplearchivesorproducts. The basic structure is as follows:

{% archiveList archives with moduleId="1" limit="5" %}
    {% for item in archives %}
        {# 在这里展示每个内容项的详细信息 #}
    {% endfor %}
{% endarchiveList %}

Next, we will learn in detail.archiveListSome common parameters, which are the key to custom content lists:

1. moduleId: Specify the content model.AnQiCMS supports custom content models, common ones include article models (usuallymoduleId="1"), and product models (usuallymoduleId="2"By this parameter, you can specify the type of content you want to retrieve.

   • For example, to retrieve a list of articles:moduleId="1"
   • For example, to retrieve a list of products:moduleId="2"

2. categoryId: Filter by specific categoryIf you only want to display content under a specific or some specific categories, you can usecategoryId. You can pass the ID of a single category, or multiple IDs separated by commas.

   • For example, get the articles of category ID 10:categoryId="10"
   • For example, get the products of category IDs 10, 12, 15:categoryId="10,12,15"
   • If you want it not to automatically read the current page category ID, but to get the entire site content, it can be set tocategoryId="0".

3. limit:Control the number of items displayed or the pagination range limitThe parameter is used to limit the number of displayed content. It has two working modes:

   • Limit the number:limit="5"It will only display the first 5 items.
   • Offset mode:limit="2,10"Start from the second item and get the next 10 items (often used in the scenario of 'start displaying from...').

4. order: Specify the sorting methodThe order of content display is very important.orderParameters allow you to sort based on multiple conditions:

   • id desc: Sort by content ID in descending order (the most recently published content first).
   • views desc: Sort by view count in descending order (popular content first).
   • sort desc: Sort in reverse order according to the custom sorting field set in the background.

5. typeList type determines the function: typeParameters define the purpose of the list, which affects the way other parameters take effect:

   • type="list"Default mode, only display:limitContent specified in a certain quantity, without pagination.
   • type="page": Combined pagination mode,paginationtags can realize the complete page turning function.
   • type="related": Related content mode, usually used on detail pages, automatically finds other content related to the current content.

6. flag: Filter recommended attributesWhen publishing content in the background, you can set various recommendation attributes for the content (such as头条[h], 推荐[c], 幻灯[f], etc.). ByflagParameters, you can only display content with specific attributes.

   • For example, only display articles with the "recommended" attribute:flag="c"
   • You can also useexcludeFlagto exclude content with specific attributes.

7. q: Search keywordsWhentype="page"then,qThe parameter can be used to search for content titles that contain specific keywords. If you include the parameter in the URL?q=关键词AnQiCMS will also automatically read and apply the search.

Loop traversal and data access

Once usedarchiveListGet the content list, and you can go through{% for item in archives %}such a structure to access each item in the list one by one. Inside the loop,itemThis is the current content object, you can access various properties such as:

• {{ item.Id }}: Content ID
• {{ item.Title }}: Content Title
• {{ item.Link }}: Content Link
• {{ item.Description }}: Content Summary/Description
• {{ item.Thumb }}Content thumbnail
• {{ item.Logo }}Content cover large image
• {{ item.Views }}Content views
• {{ stampToDate(item.CreatedTime, "2006-01-02") }}Formatted publish time(stampToDateis a date formatting label,"2006-01-02"Is the time formatting standard of Go language

Example: Display the latest article title and link

<div class="latest-articles">
    <h3>最新文章</h3>
    <ul>
        {% archiveList articles with moduleId="1" order="id desc" limit="5" %}
            {% for item in articles %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% empty %}
                <li>暂无文章</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

Implement pagination function:paginationTag

For lists with a large amount of content, pagination is the key to improving user experience. WhenarchiveListlabel'stypethe parameter to"page"It will cooperate when,paginationLabels work together to implement a complete pagination navigation.

paginationHow to use labels:

{% pagination pages with show="5" %}
    {# 在这里组织分页链接，例如上一页、下一页、页码等 #}
{% endpagination %}

paginationThe label will create onepagesAn object that contains rich pagination information:

• pages.TotalItemsTotal number of contents:
• pages.TotalPagesTotal number of pages:
• `pages.Current