How to implement the document list page of AnQi CMS to filter and display pages according to the specified category ID?

In Anqi CMS, it is crucial to manage and display a large amount of content, especially when it is necessary to organize it by specific categories and display it with pagination.The AnQi CMS, with its flexible template engine, allows content operators to easily meet these requirements, providing users with a clear and efficient browsing experience.

Why is it necessary to filter and display pages by category?

Imagine a website with hundreds or even thousands of documents. If all the content is piled onto one page, users will feel overwhelmed and the website loading speed will be affected.By filtering by category, we can help users quickly locate the content areas they are interested in; pagination can effectively control the amount of content on a single page, improve loading speed, and guide users to browse more content step by step.This not only optimizes the user experience, but also greatly benefits search engine optimization (SEO), helping to improve the crawling efficiency and weight distribution of the website.

Core tags and mechanisms of AnQi CMS

The AnQi CMS template system has adopted the syntax of the Django template engine, using{{变量}}to output data,{% 标签 %}Performing logical control. The following core tags are mainly used for filtering and pagination of document lists:

  1. archiveListTagThis is the core tag for getting the document list.It allows us to filter documents based on various conditions (such as category ID, model ID, recommendation attributes, etc.) and set the type of the returned list (whether it is a normal list or a list prepared for pagination).
  2. paginationTag: Used specifically to generate pagination navigation tags. It will be based onarchiveListLabel-generated pagination data, constructing "Previous page
  3. categoryDetailTagThis tag helps us get the properties of the specified or current category when it is necessary to display detailed information such as category names, links, etc.

Understand the functions and usage of these tags, which is the foundation for building flexible document list pages.

Practice: Filter and paginate the document list according to the specified category ID.

Next, we will demonstrate how to implement filtering and pagination of document lists based on a specified category ID through specific steps and code examples.

Step 1: Determine the location of the template file

Firstly, you need to specify which template file your document list page will use. According to the template conventions of Anqi CMS (refer todesign-director.md), the template file for the document list page is usually located at:

  • {模型table}/list.htmlThis is the universal list page under the model category.
  • {模型table}/list-{文档分类ID}.htmlThis is a customized list page for a specific category.

For example, if you want to create a list page for the article model (assuming the model table isarticleBelow ID is10Create a dedicated list page for the category, you cantemplate/default/article/Create a file namedlist-10.htmlfile. If you just want to create a universal list page for all articles, then uselist.html. For the sake of universality of the example, we assume that it is inarticle/list.htmloperating.

Second step: usearchiveListLabel to get document list

In your list template file, usearchiveListtags to get the documents that need to be displayed. Here are some key parameters:

  • type="page":This is the key instruction to implement pagination display.It tells AnQi CMS not only to return document data but also to prepare all the necessary information for pagination.
  • categoryId="X": Used to specify the category ID you want to filter. For example,categoryId="10"Only documents under the category with ID 10 will be displayed. If you want to dynamically obtain the current category ID on the current category page (for example, by clicking on the navigation entry category list page), it is usually not necessary to set it explicitlycategoryId,archiveListAttempts to automatically read the category ID of the current page. If you need to specify manually or obtain it from elsewhere, for example, when looping through categories, you can set it tocategoryId=item.Id.
  • moduleId="Y"Make sure we are getting the correct document under the content model. For example, the article model.moduleIdIt is usually1, the product model could be2You can view the specific ID through the "Content Model" management interface on the back end.
  • limit="10"Set the number of documents to display per page.
{% archiveList archives with type="page" categoryId="10" moduleId="1" limit="10" %}
    {# 文档列表内容将在这里循环展示 #}
{% endarchiveList %}

In the above code,archivesis a variable that contains the document array filtered by specified conditions.

Third step: Loop to display the document content.

obtaining toarchivesAfter the array, you need to useforTo loop through and display the details of each document.

Inside the loop,itemThe variable represents the current document object, you can accessitem.Title/item.Link/item.Descriptionproperties to get various data of the document.

{% archiveList archives with type="page" categoryId="10" moduleId="1" limit="10" %}
    {% for item in archives %}
        <div class="document-item">
            <a href="{{item.Link}}">
                <h3 class="document-title">{{item.Title}}</h3>
                {% if item.Thumb %}<img src="{{item.Thumb}}" alt="{{item.Title}}" class="document-thumb">{% endif %}
                <p class="document-description">{{item.Description}}</p>
            </a>
            <div class="document-meta">
                {# 获取文档所属分类的名称和链接 #}
                <span>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
                <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>浏览量：{{item.Views}}</span>
            </div>
        </div>
    {% empty %}
        <p class="no-content-message">当前分类下暂无文档。</p>
    {% endfor %}
{% endarchiveList %}

Please note{% empty %}a block whenarchivesWhen the list is empty, it will display a custom no-content message instead of a blank space.stampToDateThe filter is used to format timestamps into readable dates.

Step four: Integrate page navigation (pagination)

InarchiveListlabel'sendarchiveListAfter that, usepaginationtags to generate pagination navigation.paginationTags will automatically associate with the nearesttype="page"ofarchiveListGenerated pagination data.

paginationCommon parameters for tags areshowIt determines how many page number numbers are displayed in the page navigation.

”`twig {% archiveList archives with type=“page” categoryId=“10” moduleId=“1” limit=“10” %}

{# 文档列表内容如上所示 #}
{% for item in archives %}
    <div class="document-item">
        {# ... 文档内容 ... #}
    </div>
{% empty %}
    <p class="no-content-message">当前分类下暂无文档。</p>
{% endfor %}

{% endarchiveList %}

{% pagination pages with show="5" %}
    <ul class="pagination-list">
        {# 首页链接 #}
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        </li>
        {# 上一页链接 #}
        {% if pages.PrevPage %}
        <li class="page-item">
            <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        </li>
        {% endif %}
        {# 中间页码链接 #}
        {% for page_item in pages.Pages %}
        <li class="page-item {% if page_item.IsCurrent %}active{% endif %}">
            <a href="{{page_item.Link}}">{{page_item.Name}}</a>
        </li>
        {% endfor %}
        {# 下