How can AnQi CMS display a list of documents under a specified category and perform pagination?

AnQiCMS (AnQiCMS) with its flexible template mechanism and powerful content management features, makes the display of website content very simple and efficient.For many websites, clearly displaying content by category and providing convenient pagination navigation is the key to improving user experience and optimizing search engine rankings.Next, let's learn how to easily implement document list display and pagination functionality under specified categories in Anqi CMS.

Flexible configuration, control content display

The AnQi CMS template system uses syntax similar to the Django template engine, making content calls intuitive and powerful. To display a document list under a specified category and perform pagination, several core template tags are mainly used:archiveListUsed to obtain the document list data,categoryDetailUsed to obtain the details of the current category, as well,paginationUsed to generate pagination navigation. They work together to make the display and browsing of dynamic content easy.

Firstly, we need to find or create the corresponding category list template file in the current topic template folder. Usually, these files are located in/template/{你的模板名称}/{内容模型表名}/list.htmlFor example, if it is an article list, it might bearticle/list.html. If you want to set a unique layout for a specific category, you can also createlist-{分类ID}.htmlsuch naming format, for examplearticle/list-10.htmlThe system will automatically recognize and apply.

In the list page template, we first need to obtain some basic information about the current category, such as the category name and description, which is very important for the page's SEO and user understanding. You can usecategoryDetailLabel to complete this task:

{# 获取当前分类的详细信息，用于页面标题、描述等 #}
<h1 class="category-title">{% categoryDetail with name="Title" %}</h1>
<p class="category-description">{% categoryDetail with name="Description" %}</p>

This code will directly output the category title and description of the current page, no need to specify the ID, the system will automatically detect. If you need to get the category information of a specific ID, you can also do so byid="你的分类ID"parameter.

Dynamically retrieve document list

The core part is next——Retrieve document lists under specified categories. Anqicms providesarchiveListThe tag allows you to filter documents based on various conditions. To implement pagination, we need totypethe parameter to"page".

Assuming we want to display 10 articles per page on the category page, the template code can be written like this:

<div class="document-list">
    {# 使用 archiveList 标签获取指定分类下的文档列表，并开启分页功能 #}
    {# categoryId="0" 表示不指定分类ID，系统会自动获取当前页面的分类ID #}
    {# type="page" 开启分页，limit="10" 设置每页显示10条文档 #}
    {% archiveList archives with type="page" limit="10" %}
        {% for item in archives %}
        <article class="document-item">
            {# 检查文档是否有缩略图，并显示 #}
            {% if item.Thumb %}
            <a href="{{item.Link}}" class="document-thumb">
                <img src="{{item.Thumb}}" alt="{{item.Title}}">
            </a>
            {% endif %}
            <div class="document-info">
                <h2 class="document-title"><a href="{{item.Link}}">{{item.Title}}</a></h2>
                <p class="document-description">{{item.Description}}</p>
                <div class="document-meta">
                    {# 使用 stampToDate 格式化发布日期 #}
                    <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    <span>浏览量: {{item.Views}}</span>
                </div>
            </div>
        </article>
        {% empty %}
        {# 如果当前分类下没有文档，显示提示信息 #}
        <p class="no-content">当前分类下暂无文档。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

in thisarchiveListtags:

  • archivesIt is a variable name we define, which will contain the document list data obtained.
  • type="page"Tell the system that we need a pagination mode list, sopaginationthe tag can work properly.
  • limit="10"then specifies that 10 documents are displayed per page.
  • categoryId="0"Here is a tip, it means that we do not need to explicitly specify the category ID, the system will intelligently recognize the category according to the current page URL. Of course, you can also manually specify one or more category IDs if needed, for examplecategoryId="1,2,3".
  • {% for item in archives %}Loop through the document list,itemThe variable contains the details of each document, such asitem.Title(Title),item.Link(Link),item.Description(Summary),item.Thumb(thumbnail),item.CreatedTime(Publishing time) anditem.Views(Views) and so on.
  • {% empty %}IsforA practical feature of the loop, whenarchivesIf the list is empty, it will display{% empty %}and{% endfor %}between the content, to avoid page blank.
  • stampToDateThe filter is used to format timestamps into readable date strings,"2006-01-02"It is a special date formatting reference value in the Go language.

Build elegant pagination navigation

We need to provide users with convenient pagination navigation as well.paginationTags are the tools that enable this function, they will automatically generate links for 'Home', 'Previous Page', 'Next Page', and the middle page numbers.

Add the following code toarchiveListAfter the label, you can see the pagination navigation:

`twig