如何使用`archiveList`标签在列表页显示每篇文章的缩略图？

在安企CMS中，为了让您的网站内容列表页更具吸引力，为每篇文章或产品展示一个醒目的缩略图是提升用户体验和页面美观度的关键。这不仅能帮助访问者快速理解内容主题，还能有效提高点击率。AnQiCMS提供了直观且强大的模板标签功能，让您能够轻松地在列表页实现这一目标。

核心功能揭秘：archiveList 标签与缩略图

在AnQiCMS中，要实现这一目标，我们主要依赖于强大的archiveList标签。archiveList标签是用于获取和展示文章、产品等各种类型内容列表的核心工具。无论您需要显示最新文章、热门产品，还是某个分类下的内容，archiveList都能灵活应对。

在archiveList的循环中，每篇文章的数据都会被赋给一个变量（通常是item），其中包含了一个名为Thumb的字段，它就是文章缩略图的地址。item.Thumb会直接输出该文章经过系统处理后的缩略图URL。

一步步操作：在列表页展示缩略图

接下来，我们将通过具体的步骤，引导您如何在列表页的模板文件中，利用archiveList标签显示每篇文章的缩略图。

第一步：确定您的列表页模板文件

首先，您需要找到负责渲染内容列表的模板文件。根据AnQiCMS的模板约定，列表页模板通常位于/template目录下您所使用的模板主题文件夹内，并遵循特定的命名规则，例如：

• 文章列表页： archive/list.html 或针对特定分类的 archive/list-{分类ID}.html
• 产品列表页： product/list.html 或 product/list-{分类ID}.html
• 或者您的自定义模型对应的列表页。

确认您要修改的模板文件后，使用后台的“模板设计”功能或通过FTP/SSH工具对其进行编辑。

第二步：调用 archiveList 标签获取文章数据

在列表页模板文件中，您会使用archiveList标签来获取文章列表数据。这个标签可以根据您的需求，通过不同的参数来筛选和排序内容。例如，获取某个模型（如文章模型，其moduleId通常为1）下的分页列表：

{% archiveList archives with moduleId="1" type="page" limit="10" %}
    {# 在这里循环处理每篇文章数据 #}
{% endarchiveList %}

在上述代码中：

• archives 是一个变量名，用于存储获取到的文章列表数据。您可以自定义这个变量名。
• moduleId="1" 表示获取ID为1的文章模型下的内容（文章模型通常默认为1，产品模型默认为2，具体可在后台“内容模型”中查看）。
• type="page" 启用分页功能，这样您可以配合pagination标签显示页码。
• limit="10" 设置每页显示10篇文章。

第三步：提取并显示缩略图

获取到文章列表数据后，我们就可以在archiveList标签的循环内部（即{% for item in archives %} 和 {% endfor %}之间）取出每篇文章的缩略图地址了。使用{{item.Thumb}}即可获取缩略图的URL，并将其放置在<img>标签的src属性中。

为了更好的用户体验和SEO，我们强烈建议您：

• 添加条件判断： 使用{% if item.Thumb %}判断文章是否有缩略图。如果没有，可以显示一个默认的占位图，避免页面出现空白或破损图标。
• 完善 alt 属性： 在<img>标签中添加alt属性，并使用{{item.Title}}作为其值，这不仅对搜索引擎友好，也能在图片加载失败时提供文字说明。
• 添加CSS类： 为<img>标签添加一个CSS类（例如article-thumbnail），方便您通过CSS对缩略图进行样式控制。

完整代码示例

将以上步骤整合起来，一个典型的列表页缩略图展示代码可能如下：

“twig {# 假设您正在编辑的是文章列表页模板，例如archive/list.html` #}

{% archiveList archives with moduleId="1" type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}" class="article-link">
            {% if item.Thumb %}
            <img src="{{item.Thumb}}" alt="{{item.Title}}" class="article-thumbnail">
            {% else %}
            {# 如果文章没有缩略图，可以显示一个默认占位图，请确保路径正确 #}
            <img src="/public/static/images/default-thumbnail.jpg" alt="默认缩略图" class="article-thumbnail">
            {% endif %}
            <h3 class="article-title">{{item.Title}}</h3>
            <p