As an experienced website operations expert, I know that how to efficiently and flexibly display content in a content management system is one of the key factors for the success of a website.AnQiCMS (AnQi CMS) relies on its powerful template engine and concise tag design, making content display extremely convenient.archiveListIn the loop, elegantly obtain and display the document thumbnail, description, and publication time.
Start content loop:archiveListThe magic of tags
In AnQiCMS,archiveListThe tag is a core tool used to retrieve and display document lists in a loop.No matter whether it is the content of an article, product, or other custom model, it can help us easily iterate through processing.archiveListIt is the starting point to achieve this goal.
It is usually presented in such a structure in your template file:
{% archiveList archives with type="list" limit="5" %}
{% for item in archives %}
{# 在这里处理每一个文档项，item代表当前循环中的文档对象 #}
{% endfor %}
{% empty %}
{# 如果没有文档，这里的内容会被显示 #}
{% endarchiveList %}
In this code block,archivesIs a variable name we give to the document list,itemIt represents the object of the current document in each loop. All the data we need will be extracted from thisitemobject.
Presented in detail: Get the thumbnail of the document
The visual appeal of website content is self-evident, and thumbnails are the key to enhancing this appeal. In AnQiCMS, obtaining document thumbnails is very intuitive, mainly throughitem.Thumboritem.Logoto implement the field.
item.ThumbThis field usually points to the thumbnail path that has been optimized by the system.AnQiCMS when you upload document images, it will automatically generate thumbnails of different sizes according to the backend settings.If you do not manually upload a thumbnail when publishing a document, but the document content contains images, the system will also intelligently extract the first image as a thumbnail.item.Thumbis the recommended thumbnail field for list pages, as it is usually smaller in size and faster to load.item.Logo: Compared to,item.LogoThe field may point to the main cover image of the document, which is usually in its original size or a larger size.In certain design scenarios, if you need to display a higher resolution or more complete cover, you can use this field.
The following is an example of the code used in the template:
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="document-thumbnail">
{% else if item.Logo %}
<img src="{{ item.Logo }}" alt="{{ item.Title }}" class="document-logo">
{% endif %}
By making such a condition judgment, we can ensure that even if the document does not haveThumbimage, we can also try to useLogoimage as an alternative, or avoid displaying broken image icons when both are missing.
Concise summary: Get the document description
The document description, also known as an abstract, is the important text that guides users to click and read. It needs to briefly summarize the core content of the document. AnQiCMS stores the document description initem.Descriptionin the field.
This field's content can be directly output:
<p class="document-description">{{ item.Description | truncatechars:120 }}</p>
I added one heretruncatechars:120Filter, this is a very practical feature of AnQiCMS template engine, which can truncate the description text to a specified number of characters (here are 120 characters) and automatically add an ellipsis at the end.This is very helpful to maintain the neat and unified layout of the list page.It is worth mentioning that if you do not manually fill in the description when publishing the document, AnQiCMS will automatically extract the first 150 characters of the document content as the description, which greatly reduces the burden on content operators.
Trace time: Get the publication time of the document
The publication time is an important indicator for users to judge the timeliness and value of the content. In AnQiCMS, the publication time of the document is stored initem.CreatedTimethe field. But it should be noted that,CreatedTimeThe field returns a Unix timestamp (10 digits), and we need to format it into a common date-time format for user convenience.
AnQiCMS provides a namedstampToDateThe built-in label, specifically used for formatting timestamps. Its usage is{{ stampToDate(时间戳, "格式") }}. The "format" parameter follows the Go language's time formatting rules, for example"2006-01-02"stands for year, month, and day,"15:04:05"represents hours, minutes, and seconds.
Here are some common examples of time formatting:
{# 格式化为：2023年01月01日 #}
<span>发布于：{{ stampToDate(item.CreatedTime, "2006年01月02日") }}</span>
{# 格式化为：2023-01-01 12:30 #}
<span>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
{# 格式化为：Jan 01, 2023 #}
<span>发布于：{{ stampToDate(item.CreatedTime, "Jan 02, 2006") }}</span>
exceptCreatedTime(Creation time), you can also useitem.UpdatedTimeto get the update time of the document, which also requiresstampToDateto format.
A comprehensive integration of: A completearchiveListLoop example
Now, let's integrate these elements into a completearchiveListLoop to simulate the display of a content list:
<div class="document-list-section">
{% archiveList archives with type="list" limit="6" order="id desc" %} {# 获取最新发布的6篇文档 #}
{% for item in archives %}
<div class="document-card">
{% if item.Thumb %}
<a href="{{ item.Link }}" class="document-image-link">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="document-cover-image">
</a>
{% endif %}
<div class="document-info">
<h3 class="document-title"><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p class="document-excerpt">{{ item.Description | truncatechars:100 }}</p>
<div class="document-meta">
<span class="document-date">发布于：{{ stampToDate(item.CreatedTime, "2006年01月02日") }}</span>
<span class="document-views">浏览：{{ item.Views }}</span>
</div>
</div>
</div>
{% empty %}
<p class="no-content-message">很抱歉，当前暂无文档可供显示。</p>
{% endfor %}
{% endarchiveList %}
</div>
In this example, we not only got the thumbnail, description, and publish time, but also displayed the document title and