How to display a document list on the AnQiCMS website based on a specific category ID?

In AnQiCMS, displaying a document list based on a specific category ID is a very basic and commonly used feature, which allows us to flexibly organize and present website content.AnQiCMS powerful template tag system makes this operation intuitive and efficient.No matter if you want to manually insert a category's documents at a specific position on the page or let the entire category page automatically display the documents under it, the system provides the corresponding solutions.

Use flexiblyarchiveListTag display of documents

One of the core strengths of AnQiCMS is its rich template tags. We mainly use them to display document lists according to category ID.archiveListThis tag. This tag allows you to highly customize the document type, number, sorting method, and most importantly—the category it comes from that needs to be displayed.

Basic usage: specify the category ID

In your AnQiCMS template file, such as on the homepage or a sidebar, you canarchiveListTag to specify the category ID that needs to be displayed. For example, if you have an ID of10The "News Updates" category, and if you want to list the documents under this category on the page, you can write the template code like this:

{% archiveList newsArchives with categoryId="10" limit="5" %}
    {% for item in newsArchives %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
        <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
    </li>
    {% empty %}
    <li>暂无新闻动态。</li>
    {% endfor %}
{% endarchiveList %}

In this code,categoryId="10"Explicitly tell AnQiCMS to only retrieve documents under the category with ID 10.limit="5"Then it limits the display to the latest 5 articles.newsArchivesis the variable name specified for the document list obtained, you can use it in subsequentforto iterate over this variable, by usingitem.LinkGet the document link,item.TitleGet the document title,item.CreatedTimeto get the publish time (and use)stampToDateto format it).{% empty %}Labels are used to display alternative content when the list is empty.

Extended usage: specify document model and more information

In addition to the category ID, you can also refine the filtering conditions further. For example, if you want to display documents under the "Product Model" category, you need to addmoduleIdParameters. You can also easily display more document information, such as thumbnails, summaries, and views:

{% archiveList productItems with categoryId="15" moduleId="2" limit="8" order="views desc" %}
    {% for item in productItems %}
    <div class="product-card">
        <a href="{{ item.Link }}">
            {% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}" />{% endif %}
            <h3>{{ item.Title }}</h3>
            <p>{{ item.Description|truncatechars:100 }}</p> {# 截取简介前100字 #}
            <span>浏览量: {{ item.Views }}</span>
        </a>
    </div>
    {% endfor %}
{% endarchiveList %}

Here,categoryId="15"Specify a category,moduleId="2"Represents the document of the product model,order="views desc"Sort the product by view count from high to low.item.ThumbUsed to display thumbnails.item.DescriptionDisplay the document summary and usetruncatecharsThe filter for truncation.

Handle the pagination list

When the number of documents under a category is large, pagination display is essential. To implement pagination, you need toarchiveListTagstypeparameter settings"page"and combine.paginationTags:

{% archiveList documents with categoryId="20" type="page" limit="10" %}
    {% for item in documents %}
    {# 展示文档详情,如标题、链接、简介等 #}
    <article>
        <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
        <p>{{ item.Description }}</p>
    </article>
    {% endfor %}
{% endarchiveList %}

{# 分页控制区域 #}
<div class="pagination-controls">
    {% pagination pages with show="5" %} {# 最多显示5个页码按钮 #}
        {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}">上一页</a>{% endif %}
        {% for pageItem in pages.Pages %}
            <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{ pageItem.Link }}">{{ pageItem.Name }}</a>
        {% endfor %}
        {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}">下一页</a>{% endif %}
    {% endpagination %}
</div>

Passtype="page",archiveListwill return the documents on the current page and pagination information.paginationThe label is responsible for rendering the "Previous pagepages.PagesIt is an array that contains all available page number information and can be displayed in a loop.

Implementing automated display using the classification template mechanism

AnQiCMS also provides a more automated way to handle the display of categorized document lists, which is especially convenient for websites with a large number of categories:Categorization template mechanism.

When you visit a category page, AnQiCMS will automatically search and apply the corresponding template file according to certain rules.One of the rules is to match based on the category ID and content model.

自动匹配模板:您可以在模板目录中创建形如{模型table}/list-{分类ID}.html的模板文件。例如,如果您的文章模型表格名为article,分类ID为10,那么您可以创建一个名为article/list-10.htmlThe template file. When accessing the article category page with ID of10, AnQiCMS will automatically load and use this template file.

Backend specified template:You can also edit each category in the AnQiCMS backend, manually specify a template file in the "Category Template" option. For example, you can specify the use ofcustom/my-category-list.htmlAs its document list template. This way, you can design completely independent layouts and styles for different categories without repeating the code in each template.archiveListTagscategoryIdParameters. In these custom category templates,archiveListtags usually do not need to be specifiedcategoryId, as it will automatically recognize the current category ID.

Example:article/list-10.htmltemplate content

assuming you have already createdarticle/list-10.htmlThis template file, its content can be written like this:

<h1>{{ categoryDetail with name="Title" }}</h1> {# 显示当前分类标题 #}
<p>{{ categoryDetail with name="Description" }}</p> {# 显示当前分类描述 #}

<div class="document-list">
    {% archiveList categoryDocuments with type="page" limit="10" %} {# 自动获取当前分类ID下的文档 #}
        {% for item in categoryDocuments %}
        <article>
            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <time datetime="{{ stampToDate(item.CreatedTime, "2006-01-02T15:04:05Z07:00") }}">{{ stampToDate(item.CreatedTime, "2006年01月02日") }}</time>
            <p>{{ item.Description|truncatechars:150 }}</p>
        </article>
        {% endfor %}
    {% endarchiveList %}

    <div class="pagination-area">
        {% pagination pages with show="5" %}
            {# 分页代码同上 #}
        {% endpagination %}
    </div>
</div>

in thislist-10.htmltemplate,archiveListThe tag is not explicitly writtencategoryId="10"It will intelligently identify the category ID of the current page, thus automatically displaying the documents under this category. This method greatly improves the maintainability and reusability of the template.

In summary, whether it is to specify accurately in any templatecategoryIdIt is still simple and efficient to display the document list under a specific category ID using AnQiCMS's intelligent classification template mechanism.Understand and master these methods, which will help you better manage and present your website content.


Common Questions (FAQ)

1. Why is pagination not displayed in my document list?If pagination is not displayed in your document list, please checkarchiveListLabel has been set?type="page"Parameter. Only when thetypeset"page",archiveListlabel is set will the page data be generated. At the same time, you also need to inarchiveListtags