How can thumbnails, descriptions, and custom fields be displayed on the document list page?

In website operation, the content list page is the key link for users to obtain information and decide whether to delve deeper into browsing.An information-rich, well-structured list page that can greatly enhance user experience and content appeal.To achieve this goal, it is particularly important to reasonably display thumbnails, descriptions, and custom fields in the document list page of the AnQi CMS.

Through the powerful and flexible template tag system provided by AnQi CMS, you can easily meet this requirement without complex programming knowledge, just by making simple modifications and configurations to the template file.

Basic Preparation: Customization and Filling of the Content Model

Before starting to modify the template, make sure that your content is correctly configured and filled in the background. Thumbnails, descriptions, and custom fields must be set when publishing or editing the document.

  1. Thumbnail

  2. Description

  3. Custom fields： English CMS's flexible content model is one of its core strengths.In the 'Content Management' -> 'Content Model', you can add dedicated custom fields for different content types (such as articles, products) according to your business needs.For example, you can add fields such as 'price', 'brand', 'stock' to the product model, or add fields such as 'author', 'source', 'publish date' to the article model.These custom fields will be displayed in the "Other Parameters" area during document editing, waiting for you to fill in.Please make sure that you have defined and filled in these fields according to your actual needs. They are an important source of rich information display on the list page.

Core Implementation: Document List TagsarchiveListapplication

To display the above information on the document list page (such as article list page or product list page), we mainly rely on the Anqi CMSarchiveListTemplate tags. This tag is the core of data retrieval and output, it can obtain document data from the database and make it available for the template to use.

Generally, the template files for list pages are locatedtemplate/{您的模板目录}/{模型table}/list.html。You need to use these files in EnglisharchiveListtags to loop through and display each document.

The following is the code structure for displaying thumbnails, descriptions, and custom fields:

{# 假设这是您的文档列表页面模板 #}
<div class="document-list">
    {% archiveList archives with type="page" limit="10" %}
        {% for item in archives %}
            <div class="document-item">
                <a href="{{ item.Link }}" class="document-link">
                    {# 1. 展示缩略图 #}
                    <div class="document-thumb">
                        {% if item.Thumb %}
                            <img src="{{ item.Thumb }}" alt="{{ item.Title }}" loading="lazy">
                        {% else %}
                            {# 如果没有缩略图，可以显示一个默认图片或占位符 #}
                            <img src="{{ system.TemplateUrl }}/images/default-thumb.jpg" alt="{{ item.Title }}" loading="lazy">
                        {% endif %}
                    </div>

                    <div class="document-info">
                        <h2 class="document-title">{{ item.Title }}</h2>

                        {# 2. 展示描述 #}
                        {% if item.Description %}
                            <p class="document-description">{{ item.Description|truncatechars:150 }}</p> {# 截取前150个字符并添加省略号 #}
                        {% endif %}

                        {# 3. 展示自定义字段 #}
                        <div class="document-meta">
                            {% archiveParams params with id=item.Id %}
                                {% for param in params %}
                                    {# 假设您自定义了"作者"和"产品型号"字段 #}
                                    {% if param.FieldName == "author" %}
                                        <span class="meta-item">作者：{{ param.Value }}</span>
                                    {% elif param.FieldName == "productModel" %}
                                        <span class="meta-item">型号：{{ param.Value }}</span>
                                    {% elif param.FieldName == "someRichText" %}
                                        {# 如果是富文本字段，需要使用 |safe 过滤器确保HTML正确渲染 #}
                                        <div class="meta-item-richtext">{{ param.Value|safe }}</div>
                                    {% endif %}
                                    {# 您可以根据实际定义的自定义字段FieldName，添加更多的条件判断和展示逻辑 #}
                                {% endfor %}
                            {% endarchiveParams %}
                        </div>
                    </div>
                </a>
            </div>
        {% empty %}
            <p>目前没有可显示的文档。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 如果您使用了 type="page" 进行分页，别忘了添加分页代码 #}
    {% pagination pages with show="5" %}
        {# 分页导航 HTML 代码 #}
    {% endpagination %}
</div>

代码解析与要点：

  • {% archiveList archives with type="page" limit="10" %}: 这是获取文档列表的核心标签。
    • archives是一个变量名，用于存储获取到的文档列表数据。
    • type="page"表示启用分页功能，以便配合paginationLabel.
    • limit="10"Set the display of 10 documents per page.
  • {% for item in archives %}: Loop througharchiveseach document in the list,itemrepresenting the current document object in the loop.
  • Thumbnail (item.Thumb):{{ item.Thumb }}Directly output the thumbnail URL of the document. To optimize the user experience, we added aloading="lazy"property to enable lazy loading of images, improving page loading speed. At the same time,{% if item.Thumb %}Check if there is a thumbnail