How to efficiently display articles or product lists in a content management system and provide users with a smooth pagination experience is a common concern for website operators.AnQiCMS is a system developed based on the Go language, which makes everything intuitive and efficient through its flexible and powerful template tag system.Next, we will discuss how to take advantage of the built-in features of AnQiCMS to easily implement the list display and pagination function of articles or products.

Start the journey of content list:archiveListTag

AnQiCMS provides powerful features for usarchiveListThe tag is the core to obtain a list of website articles, products, and other custom content models. Whether you want to display the latest blog posts, popular products, or content under specific categories, archiveListCan easily handle.

While usingarchiveListWhen labeling, there are several key parameters that we need to pay attention to:

  • moduleId: distinguishes content typesAnQiCMS supports creating various content models, such as article models and product models. When you call the list, throughmoduleIdParameters to specify the type of content you want to obtain. Generally, the article model ismoduleIdIs"1", the product model is"2", and the custom model will have corresponding IDs.
  • categoryId: Precise classification positioningIf you want to display content from a specific category, you can usecategoryIdthe parameters. For example,categoryId="10"It will only list the content under the category with ID 10. It even supports passing multiple category IDs separated by commas, for examplecategoryId="10,12,15"If not specified, the system will try to read the current page's category ID to display.
  • limit: Controls the number of items per pageThis parameter is used to control how many items are displayed per page. For example,limit="10"means that the maximum number of items per page is 10.
  • order: Defines the sorting ruleYou can define the sorting method of the content according to your needs. Common ones include sorting by publish time in reverse order (order="id desc"）、in reverse order by views（order="views desc"）、or sorted by backend custom sorting（order="sort desc") and so on.
  • type="page"：The key to pagination functionThis is to implement pagination functionKeyParameter. When you willtypethe parameter to"page"At this time, AnQiCMS will inform the system to prepare all the data required for pagination of this list, laying the groundwork for subsequent pagination navigation. If you only want to obtain a fixed number of lists without pagination, you can set it to"list".

A simple article list call might look like this:

{# 假设我们想获取文章模型（moduleId="1"）下最新发布的10篇文章 #}
<div>
{% archiveList archives with moduleId="1" order="id desc" limit="10" %}
    {% for item in archives %}
    <article>
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description}}</p>
        <footer>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量：{{item.Views}}</span>
        </footer>
    </article>
    {% empty %}
    <p>暂时没有内容可供展示。</p>
    {% endfor %}
{% endarchiveList %}
</div>

In this example,archivesIs the variable name we define, which will contain all items that meet the conditions.forThe loop will iterate over these items and useitem.Title/item.LinkSpecific information is displayed in these fields.stampToDateIt is a very practical label that helps us format timestamps into the date style we want.

Brings life to the list:paginationTags implement pagination

OncearchiveListTag throughtype="page"The parameters are ready with pagination data,paginationThe tags can perfectly pass the baton, creating user-friendly pagination navigation for our content list.

paginationThe label will receive an object containing all pagination information, which we can use to build 'Home', 'Previous Page', 'Next Page', 'Last Page', and the middle page number links.

  • show: Control the number of pagesThis parameter determines the number of page numbers visible in the pagination navigation. For example,show="5"It will display up to 5 page number links around the current page number, making the pagination bar look more concise.

A complete content list that includes pagination features is usually combinedarchiveListandpaginationwith tags:

{# 假设我们正在文章列表页，希望分页显示文章，每页10条 #}
<div>
{% archiveList articles with moduleId="1" type="page" order="id desc" limit="10" %}
    {# 文章列表部分 #}
    {% for item in articles %}
    <article>
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description}}</p>
        <footer>
            <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量：{{item.Views}}</span>
        </footer>
    </article>
    {% empty %}
    <p>暂时没有内容可供展示。</p>
    {% endfor %}

    {# 分页导航部分 #}
    <div class="pagination-nav">
        {% pagination pages with show="5" %}
            {# 首页链接 #}
            <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            {# 上一页链接 #}
            {% if pages.PrevPage %}
            <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
            {% endif %}
            {# 中间页码链接 #}
            {% for item in pages.Pages %}
            <a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
            {% endfor %}
            {# 下一页链接 #}
            {% if pages.NextPage %}
            <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
            {% endif %}
            {# 末页链接 #}
            <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
            <span class="page-info">当前第 {{pages.CurrentPage}} / {{pages.TotalPages}} 页，共 {{pages.TotalItems}} 条</span>
        {% endpagination %}
    </div>
{% endarchiveList %}
</div>

here,pagesIs an object that contains all pagination information, it providesFirstPage(Home page),PrevPage(Previous page),Pages(Middle page number array),NextPage(Next page) andLastPage(End page) and other practical attributes. Each attribute also includesLink(link address) andIsCurrent(Whether the current page) and other sub-properties, allowing us to flexibly build pagination navigation styles and logic.

More accurate list control: filtering and searching

AnQiCMS also allows us to perform more refined filtering and searching of the list.

  • q: Integrated search functionInarchiveListis usedqParameters can enable search functionality. For example,q="AnQiCMS"It will only display articles with the title containing "AnQiCMS".If you want users to submit keywords through a search box, it is usually combined with an HTML form and the search keywords are passed as query parameters in the URL. AnQiCMS will automatically recognize and apply it.
    
<form method="get" action="/search"> {# 假设搜索结果页面的URL是/search #}
    <input type="text" name="q" placeholder="请输入搜索关键词" value="{{urlParams.q}}">
    <button type="submit">搜索</button>
</form>
    here,urlParams.qCan help us retain the user's last search term.
  • flag: Filter by recommended propertiesWhen editing articles or products in the background, we can set properties such as "Headline", "Recommended", "Slider", etc. (Flag). ThroughflagParameters can easily filter out this special content. For example,flag="c"will display all content marked as "recommended".
  • excludeCategoryId: Exclude specific categoriesIf you want to exclude the subcategories or specific category content in a category list page, you can useexcludeCategoryId.
  • Custom model field filteringFor fields that are customized in the background content model, if they are set to be filterable, they can also be filtered by adding query parameters to the URL, for example?color=redThese can usually be combinedarchiveFiltersTags generate dynamic filtering conditions on the front end

Practical tips

  • Template syntax: