如何在分类页面显示该分类下的文章列表，并同时显示分类的Logo或Banner图？

在安企CMS中管理和展示分类内容，是构建一个结构清晰、用户友好的网站的关键一步。分类页面不仅能帮助用户快速找到感兴趣的内容，同时配合精心设计的视觉元素，如Logo或Banner图，还能有效提升品牌形象和用户体验。这篇文章将详细指导您如何在安企CMS的分类页面实现这些功能。

一、理解分类页面的构成与模板设置

在安企CMS中，每个分类都对应一个可以展示其内容的页面。为了更好地控制这些页面的布局和显示效果，安企CMS提供了灵活的模板机制。当您希望为某个分类或所有特定模型下的分类展示文章列表和独特的Logo或Banner图时，我们需要关注分类页面的模板文件。

安企CMS的模板文件通常存放在 /template 目录下，并遵循一定的命名约定。对于分类列表页，常用的模板文件命名格式是：

• {模型table}/list.html：这是该模型下所有分类的默认列表页模板。
• {模型table}/list-{分类ID}.html：您可以为某个具体分类ID定制专属的列表页模板。

这意味着您可以为“文章”模型（假设其模型表名为 article）的所有分类使用 article/list.html，或者为ID为10的“新闻资讯”分类专门设计 article/list-10.html。在后台的“文档分类”设置中，您可以为每个分类指定它应该使用的模板文件。

二、在分类页面展示分类的Logo或Banner图

分类的Logo或Banner图是分类页面的重要视觉组成部分。安企CMS为每个分类提供了上传这些图片的功能。您可以在后台进入“内容管理” -> “文档分类”，编辑某个分类时，会看到“Banner图”和“缩略图”的上传选项。

在模板中，我们可以使用 categoryDetail 标签来获取当前分类的详细信息，包括这些图片。

获取分类Logo或缩略图： 如果您的分类只设置了一张代表性的Logo或缩略图，可以直接使用 Logo 或 Thumb 字段。通常，Logo 字段用于展示大图，而 Thumb 字段用于较小的缩略图。

{# 假设这是分类列表页模板的某个位置 #}
<div class="category-header">
    {# 获取当前分类的Logo图，并将其用作页面标题的背景或直接展示 #}
    {% categoryDetail categoryLogo with name="Logo" %}
    {% if categoryLogo %}
        <img src="{{ categoryLogo }}" alt="{% categoryDetail with name='Title' %}" class="category-logo">
    {% endif %}

    {# 或者获取分类的缩略图 #}
    {% categoryDetail categoryThumb with name="Thumb" %}
    {% if categoryThumb %}
        <img src="{{ categoryThumb }}" alt="{% categoryDetail with name='Title' %}" class="category-thumbnail">
    {% endif %}

    <h1>{% categoryDetail with name='Title' %}</h1>
    <p>{% categoryDetail with name='Description' %}</p>
</div>

展示分类Banner组图： 如果分类上传了多张Banner图片（在后台的“Banner图”选项中），这些图片会被作为一个组图数据存储。您可以通过 Images 字段获取，并需要使用 for 循环来遍历显示。

{# 假设这是分类列表页模板的Banner区域 #}
<div class="category-banner-slider">
    {% categoryDetail bannerImages with name="Images" %}
    {% if bannerImages %}
        {# 遍历所有Banner图片 #}
        {% for imageSrc in bannerImages %}
            <div class="banner-item">
                <img src="{{ imageSrc }}" alt="{% categoryDetail with name='Title' %} - Banner {{ forloop.Counter }}">
            </div>
        {% endfor %}
        {# 如果只需要显示第一张Banner图作为固定头部背景 #}
        {% set firstBanner = bannerImages[0] %}
        <div class="fixed-banner" style="background-image: url('{{ firstBanner }}');"></div>
    {% endif %}
</div>

三、在分类页面显示该分类下的文章列表

展示分类下的文章列表是分类页面的核心功能。安企CMS提供了 archiveList 标签来轻松实现这一需求。这个标签非常灵活，可以根据多种条件筛选文章，包括所属分类、所属模型等。

在分类页面，我们通常希望获取当前分类下的所有文章。archiveList 标签会自动识别当前页面的分类ID，所以我们通常不需要显式地指定 categoryId 参数，除非您想获取其他分类的文章。

基础文章列表展示： 以下代码片段展示了如何获取当前分类下的文章列表，并显示每篇文章的标题、链接、简介和缩略图。

{# 假设这是文章列表区域 #}
<div class="article-list-section">
    {% archiveList articles with type="page" limit="10" %} {# type="page"表示启用分页，limit="10"表示每页显示10篇文章 #}
        {% for item in articles %}
            <div class="article-item">
                {% if item.Thumb %}
                    <a href="{{ item.Link }}" class="article-thumb">
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                    </a>
                {% endif %}
                <div class="article-content">
                    <h2 class="article-title"><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
                    <p class="article-description">{{ item.Description }}</p>
                    <div class="article-meta">
                        <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                        <span>浏览量：{{ item.Views }}</span>
                    </div>
                </div>
            </div>
        {% empty %}
            <p>当前分类下暂无文章。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

在上述代码中：

• type="page" 是启用分页的关键设置。
• limit="10" 则定义了每页显示的文章数量。
• item.Thumb、item.Link、item.Title、item.Description 等是 archiveList 标签遍历时每篇文章可用的字段。
• stampToDate 过滤器用于格式化文章发布时间戳。

四、实现文章列表的分页功能

当文章数量较多时，分页是必不可少的功能，它能提高页面的加载速度和用户体验。安企CMS通过 archiveList 的 type="page" 结合 pagination 标签来提供分页功能。

pagination 标签需要放置在 archiveList 标签的外部，并且需要 archiveList 标签将分页数据传递给它。

{# 承接上文的文章列表代码，在其下方添加分页部分 #}
<div class="pagination-section">
    {% pagination pages with show="5" %} {# show="5"表示最多显示5个页码按钮 #}
        <ul class="pagination-list">
            {# 首页按钮 #}
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
            </li>
            {# 上一页按钮 #}
            {% if pages.PrevPage %}
                <li class="page-item">
                    <a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
                </li>
            {% endif %}
            {# 中间页码按钮 #}
            {% for pageItem in pages.Pages %}
                <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                    <a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a>
                </li>
            {% endfor %}
            {# 下一页按钮 #}
            {% if pages.NextPage %}
                <li class="page-item">
                    <a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
                </li>
            {% endif %}
            {# 末页按钮 #}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
            </li>
        </ul>
        <p class="pagination-info">总计 {{ pages.TotalItems }} 篇文章，{{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。</p>
    {% endpagination %}
</div>

这里，pages 变量包含了所有分页相关的数据，例如 TotalItems（总文章数）、TotalPages（总页数）、CurrentPage（当前页码）以及各个页码的链接 (Link) 和名称 (Name)。

五、整合与实践建议

为了实现“在分类页面显示该分类下的文章列表，并同时显示分类的Logo或Banner图”，您可以创建一个名为 article/list.html（或特定分类ID的模板）的文件，然后将上述所有代码片段整合进去。

模板文件组织：

1. 在您选择的模板主题目录下，创建 article/list.html 文件。
2. 将您希望应用于所有文章分类页面的HTML结构、样式和JavaScript代码放入此文件中。
3. 在文件的适当位置插入上述用于显示分类Logo/Banner图、文章列表和分页的代码。

后台配置：

1. 确保您的文章已正确归类到相应的分类下，并且每篇文章都已上传了缩略图（