在内容管理系统中,分类不仅是内容的组织形式,更是网站结构与用户导航的核心。灵活地获取并展示特定分类的详细信息,如其描述、独特的Banner图和Logo,对于创建富有吸引力、信息丰富的页面至关重要。安企CMS(AnQiCMS)为此提供了直观且功能强大的模板标签,让您可以轻松实现这一需求。
核心功能标签:categoryDetail
安企CMS为此提供了强大的模板标签——categoryDetail。这个标签的核心作用是根据您指定的分类ID或URL别名(token),精准地获取该分类的所有详细数据。无论您是想在首页展示某个精选分类,还是在其他页面引用特定内容分类的详细信息,categoryDetail都能提供所需的数据支持。
要使用它,您通常会以这种格式开始:{% categoryDetail myCategory with id="分类ID" %}。这里,myCategory是一个自定义的变量名,您可以根据自己的喜好命名,它将承载获取到的分类详细信息。id参数用于指定您希望获取的分类ID。如果您不方便获取ID,也可以使用token参数,它对应着分类的URL别名,例如:{% categoryDetail myCategory with token="company-news" %}。
获取分类描述
分类的详细描述是向访客介绍分类内容的重要部分,它有助于用户快速了解该分类的主题和范围。通过categoryDetail标签获取分类数据后,我们可以轻松访问其Description字段。
在模板中,您可以这样展示分类描述:
{% categoryDetail myCategory with id="123" %} {# 假设要获取ID为123的分类信息 #}
{% if myCategory %}
<div class="category-description">
<h3>{{ myCategory.Title }} 的详细描述</h3>
<p>{{ myCategory.Description | safe }}</p>
</div>
{% endif %}
请注意,Description字段的内容可能包含HTML标签。为了确保这些HTML代码能被浏览器正确渲染而不是作为纯文本显示,我们需要在输出时使用|safe过滤器。这样可以保证例如段落、链接或加粗文本等格式能正常呈现。
展示分类 Banner 图和 Logo
视觉元素在吸引用户注意力方面扮演着重要角色,它们能够直观地传达品牌形象和内容主题。安企CMS允许为每个分类配置专属的Banner图和Logo,让您的网站在视觉上更具吸引力。
分类Logo通常是分类的标识性小图,可以直接通过Logo字段获取。而Banner图则更加灵活,它以图片组的形式存储在Images字段中。这意味着您可以为同一个分类上传多张Banner图,并在模板中循环展示,或者只取第一张作为主Banner。
以下是如何在模板中展示分类Logo和Banner图的示例:
{% categoryDetail myCategory with id="123" %} {# 假设要获取ID为123的分类信息 #}
{% if myCategory %}
<div class="category-visuals">
<h2>{{ myCategory.Title }}</h2>
{# 显示分类Logo #}
{% if myCategory.Logo %}
<div class="category-logo">
<img src="{{ myCategory.Logo }}" alt="{{ myCategory.Title }} Logo" style="max-width: 150px; height: auto;" />
</div>
{% endif %}
{# 显示分类Banner图(图片组) #}
{% if myCategory.Images %}
<div class="category-banners">
{% for banner in myCategory.Images %}
<img src="{{ banner }}" alt="{{ myCategory.Title }} Banner {{ forloop.Counter }}" style="max-width: 100%; height: auto; margin-bottom: 10px;" />
{% endfor %}
</div>
{% elif myCategory.Logo %} {# 如果没有Banner组图,可以考虑将Logo作为备用Banner展示 #}
<div class="category-main-banner">
<img src="{{ myCategory.Logo }}" alt="{{ myCategory.Title }} 主Banner" style="max-width: 100%; height: auto;" />
</div>
{% endif %}
</div>
{% endif %}
在这个示例中,我们首先检查myCategory.Logo是否存在,如果存在则显示Logo图片。接着,我们检查myCategory.Images(Banner图组),如果存在则循环显示所有Banner图片。我们还加入了一个备用逻辑,即如果分类没有配置Banner图组,但有Logo,则可以将Logo作为主Banner图进行展示,这增加了模板的健壮性和灵活性。
综合应用:获取并显示所有信息
将上述元素整合起来,您可以在页面的任何位置展示一个指定分类的完整信息块:
{% categoryDetail featuredCategory with id="456" %} {# 获取ID为456的特色分类信息 #}
{% if featuredCategory %}
<section class="featured-category-block">
<h2 class="category-title">{{ featuredCategory.Title }}</h2>
{% if featuredCategory.Logo %}
<div class="category-header-logo">
<img src="{{ featuredCategory.Logo }}" alt="{{ featuredCategory.Title }} Logo" style="height: 60px; width: auto; float: left; margin-right: 15px;" />
</div>
{% endif %}
<div class="category-description-text">
<p>{{ featuredCategory.Description | safe }}</p>
</div>
<div style="clear: both;"></div> {# 清除浮动 #}
{% if featuredCategory.Images %}
<div class="category-hero-banners" style="margin-top: 20px;">
{% for banner in featuredCategory.Images %}
<img src="{{ banner }}" alt="{{ featuredCategory.Title }} 精选图 {{ forloop.Counter }}" style="width: 100%; height: auto; margin-bottom: 15px; border-radius: 5px;" />
{% endfor %}
</div>
{% endif %}
<a href="{{ featuredCategory.Link }}" class="view-all-button" style="display: block; text-align: center; padding: 10px 20px; background-color: #007bff; color: white; text-decoration: none; border-radius: 5px;">
查看所有 {{ featuredCategory.Title }} 内容
</a>
</section>
{% else %}
<p>抱歉,未能加载特色分类信息。</p>
{% endif %}
在实际应用中,您会希望将style属性替换为外部CSS样式,以保持代码的整洁和可维护性。通过这样的布局,访客可以一目了然地看到分类的Logo、吸引人的Banner图以及详细的描述,并能通过分类链接进一步探索相关内容。