如何显示分类的名称、描述、内容和其链接？

在构建网站时，分类信息不仅是内容的骨架，更是用户导航、搜索引擎优化（SEO）和提升用户体验的关键所在。安企CMS（AnQiCMS）以其灵活的模板引擎，让您能够轻松地在网站前端展示分类的名称、描述、内容及其链接，从而为访客提供清晰的导航路径，也为搜索引擎提供丰富的信息以更好地理解您的网站结构。

本文将深入探讨在AnQiCMS模板中，如何通过几个核心标签，灵活调用并展示您网站的分类信息。

核心标签：categoryDetail 与 categoryList

在AnQiCMS中，主要有两个标签用于处理分类信息的显示：

  • categoryDetail：当您需要在一个分类页面本身，或者已知某个分类ID，想展示其详细信息（如分类名称、描述、内容、Banner图等）时，categoryDetail标签便是您的得力助手。
  • categoryList：如果您想构建导航菜单、侧边栏分类列表，或者在首页展示特定内容模型下的子分类时，categoryList标签就能派上用场，它能循环遍历并列出多个分类。

接下来，我们将详细了解如何使用这两个标签来展示分类的各项信息。

展示单个分类的详细信息

假设您正在编辑一个分类的详情页模板（例如 /template/{您的模型表名}/list.html 或自定义的分类模板），您希望在这里显示当前分类的各种详细数据。

1. 显示分类名称 (Title)

分类的名称是其最基本的标识。您可以使用以下方式获取并显示当前分类的名称：

<div>
    <h1>{% categoryDetail with name="Title" %}</h1>
</div>

如果您需要获取特定ID分类的名称，或者想将名称赋值给一个变量以便后续使用，可以这样操作：

{# 获取ID为10的分类名称 #}
<h2>特定分类名称：{% categoryDetail with name="Title" id="10" %}</h2>

{# 将当前分类名称赋值给一个变量 #}
{% set currentCategoryName = categoryDetail with name="Title" %}
<p>当前分类名称是：{{ currentCategoryName }}</p>

2. 显示分类描述 (Description)

分类描述通常用于简要概括分类主题，对SEO和用户理解都很有帮助。

<meta name="description" content="{% categoryDetail with name="Description" %}">
<p>分类简介：{% categoryDetail with name="Description" %}</p>

3. 显示分类内容 (Content)

如果您的分类在后台填写了详细的内容（例如，使用富文本编辑器编写的介绍文字），您可以通过Content字段将其展示出来。需要特别注意的是，分类内容可能包含HTML标签，为了确保这些标签能被浏览器正确解析而不是直接显示为纯文本，您需要使用|safe过滤器。

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

4. 显示分类链接 (Link)

分类链接是引导用户和搜索引擎访问该分类页面的关键。通常，它会被用于<a>标签的href属性。

<a href="{% categoryDetail with name="Link" %}">点击查看更多</a>

在构建面包屑导航时，您也会经常用到分类的链接：

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

5. 显示分类关联的图片 (Banner图、缩略图)

安企CMS的分类支持设置缩略图（Thumb）、Banner图（Logo）以及一组Banner轮播图（Images）。

  • 分类缩略图/Banner图 (Thumb / Logo)：

    <img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
<img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" />

  • 分类Banner组图 (Images)： 由于Images返回的是一个图片地址数组，您需要使用for循环来遍历并展示它们，这非常适合制作轮播图。

    <div class="category-banner-carousel">
    {% categoryDetail categoryImages with name="Images" %}
    {% for imageUrl in categoryImages %}
        <img src="{{ imageUrl }}" alt="{% categoryDetail with name="Title" %}" />
    {% endfor %}
    {% endcategoryDetail %}
</div>

6. 显示分类的自定义字段

如果您在后台为分类模型添加了自定义字段，可以通过Extra字段或直接使用自定义字段名来调用。

{# 循环显示所有自定义字段 #}
{% categoryDetail extras with name="Extra" %}
<div class="category-custom-params">
    {% for field in extras %}
        <div>
            <span>{{ field.Name }}：</span>
            <span>{{ field.Value }}</span>
        </div>
    {% endfor %}
</div>

如果您只关心某个特定的自定义字段，例如您定义了一个名为“联系邮箱”的字段，其调用字段名为contactEmail，那么可以直接这样使用：

<p>分类联系邮箱：{% categoryDetail with name="contactEmail" %}</p>

展示分类列表信息

当您需要显示多个分类，例如在网站的导航菜单、侧边栏或者首页的某个区块时，categoryList标签就显得非常有用。

1. 获取顶级分类列表

通常用于构建主导航菜单。您需要指定moduleId来告诉系统获取哪个内容模型（例如文章模型ID为1，产品模型ID为2）下的分类，并设置parentId="0"来获取顶级分类。

<nav class="main-navigation">
    <ul>
        {% categoryList categories with moduleId="1" parentId="0" %}
        {% for item in categories %}
            <li {% if item.IsCurrent %}class="active"{% endif %}>
                <a href="{{ item.Link }}">{{ item.Title }}</a>
            </li>
        {% endfor %}
        {% endcategoryList %}
    </ul>
</nav>

在上面的例子中，item.IsCurrent可以帮助您判断当前循环的分类是否是用户正在访问的页面所属分类，从而为其添加高亮样式。

2. 获取子分类列表

在很多场景下，您可能需要在主分类下展示其子分类。这可以在一个循环内部再次使用categoryList标签实现。

<nav class="main-navigation">
    <ul>
        {% categoryList topCategories with moduleId="1" parentId="0" %}
        {% for topCategory in topCategories %}
            <li {% if topCategory.IsCurrent %}class="active"{% endif %}>
                <a href="{{ topCategory.Link }}">{{ topCategory.Title }}</a>
                {# 判断是否有子分类，如果有，则再次循环 #}
                {% if topCategory.HasChildren %}
                    <ul class="sub-menu">
                        {% categoryList subCategories with parentId=topCategory.Id %}
                        {% for subCategory in subCategories %}
                            <li {% if subCategory.IsCurrent %}class="active"{% endif %}>
                                <a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
                            </li>
                        {% endfor %}
                        {% endcategoryList %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
        {% endcategoryList %}
    </ul>
</nav>

除了Title和Link，您还可以在列表中显示其他信息，例如分类下包含的文档数量ArchiveCount：

{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <p><a href="{{ item.Link }}">{{ item.Title }}</a> ({{ item.ArchiveCount }}篇文章)</p>
    {% endfor %}
{% endcategoryList %}

实用小贴士

  • SEO 优化：在分类的描述（Description）中合理地融入关键词，能有效提升分类页面在搜索引擎中的表现。同时，清晰的分类链接结构对搜索引擎抓取也至关重要。
  • HTML 内容安全：当您展示分类的Content字段时，务必记得使用|safe过滤器。这是为了防止后台编辑