`categoryDetail`标签如何获取并显示分类的标题、描述、缩略图和关联内容?

在安企CMS中管理和展示网站内容,categoryDetail标签扮演着一个至关重要的角色。它就像您网站内容展示的指挥家,能够精准地获取并呈现特定分类的所有详细信息,无论是分类的标题、描述、缩略图,还是更深层次的关联内容,它都能助您一臂之力。

categoryDetail标签的核心作用

简单来说,categoryDetail标签的使命就是获取单个分类的详细数据。在分类页面,它会自动识别当前页面的分类信息并加载,但在其他页面,您也可以通过明确指定分类ID或URL别名来获取任意分类的数据。这在构建导航菜单、相关分类推荐或多层级内容展示时显得尤为灵活。

要使用这个标签,您通常会看到这样的形式:{% categoryDetail 变量名称 with name="字段名称" id="1" %}。其中,变量名称是可选的,如果您定义了它,后续就可以通过这个变量来引用获取到的数据;如果省略,标签将直接输出结果。id参数用于指定分类的数字ID,而token参数则允许您使用分类的URL别名来定位。对于部署了多站点的用户,siteId参数则能帮助您跨站点调用分类数据。

获取和展示分类的基本信息

分类的标题Title)和描述Description)是最基础也最常用的信息。它们不仅能让访问者快速了解分类主题,也是搜索引擎优化(SEO)的关键元素。例如,您可以通过{% categoryDetail with name="Title" %}直接在页面上显示分类标题,或者将其赋值给一个变量:{% categoryDetail categoryTitle with name="Title" %}{{categoryTitle}}。分类描述的获取方式与标题类似,通常用于在分类列表页提供简短概括,或填充HTML页面的<meta name="description">标签。

有时,分类页面本身可能包含一段详细内容Content),这在某些专题分类或介绍性分类中很常见。categoryDetail标签同样能获取这部分内容。值得注意的是,如果分类内容是在后台的Markdown编辑器中编辑的,您可能需要使用render=true参数来确保Markdown语法能被正确解析并渲染为HTML,同时结合|safe过滤器以防止HTML代码被转义:{{categoryContent|render|safe}}

灵活展示分类的视觉元素:缩略图与Banner

视觉内容在吸引用户方面至关重要,categoryDetail标签提供了多种方式来展示分类的图片信息。

缩略图:分类通常会有用于列表展示的图片。Logo字段通常代表分类的“缩略图大图”,而Thumb字段则可能代表经过裁剪或处理的“缩略图”。这两者都直接返回图片URL,您可以将它们嵌入<img>标签的src属性中。

Banner组图:对于一些需要轮播图或多图展示的分类,Images字段就派上用场了。它返回的是一个图片URL的数组。这意味着您需要通过一个for循环来遍历并显示这些图片,例如:

{% categoryDetail categoryImages with name="Images" %}
<ul>
  {% for item in categoryImages %}
  <li>
    <img src="{{item}}" alt="{% categoryDetail with name="Title" %}" />
  </li>
  {% endfor %}
</ul>

如果只需要获取其中第一张图片作为页面背景或封面,可以通过数组索引访问:{% set pageBanner = categoryImages[0] %}

自定义字段的展示

安企CMS的灵活内容模型允许您为分类添加各种自定义字段。这些字段可能包括联系方式、特定属性值、外部链接等。categoryDetail标签同样能获取这些自定义字段。

如果您想遍历显示所有自定义字段,可以通过获取Extra字段,然后在其内部循环:

{% categoryDetail extras with name="Extra" %}
{% for field in extras %}
  <div>{{field.Name}}:{{field.Value}}</div>
{% endfor %}

若您只想获取某个特定的自定义字段,比如您在后台定义了一个名为categorySlogan的字段,可以直接通过名称获取:{% categoryDetail with name="categorySlogan" %}

获取分类的关联内容

分类详情页除了展示分类自身的信息外,最重要的往往是展示该分类下的关联内容,比如文章列表或产品列表。categoryDetail标签本身并不直接返回这些内容,但它提供了关键的Id(分类ID),您可以利用这个ID配合archiveList标签来获取。

archiveList标签专门用于获取文档(文章、产品等)列表。在分类详情页中,您可以这样使用它来获取当前分类下的所有文档:

{% archiveList archives with categoryId=category.Id type="page" limit="10" %}
  {% for item in archives %}
  <li>
    <a href="{{item.Link}}">
      <h5>{{item.Title}}</h5>
      <p>{{item.Description}}</p>
      <img src="{{item.Thumb}}" alt="{{item.Title}}" />
    </a>
  </li>
  {% empty %}
  <li>此分类下暂无内容。</li>
  {% endfor %}
{% endarchiveList %}

这里,categoryId=category.Id就是关键所在,它将categoryDetail获取的当前分类ID传递给了archiveList,确保只显示该分类下的文档。type="page"表示启用分页功能,而limit="10"则控制每页显示的文章数量。

综合示例

假设您正在为一个博客网站构建分类页,需要显示分类名称、描述、一张Banner图,以及该分类下的最新文章列表。您的模板代码可能会是这样:

{% categoryDetail category %} {# 获取当前分类所有信息,并赋值给category变量 #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ category.Title }} - 我的博客</title>
    <meta name="description" content="{{ category.Description }}">
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <header>
        <h1>{{ category.Title }}</h1>
        <p>{{ category.Description }}</p>
    </header>

    <div class="category-banner">
        {% categoryDetail categoryBanner with name="Images" %}
        {% if categoryBanner %}
            <img src="{{ categoryBanner[0] }}" alt="{{ category.Title }}的封面图">
        {% endif %}
    </div>

    <main class="category-content">
        {% if category.Content %}
            <div class="intro-content">
                {{ category.Content|render|safe }}
            </div>
        {% endif %}

        <h2>{{ category.Title }}下的最新文章</h2>
        <ul class="article-list">
            {% archiveList articles with categoryId=category.Id type="page" limit="10" order="CreatedTime desc" %}
                {% for article in articles %}
                <li>
                    <a href="{{ article.Link }}">
                        <img src="{{ article.Thumb }}" alt="{{ article.Title }}">
                        <h3>{{ article.Title }}</h3>
                        <p>{{ article.Description }}</p>
                        <span>发布日期:{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
                    </a>
                </li>
                {% empty %}
                <li>此分类下暂无文章。</li>
                {% endfor %}
            {% endarchiveList %}
        </ul>

        <div class="pagination-area">
            {% pagination pages with show="5" %}
                {% for p in pages.Pages %}
                    <a href="{{ p.Link }}" class="{% if p.IsCurrent %}active{% endif %}">{{ p.Name }}</a>
                {% endfor %}
            {% endpagination %}
        </div>
    </main>

    <footer>
        <p>&copy; 2023 我的博客</p>
    </footer>
</body>
</html>

通过categoryDetail标签,您可以轻松构建内容丰富、结构清晰的分类页面,为用户提供更好的浏览体验,同时也为搜索引擎优化奠定坚实基础。


常见问题 (FAQ)

  1. categoryDetailcategoryList标签有什么区别? categoryDetail标签用于获取并展示单个分类的所有详细信息,比如某个特定分类的标题、描述、专属图片等。而categoryList标签则用于获取多个分类组成的列表,常用于构建导航菜单或侧边栏分类列表,它通常只返回分类的简要信息(如标题和链接),如果需要每个列表项的详细信息,可能需要在categoryList的循环内部再嵌套categoryDetail

  2. **我通过categoryDetail获取了分类内容(`