How to display thumbnails, descriptions, and custom fields on the document list page?

In website operation, the content list page is a key link for users to obtain information and decide whether to delve deeper into browsing.A rich information, clear layout list page, which can greatly enhance user experience and content attractiveness.It is particularly important to display thumbnails, descriptions, and custom fields reasonably in the document list page of Anqi CMS to achieve this goal.

By using 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 files.

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. ThumbnailIn the document publication or editing page of AnQi CMS, you will see an area named "Document Image".This is where you set the document thumbnail. You can upload a carefully selected image as a thumbnail.It is worth mentioning that even if you do not manually upload, if the document content contains images, the system will intelligently extract the first image as a thumbnail to ensure the visual integrity of the list page.

2. descriptionThe "Document Summary" column is used to enter the abstract or overview of the document.A concise, attractive description can effectively stimulate users' desire to click.Even if you choose to leave it blank, AnQi CMS will automatically extract the first part of the document text as a summary.However, we usually recommend writing manually to better control the expression of information, highlighting key selling points or content highlights.

3. Custom fieldThe flexible content model of AnQi CMS is one of its core advantages.In the "Content Management" -> "Content Model", you can add exclusive 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', 'inventory', etc. 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, as they are an important source of rich information display on the list page.

Core Implementation: Document List TagarchiveListapplication

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 CMS.archiveListTemplate tag. This tag is the core of data retrieval and output, it can obtain document data from the database and provide it for the template.

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

The following is the code structure for implementing thumbnails, descriptions, and custom field display.

{# 假设这是您的文档列表页面模板 #}
<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>

Code parsing and key points:

• {% archiveList archives with type="page" limit="10" %}This is the core tag for retrieving document lists.
  • archivesIt is a variable name used to store the retrieved document list data.
  • type="page"It indicates enabling pagination functionality to cooperate.pagination.
  • limit="10"Set the display of 10 documents per page.
• {% for item in archives %}: Loop througharchivesEach document in the list,itemRepresents the current document object being cycled through.
• Thumbnail (item.Thumb):{{ item.Thumb }}Directly output the thumbnail URL of the document. To optimize user experience, we added aloading="lazy"attribute to make the image lazy load and improve page loading speed. At the same time, through{% if item.Thumb %}Check if there is an abbreviation