如何获取和显示特定分类的详情信息，包括描述、内容和Banner图？
在运营网站时，我们经常需要为不同的分类页面展示独特的内容，比如一个产品分类可能有详细的介绍和醒目的Banner图，而一个新闻分类则更侧重于简洁的描述。安企CMS提供了灵活的机制，让我们能够轻松获取并展示特定分类的详情信息，包括描述、内容和Banner图。
后端设置是基础：为分类丰富内容
在前端展示分类详情之前，我们需要在安企CMS后台为分类填充这些信息。这就像为你的分类准备好它的“名片”。
- 进入分类管理： 登录安企CMS后台，导航到“内容管理”菜单，然后点击“文档分类”。在这里，你可以看到所有的分类列表。
- 编辑或添加分类： 选择一个需要展示详细信息的分类，点击“编辑”按钮进入其详情页面；或者，你也可以添加一个新的分类。
- 填充关键信息：
- 分类名称：这是分类的标题，会在前端显示。
- 分类简介：通常用于搜索引擎优化（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