How to efficiently and beautifully display content lists in website operation is the key to attracting users and increasing visit volume.An article list that clearly displays thumbnails, titles, and summaries, not only allowing visitors to find the content they are interested in at a glance, but also effectively improving the website's performance in search engines.AnQiCMS provides rich features and flexible template systems, 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, you first need to make sure that this information is filled in properly when the article is published. In the "Content Management" module of AnQiCMS, when you add a document or edit an existing document, you will see several important fields:

  • Document TitleThis is the most prominent text in the list and detail page of the article, it is recommended that you write a concise, attractive title that contains core keywords.
  • Document SummaryEnglish translation: This 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 it manually, AnQiCMS will automatically extract the first 150 characters from the article content as a brief by default.However, writing a personalized summary manually would be a better choice to convey content more accurately and optimize SEO.
  • Document image (thumbnail)This is the visual element of the article list.You can directly upload a picture 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 capture the first image in the article text as a thumbnail.

How to implement these displays in the article list template?

AnQiCMS's template system is very powerful, it uses syntax similar to Django template engine.To make thumbnails, titles, and summaries appear in the article list, we need to edit the corresponding content list template file.template/{您的模板目录}/{模型table}/list.htmlOr other common list template files.

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

  1. Get the list of articles:

    archiveListThe label is the core of obtaining 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 %}

    Here are thearchivesIt is a variable name that contains the collection of articles retrieved from the database.type="page"This list will support pagination.limit="10"It sets the number of articles displayed per page.

  2. **Show thumbnails