How to display thumbnails, titles, and summaries in the article list?

How to effectively and beautifully display content lists in website operations is the key to attracting users and increasing visit volume.A clear display of thumbnail, title, and introduction of articles list, which not only allows visitors to find the content they are interested in at a glance, but also effectively improves the website's performance in search engines.AnQiCMS provides a rich set of features and a flexible template system, allowing us to easily achieve such effects.

How is the content managed in the AnQiCMS backend?

To display thumbnails, titles, and summaries in the article list, first make sure that this information is properly filled in when the article is published. In the AnQiCMS backend 'Content Management' module, when you 'add document' or edit an existing document, you will see several important fields:

• Document titleThis is the most prominent text of the article in the list and detail page, and it is recommended that you write a concise, attractive title that includes core keywords.
• Document IntroductionHere is a brief summary of the article content. Write a high-quality introduction that can effectively attract users to click.If you do not fill in manually, AnQiCMS will default to extracting the first 150 characters from the article content as a synopsis.However, to accurately convey content and optimize SEO, manually writing personalized descriptions would be a better choice.
• Document image (thumbnail)This is the visual element of the article list. You can directly upload an image related to the article content as a thumbnail.Even if you forget to upload, if the article content contains images, the system will intelligently automatically extract the first image in the article body as a thumbnail.

Moreover, AnQiCMS also provides global thumbnail configuration options in the "Content Settings" under the "Backend Settings".You can set the default thumbnail size, image processing method (such as scaling proportionally by the longest side, cropping by the shortest side, etc.), and even specify a 'default thumbnail' here.These global settings can help you maintain a consistent style for website images, ensuring the visual neatness of list pages.

How to implement these displays in the article list template?

The AnQiCMS template system is very powerful, it uses syntax similar to the Django template engine.To make the thumbnail, title, and summary appear in the article list, we need to edit the corresponding content list template file.The template file path for the article list page is usuallytemplate/{您的模板目录}/{模型table}/list.htmlOr other common list template files.

In these template files, we mainly usearchiveListLabel to retrieve the list of article data and loop through it{% for item in archives %}To process the information of each article one by one.

1. Get article list:

   archiveListTags are the core to get article data. For example, to get the latest 10 articles and display them with pagination, you can use it like this:

   {% archiveList archives with type="page" limit="10" %}
       {# 循环内部将用于显示每篇文章的详细信息 #}
   {% endarchiveList %}
   

   HerearchivesIs a variable name that contains the collection of articles retrieved from the database.type="page"Indicates that this list will support pagination whilelimit="10"sets the number of articles displayed per page.

2. **Display thumbnail