AnQiCMS 模板里如何显示当前分类的简介和 Banner 图片？

在网站运营中，如何让您的分类页面更具吸引力，同时清晰地传达信息，是提升用户体验和SEO效果的关键。安企CMS（AnQiCMS）凭借其灵活的模板系统，让您能够轻松在分类页面展示当前分类的简介和个性化的 Banner 图片。

接下来，我们将一起探索如何在 AnQiCMS 模板中实现这一功能，让您的网站分类页面更加生动和专业。

1. 深入了解 AnQiCMS 模板系统

AnQiCMS 的模板制作采用了类似 Django 模板引擎的语法，这意味着您将主要使用两种标记：

  • 双花括号 {{ 变量 }}：用于输出变量的值。
  • 单花括号和百分号 {% 标签 %}：用于控制逻辑，如条件判断（if）、循环（for）以及调用内置功能标签。

所有的模板文件都存放在 /template 目录下，并以 .html 作为文件后缀。分类页面的模板通常命名为 {模型table}/list.html 或自定义的 list-{分类ID}.html。在这些模板中，AnQiCMS 会自动提供当前分类的上下文数据，方便您直接调用。

2. 获取并显示当前分类的简介

分类简介是向访客快速介绍该分类内容的重要窗口。在 AnQiCMS 中，您可以通过 categoryDetail 标签轻松获取到这些信息。

在后台的“内容管理” -> “文档分类”页面，编辑您需要设置简介的分类时，会有一个“分类简介”字段。在这里填写的文本内容，就可以在前端模板中调用。

要显示当前分类的简介，您可以这样在模板中编写代码：

<div class="category-description">
    {# 使用 categoryDetail 标签获取当前分类的描述信息，并使用 |safe 过滤器防止HTML转义 #}
    {% categoryDetail currentCategoryDescription with name="Description" %}
    {{ currentCategoryDescription|safe }}
</div>

代码解析：

  • {% categoryDetail currentCategoryDescription with name="Description" %}：这是一个强大的标签，它会获取当前分类的详细信息。name="Description" 参数指定了我们要获取的是分类的简介内容。currentCategoryDescription 是一个我们自定义的变量名，用于存储获取到的简介文本。
  • {{ currentCategoryDescription|safe }}：将获取到的简介文本输出到页面。|safe 过滤器在这里非常重要，因为分类简介内容可能包含 HTML 标签（比如加粗、链接等），使用 |safe 可以确保这些 HTML 内容被浏览器正确解析显示，而不是作为纯文本输出。

3. 展示当前分类的 Banner 图片

一个精美的 Banner 图片能够瞬间抓住访客的眼球，提升页面的视觉效果和专业度。安企CMS 允许您为每个分类设置多张 Banner 图片。

在后台的“内容管理” -> “文档分类”页面，编辑分类时，会有一个“Banner图”选项。您可以在这里上传一张或多张图片。

由于 Banner 图支持多张上传，所以在模板中调用时，它会作为一个图片地址的数组返回。您需要使用循环来遍历并显示它们。

3.1 显示所有 Banner 图片

如果您希望以轮播图的形式展示所有上传的 Banner 图片，可以这样做：

<div class="category-banner-slider">
    {# 获取当前分类的所有 Banner 图片 #}
    {% categoryDetail categoryBanners with name="Images" %}
    {% if categoryBanners %}
        {% for imageUrl in categoryBanners %}
        <img src="{{ imageUrl }}" alt="{% categoryDetail with name='Title' %} Banner" class="category-banner-image">
        {% endfor %}
    {% else %}
        {# 如果没有设置 Banner 图，可以显示一个默认占位图或不显示 #}
        <img src="/public/static/images/default-banner.webp" alt="默认Banner" class="category-banner-image">
    {% endif %}
</div>

代码解析：

  • {% categoryDetail categoryBanners with name="Images" %}：获取当前分类关联的所有 Banner 图片的 URL 数组，并存储在 categoryBanners 变量中。
  • {% if categoryBanners %}：检查 categoryBanners 数组是否非空，确保只有上传了图片才进行显示。
  • {% for imageUrl in categoryBanners %}：遍历 categoryBanners 数组，imageUrl 变量在每次循环中会获取到一张图片的 URL。
  • <img src="{{ imageUrl }}" alt="{% categoryDetail with name='Title' %} Banner" ...>：使用 <img> 标签显示图片。alt 属性对于 SEO 和无障碍访问非常重要，这里我们调用了当前分类的标题作为 alt 文本，更加语义化。

3.2 只显示第一张 Banner 图片

在很多情况下，您可能只需要显示分类 Banner 中的第一张图片，比如作为页面的头部大图。

<div class="category-banner-header"
     {% categoryDetail categoryBanners with name="Images" %}
     {% if categoryBanners %}
        {# 获取数组中的第一张图片URL #}
        {% set firstBannerUrl = categoryBanners[0] %}
        style="background-image: url('{{ firstBannerUrl }}');"
     {% else %}
        {# 如果没有设置 Banner 图，可以设置一个默认背景 #}
        style="background-image: url('/public/static/images/default-header.webp');"
     {% endif %}
     >
    {# Banner 区域内的其他内容，比如分类标题等 #}
    <h1>{% categoryDetail with name="Title" %}</h1>
</div>

代码解析：

  • {% set firstBannerUrl = categoryBanners[0] %}：通过索引 [0] 直接获取 categoryBanners 数组中的第一个元素，也就是第一张 Banner 图片的 URL。
  • style="background-image: url('{{ firstBannerUrl }}');"：将获取到的图片 URL 设置为 div 元素的背景图。这种方式常用于响应式大图或需要覆盖内容的 Banner。
  • {% categoryDetail with name="Title" %}：再次调用分类标题，可用于 Banner 上的文字信息。

4. 整合到您的分类模板中

将上述代码片段整合到您的分类列表页模板（例如 article/list.html 或 product/list.html）中，通常会放在页面内容的顶部或主要区域。

”`twig {% extends ‘base.html’ %} {# 继承您的基础模板 #}

{% block content %}

<div class="category-header">
    {# 获取当前分类的标题，作为页面主要标题 #}
    <h1>{% categoryDetail with name="Title" %}</h1>

    {# 显示分类简介 #}
    <div class="category-intro">
        {% categoryDetail categoryDesc with name="Description" %}
        {{ categoryDesc|safe }}
    </div>

    {# 显示分类 Banner，这里选择只显示第一张作为头部背景 #}
    <div class="category-main-banner"
         {% categoryDetail categoryBanners with name="Images" %}
         {% if categoryBanners %}
            {% set firstBannerUrl = categoryBanners[0] %}
            style="background-image: url('{{ firstBannerUrl }}');"
         {% else %}
            style="background-image: url('/public/static/images/default-category-banner.webp');"
         {% endif %}
         >
        {# 您可以在 Banner 上叠加其他元素，例如分类名称或标语 #}
    </div>
</div>

<div class="category-content">
    {# 这里放置您的文档列表标签，例如 archiveList，用于显示分类下的文章或产品 #}
    {% archiveList archives with type