How to call and display a document list in a template, and perform sorting and filtering?

Manage and display website content, especially document lists, in the AnQi CMS is a very common requirement in daily operations.The AutoCMS provides powerful and flexible template tags, allowing us to easily call and display these contents on the website front end, and sort and filter them as needed.This article will delve into how to use the template function of the Aiqi CMS to achieve these goals, making your website content more attractive.

Core Function:archiveListTag - the basic display of document content

To display the document list, we mainly use the Anqi CMS.archiveListThe tag is the core of calling document data, which can retrieve the documents you want to display according to various conditions.

The usage is usually as follows in template files (for example, list pages or home pages):

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            <p>{{ item.Description|truncatechars:100 }}</p>
            <div>
                <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>浏览量: {{ item.Views }}</span>
            </div>
        </a>
        {% if item.Thumb %}
            <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
        {% endif %}
    </li>
    {% empty %}
    <li>暂时没有文档内容。</li>
    {% endfor %}
{% endarchiveList %}

In this code,archiveListThe tag assigns the set of documents retrieved toarchivesthis variable. Next, we use{% for item in archives %}Loop through each document and processitem.Title/item.Link/item.Descriptionfields to display the title, link, and summary of the document.stampToDateis a very practical function, used to format timestamps into readable dates. If there is no documentation,{% empty %}the block will display the preset prompt information.

archiveListLabel supports a series of parameters, allowing you to precisely control which documents to display and how they are displayed:

  • moduleId：Specify the ID of the content model (for example, articles are usually 1, products may be 2), ensure you are calling the correct type of content.
  • categoryIdAccording to the category ID to filter documents, you can specify a single ID, or use commas to separate multiple IDs, or even usechild=trueorchild=falseto decide whether to include documents of subcategories.
  • limit：Control the number of documents displayed. For examplelimit="10"will display the most recent 10 documents. It also supportsoffsetpattern, such aslimit="2,10"Indicates to fetch 10 data items starting from the second one.
  • type：This is a very critical parameter, it defines the type of the list.
    • type="list"used for simple list display, affected bylimitParameter limit.
    • type="page"Used for lists that require pagination, must be used withpaginationUse the label.
    • type="related"Used to display related documents, usually on the document detail page.
  • order: Used to specify the sorting rules of the document.

Flexible control: Sorting the document list

AnQi CMS makes document sorting easy, byarchiveListTagsorderParameters, you can sort documents according to multiple dimensions.

  • Sorted by latest release: Useorder="id desc"The latest documents will be displayed at the top.
  • Sort by view count:order="views desc"Documents with the highest number of views will be displayed first, suitable for popular content recommendation.
  • Sorted according to custom sorting in the background.: If you have manually sorted the documents in the background,order="sort desc"It will display according to the order you customize.

For example, if you want to display the top five articles with the highest views under a certain category, you can write it like this:

{% archiveList hotArticles with categoryId="1" order="views desc" limit="5" %}
    <h4>热门文章</h4>
    <ul>
    {% for item in hotArticles %}
        <li><a href="{{ item.Link }}">{{ item.Title }} ({{ item.Views }}次浏览)</a></li>
    {% endfor %}
    </ul>
{% endarchiveList %}

Precise positioning: filtering of document list

Filtering is an indispensable part in content operation, Anqi CMS provides various filtering methods to help you present the most relevant content to users.

  1. Filter by categoryThis is the most basic filtering method. ThroughcategoryId="1"you can display all documents under the category with ID 1. If you want to include subcategories, you can add them additionallychild=true.

  2. Filter by recommended attributes：Security CMS allows you to set various recommended attributes for documents, such as "Headline", "Recommended", "Slide" and so on. Useflagparameters to call documents with these specific attributes, such asflag="h"调用头条文章，flag="c"调用推荐文章。

  3. 关键词搜索筛选：当您需要在列表页中加入搜索功能时，q参数非常有用。它会自动读取URL中的qQuery parameters as search keywords, match document titles. You can do this on the search page.archiveListOmitted in tagsqParameters, the system will automatically capture the search terms from the URL.

  4. Custom parameter filtering:archiveFilterstagsWhen your document model includes custom fields (such as "color", "size", "layout", etc.), and you want users to be able to filter by these custom fields,archiveFiltersThe tag is particularly powerful.

    It generates a list of selectable filter conditions, each with a corresponding link that can be clicked to trigger the filter.

    <div>
    <h5>筛选条件</h5>
    {% archiveFilters filters with moduleId="1" allText="不限" %}
        {% for item in filters %}
        <p>{{ item.Name }}:</p>
        <ul>
            {% for val in item.Items %}
            <li class="{% if val.IsCurrent %}active{% endif %}">
                <a href="{{ val.Link }}">{{ val.Label }}</a>
            </li>
            {% endfor %}
        </ul>
        {% endfor %}
    {% endarchiveFilters %}
</div>

    Here,filtersThe variable includes all selectable custom parameters and their options.item.NameIs the parameter name (such as “House type”),item.ItemsThe values under this parameter (such as “One-bedroom”, “Two-bedroom” etc.) are all optional.val.LinkThis provides a URL that filters when clicked.val.IsCurrentIt determines whether the current option is selected.

Smooth experience: Implement pagination for document lists

Pagination is an essential feature for websites with a large amount of content. The pagination implementation of Anqi CMS is very simple, you just need to cooperatearchiveListoftype="page"parameters withpaginationLabel it.

  1. SetarchiveListFor pagination modeto ensure thatarchiveListsetting in the labeltype="page"so that it can respond to pagination requests and return the current page of data.
  2. **Usepagination