如何在文档列表页面展示缩略图、描述和自定义字段？
在网站运营中，内容列表页是用户获取信息、决定是否深入浏览的关键环节。一个信息丰富、布局清晰的列表页，能够极大提升用户体验和内容吸引力。为了达到这一目标，合理地在安企CMS的文档列表页面展示缩略图、描述以及自定义字段显得尤为重要。
通过安企CMS提供的强大而灵活的模板标签系统，您可以轻松实现这一需求，无需复杂的编程知识，仅需对模板文件进行简单的修改和配置。
基础准备：内容模型的自定义与填充
在着手修改模板之前，首先要确保您的内容在后台已正确配置和填充。缩略图、描述和自定义字段都需在文档发布或编辑时进行设置。
缩略图： 在安企CMS的文档发布或编辑页面，您会看到一个名为“文档图片”的区域。这里就是设置文档缩略图的地方。您可以上传一张精心挑选的图片作为缩略图。值得一提的是，即便您未手动上传，如果文档内容中包含图片，系统也会智能地提取第一张图片作为缩略图，确保列表页的视觉完整性。
描述： “文档简介”栏目是用来填写文档摘要或概述的。一份精炼、吸引人的描述能有效激发用户的点击欲望。即使您选择留空，安企CMS也会自动截取文档正文的前一部分作为简介。然而，我们通常建议手动撰写，以便更好地控制信息表达，突出核心卖点或内容亮点。
自定义字段： 安企CMS的灵活内容模型是其核心优势之一。在“内容管理” -> “内容模型”中，您可以根据业务需求为不同的内容类型（如文章、产品）添加专属的自定义字段。例如，您可以为产品模型添加“价格”、“品牌”、“库存”等字段，或者为文章模型添加“作者”、“来源”、“发布日期”等字段。这些自定义字段在文档编辑时会显示在“其他参数”区域，等待您进行填充。请务必确认您已根据实际需要定义并填写了这些字段，它们是列表页丰富信息展示的重要来源。
核心实现：文档列表标签 archiveList 的运用
要在文档列表页面（例如文章列表页或产品列表页）展示上述信息，我们主要依赖安企CMS的 archiveList 模板标签。这个标签是数据检索和输出的核心，它能够从数据库中获取文档数据并供模板使用。
通常，列表页的模板文件位于 template/{您的模板目录}/{模型table}/list.html。您需要在这些文件中使用 archiveList 标签来循环遍历并展示每一篇文档。
以下是实现缩略图、描述和自定义字段展示的代码结构：
{# 假设这是您的文档列表页面模板 #}
<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"表示启用分页功能，以便配合pagination标签。limit="10"设置每页显示10篇文档。
{% for item in archives %}: 循环遍历archives列表中的每一篇文档，item代表当前循环到的文档对象。- 缩略图 (
item.Thumb):{{ item.Thumb }}直接输出文档的缩略图URL。为了优化用户体验，我们添加了一个loading="lazy"属性，使图片懒加载，提高页面加载速度。同时，通过{% if item.Thumb %}判断是否存在缩略