如何获取和显示特定分类的详情信息，包括描述、内容和Banner图？

在运营网站时，我们经常需要为不同的分类页面展示独特的内容，比如一个产品分类可能有详细的介绍和醒目的Banner图，而一个新闻分类则更侧重于简洁的描述。安企CMS提供了灵活的机制，让我们能够轻松获取并展示特定分类的详情信息，包括描述、内容和Banner图。

后端设置是基础：为分类丰富内容

在前端展示分类详情之前，我们需要在安企CMS后台为分类填充这些信息。这就像为你的分类准备好它的“名片”。

  1. 进入分类管理： 登录安企CMS后台，导航到“内容管理”菜单，然后点击“文档分类”。在这里，你可以看到所有的分类列表。
  2. 编辑或添加分类： 选择一个需要展示详细信息的分类，点击“编辑”按钮进入其详情页面；或者，你也可以添加一个新的分类。
  3. 填充关键信息：
    • 分类名称：这是分类的标题，会在前端显示。
    • 分类简介：通常用于搜索引擎优化（SEO）的description标签，也可以在页面上作为简短的介绍。
    • 分类内容：这是一个富文本编辑器，你可以在这里添加更详细的分类说明、图文内容等。
    • Banner图：在“其他参数”部分，你会找到“Banner图”选项。这里可以上传多张图片，作为分类页的轮播图或主视觉图。上传时建议使用相同尺寸的图片以保持美观。
    • 缩略图：同样在“其他参数”中，可以上传一张分类缩略图，用于在列表或其他需要小图展示的地方。

确保这些内容都已妥善填写和保存，这样前端模板才能正确地调用并展示它们。

核心标签：categoryDetail 的妙用

安企CMS提供了一个名为 categoryDetail 的模板标签，它是我们获取分类详情的强大工具。这个标签可以帮助我们获取当前访问的分类页面，或者指定ID的分类的各种信息。

获取当前页面的分类详情

当你的访客正在浏览某个分类页面时，例如“产品展示”分类，通常我们希望直接获取这个“产品展示”分类的详细信息。在这种情况下，categoryDetail 标签会智能地识别当前页面的分类，我们无需指定任何ID，直接通过 name 参数来获取对应字段。

例如，要显示当前分类的标题：

{% categoryDetail with name="Title" %}

获取指定分类的详情

有时，你可能需要在非分类页面，或者想在一个页面上展示多个分类的信息，这时就需要明确告诉 categoryDetail 标签要获取哪个分类的数据。我们可以通过 id 或 token（分类的URL别名）参数来指定。

比如，如果你知道某个分类的ID是 10，想获取它的标题：

{% categoryDetail with name="Title" id="10" %}

或者，如果分类的URL别名是 about-us：

{% categoryDetail with name="Title" token="about-us" %}

展示分类的描述和内容

有了 categoryDetail 标签，显示描述和内容就变得非常直接了。

显示分类描述 (Description)

分类描述通常是纯文本，直接输出即可：

<p>分类描述：{% categoryDetail with name="Description" %}</p>

如果你想将描述内容赋值给一个变量以便后续处理，也可以这样：

{% set categoryDescription = categoryDetail with name="Description" %}
<p>{{ categoryDescription }}</p>

显示分类内容 (Content)

分类内容通常包含富文本编辑器生成的HTML代码，为了让浏览器正确解析并渲染这些HTML，我们需要使用 |safe 过滤器。如果内容是Markdown格式，我们还可以选择使用 render=true 参数让系统将其转换为HTML。

<div class="category-content">
    {% set categoryContent = categoryDetail with name="Content" %}
    {{ categoryContent|safe }}
</div>

如果后台内容是Markdown格式，并希望系统自动渲染为HTML：

<div class="category-content">
    {% set categoryContent = categoryDetail with name="Content" render=true %}
    {{ categoryContent|safe }}
</div>

展示分类的Banner图和缩略图

分类的视觉元素对于提升页面美感和信息传达至关重要。

显示分类Banner图 (Images)

分类的Banner图在后台通常支持上传多张图片。categoryDetail 标签获取 Images 字段时，会返回一个图片URL的数组。我们可以遍历这个数组来显示所有Banner图，或者只取第一张作为主Banner。

遍历所有Banner图：

<div class="category-banners">
    {% categoryDetail categoryImages with name="Images" %}
    {% for imageUrl in categoryImages %}
        <img src="{{ imageUrl }}" alt="分类Banner图">
    {% endfor %}
</div>

只显示第一张Banner图： 如果只想显示第一张Banner图，并且需要判断它是否存在，可以这样做：

{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
    <img src="{{ categoryImages[0] }}" alt="分类主Banner图">
    {# 也可以把它作为背景图 #}
    <div class="hero-banner" style="background-image: url('{{ categoryImages[0] }}');">
        <!-- 页面其他内容 -->
    </div>
{% endif %}

显示分类缩略图 (Logo 或 Thumb)

分类缩略图通常用于在列表或其他小尺寸展示场景。Logo 通常指大尺寸的缩略图，而 Thumb 指的是经过系统处理的，尺寸更小的缩略图。

<div class="category-thumbnail">
    <img src="{% categoryDetail with name="Thumb" %}" alt="分类缩略图">
</div>
<div class="category-logo">
    <img src="{% categoryDetail with name="Logo" %}" alt="分类大图">
</div>

综合实战：构建一个分类详情页

现在，让我们把这些标签组合起来，创建一个典型的分类详情页面布局：

”`twig {# 假设这是某个分类的页面模板，如 products/list.html #} <!DOCTYPE html> 

<meta charset="UTF-8">
{# 获取分类标题，并附加网站名称 #}
<title>{% tdk with name="Title" siteName=true %}</title>
{# 获取分类描述作为页面Meta Description #}
<meta name="description" content="{% categoryDetail with name="Description" %}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">


<header>
    {# 头部导航等通用元素 #}
</header>

<main class="container">
    <nav class="breadcrumb">
        {% breadcrumb crumbs with index="首页" %}
        <ul>
            {% for item in crumbs %}
                <li><a href="{{item.Link}}">{{item.Name}}</a></li>
            {% endfor %}
        </ul>
        {% endbreadcrumb %}
    </nav>

    <section class="category-header">
        {# 显示分类标题 #}
        <h1>{% categoryDetail with name="Title" %}</h1>

        {# 显示分类Banner图（取第一张作为主图） #}
        {% categoryDetail categoryBanners with name="Images" %}
        {% if categoryBanners %}
        <div class="main-banner">
            <img src="{{ categoryBanners[0] }}" alt="{% categoryDetail with name="Title" %} Banner">
        </div>
        {% endif %}

        {# 显示分类描述 #}
        {% set categoryDescription = categoryDetail with name="Description" %}
        {% if categoryDescription %}
        <p class="category-intro">{{ categoryDescription }}</p>
        {% endif %}
    </section>

    <section class="category-full-content">
        {# 显示分类详细内容 #}
        {% set categoryFullContent = categoryDetail with name="Content" render=true %} {# 假设后台内容可能是Markdown #}
        {% if categoryFullContent %}
        <div class="rich-text-content">
            {{ categoryFullContent|safe }}
        </div>
        {% endif %}
    </section>

    <section class="category-products-list">
        <h2>{% categoryDetail with name="Title" %} 下的文章/产品</h2>
        {# 在这里可以调用 archiveList