How to efficiently display the AnQiCMS article list and support multiple sorting, filtering, and pagination methods?

Efficiently display article lists in AnQiCMS, supporting various sorting, filtering, and pagination methods, which is the core link of content management.Understanding the flexible application of template tags can help you build highly customized and user-friendly content display pages.

To achieve this goal, we mainly rely on the powerful template tag system of AnQiCMS, especially the core ofarchiveListTag, along withpaginationTagas well as various auxiliary filters and logical controls.

I. Core:archiveListThe use of tags

archiveListTags are the basis for obtaining and displaying a list of articles (or other content models). It acts like a data query, able to extract articles from the database based on the conditions you set.

In the template, you can use it like this:

{% archiveList archives with type="list" limit="10" %}
    {# 在这里循环展示每篇文章的详细信息 #}
{% endarchiveList %}

Here, archivesIt is a variable name you define to store the list of articles retrieved.type="list"Represents that we are getting a fixed number of article lists.limit="10"limits it to only displaying the latest 10 articles.

In{% for item in archives %}In such a loop,itemthe variable will contain various information about each article, such asitem.Title(Title),item.Link(Link),item.Description(Summary),item.Views(Views) anditem.CreatedTime(Publish time) and others. These fields can be flexibly used to build the display content of the list.

II. Implementing the flexible display of article lists.

It is not enough to display a fixed number of articles, we need to be able to sort and filter articles according to user needs or operational strategies.

1. Smart Sorting

archiveListTags providedorderParameters, allowing you to easily control the order of articles.

• Sorted by publication time:By default, articles are usually sorted in descending order by ID (i.e., the most recently published), and you can explicitly specifyorder="id desc".
• Sort by page views:If you want to display popular articles, you can set it to:order="views desc".
• Sort by custom backend:Some content may require manual sorting, AnQiCMS supportsorder="sort desc".

For example, to display the top 10 articles with the highest views:

{% archiveList archives with type="list" limit="10" order="views desc" %}
    {# 循环展示文章 #}
{% endarchiveList %}

2. Rich filtering options

The filtering feature is the key to personalized content display. AnQiCMS provides various filtering methods.

• Filtering based on categories and attributes:You can usecategoryIdParameters to display articles under specific categories, for examplecategoryId="1"If an article is assigned a recommended attribute (such as headline[h], recommendation[c], etc.), it can be filtered throughflag="c"parameters. If you wish to exclude certain categories or attributes, you can also useexcludeCategoryIdandexcludeFlagParameter.

  For example, display the article model (moduleId="1") under, all recommended articles in the category with ID 5:

  {% archiveList articles with moduleId="1" categoryId="5" flag="c" type="list" %}
      {# 循环展示推荐文章 #}
  {% endarchiveList %}
  

• Full-text search filter:For the search keywords entered by the user,archiveListofqParameters can be useful. Usually, the search page will pass the user's input keywords through URL parametersqPass,archiveListIt will automatically capture and match according to the article title.

  For example, the search results page:

  {% archiveList searchResults with type="page" q=urlParams.q %}
      {# 循环展示搜索结果 #}
  {% endarchiveList %}
  

  (urlParams.qwill automatically obtain the URL in?q=关键词of关键词part)

• Advanced custom parameter filtering:AnQiCMS one of the most powerful filtering features is to support filtering based on custom fields of the content model.This is very useful for building vertical domain websites (such as real estate, recruitment, goods)You can add custom fields such as 'house type', 'salary range', 'brand', etc. to the content model in the background and set them as filterable.

  To implement this filtering, we need to usearchiveFiltersTag to generate filtering conditions, thenarchiveListWill automatically respond to these conditions.archiveFiltersThe label will return a list containing each filtering dimension and its optional values, and it will automatically mark the selected filter options based on the current URL parameters.

  For example, on a real estate website, you can filter by 'type' and 'area':

  {# 生成筛选条件 #}
  {% archiveFilters filters with moduleId="1" allText="不限" %}
      {% for item in filters %}
      <div>
          <span>{{item.Name}}: </span>
          {% for val in item.Items %}
          <a href="{{val.Link}}" class="{% if val.IsCurrent %}active{% endif %}">{{val.Label}}</a>
          {% endfor %}
      </div>
      {% endfor %}
  {% endarchiveFilters %}
  
  {# 结合筛选条件展示文章列表，archiveList会自动识别URL中的筛选参数 #}
  {% archiveList properties with type="page" moduleId="1" %}
      {# 循环展示房产列表 #}
  {% endarchiveList %}
  

  When the user clicks on the filter conditions, the URL will automatically carry the corresponding parameters (such as?huxing=三室一厅&quyu=朝阳区)archiveListWill dynamically adjust the query results based on these parameters.

Third, precise control of pagination display

For websites with a large number of articles, pagination is an essential feature.AnQiCMS decouples the retrieval of article list data and the generation of pagination links, providing a clear implementation path.

To enable pagination, first inarchiveListput in the tag.typethe parameter to"page":

{% archiveList articles with type="page" limit="10" %}
    {# 循环展示当前页的文章 #}
{% endarchiveList %}

limit="10"Here it indicates that 10 articles are displayed per page.

Next, usingpaginationTagRender pagination links:

{% pagination pages with show="5" %}
    <a href="{{pages.FirstPage.Link}}">首页</a>
    {% if pages.PrevPage %}
    <a href="{{pages.PrevPage.Link}}">上一页</a>
    {% endif %}
    {% for item in pages.Pages %}
    <a href="{{item.Link}}" class="{% if item.IsCurrent %}active{% endif %}">{{item.Name}}</a>
    {% endfor %}
    {% if pages.NextPage %}
    <a href="{{pages.NextPage.Link}}">下一页</a>
    {% endif %}
    <a href="{{pages.LastPage.Link}}">末页</a>
{% endpagination %}

paginationThe tag will generate apagesAn object that includes the current page, total number of pages, first page, last page, previous page, next page, and a list of middle page numbers.show="5"The parameter controls the maximum number of middle page links displayed. By loopingpages.Pagesyou can build common pagination navigation.

IV. Combine other tags to enhance the dimension of list information

To make the article list more abundant and practical, we often need to integrate other information.

• Display the article classification information:In the article list, in addition to the article title, it is usually necessary to display its category. Althoughitem.CategoryIdThe category ID is provided, but to obtain the category name and link, you can usecategoryDetailTag:

  <span>所属分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
  

• Format the date and time:The publication time of an article is usually in timestamp format, for easy reading, you can use:stampToDateFilterFormat:

  <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
  

  The "2006-01-02" is the Go language date formatting standard, representing "year-month-day".

• Display article tags:If the article is associated with tags, you can usetagListTagto retrieve and display:

  {% tagList tags with itemId=item.Id %}
      {% for tag in tags %}
      <a href="{{tag.Link}}">{{tag.Title}}</a>
      {% endfor %}
  {% endtagList %}
  

• Access custom fields:When the content model defines additional custom fields, you can access througharchiveParamslabel or directly through `item.custom_field_name