在网站运营中,清晰且信息丰富的分类展示是吸引访客、提升用户体验和优化搜索引擎排名的关键。安企CMS(AnQiCMS)提供了一套直观而强大的模板标签系统,让您能够灵活地获取并呈现网站上各类分类的详细信息,例如分类Logo和简介,从而打造更具吸引力的内容布局。
了解分类信息的管理与配置
在安企CMS的后台,分类信息的管理非常方便。当您进入“内容管理”下的“文档分类”进行添加或编辑时,会看到“分类名称”、“分类简介”、“缩略图”(通常用于Logo)以及“Banner图”等选项。这些字段允许您为每个分类填充专属的描述性文字和视觉元素。
- 分类名称:直接用于前台显示,是分类的标识。
- 分类简介:为该分类提供简要描述,这不仅有助于访客快速理解分类主题,也是搜索引擎优化(SEO)中
description标签的重要内容。 - 缩略图:通常用作分类的Logo或小图标识,让分类在视觉上更具辨识度。
- Banner图:用于分类页面的顶部横幅,可上传多张图片形成轮播效果,提供更丰富的视觉体验。
这些在后台配置好的信息,都是通过模板标签在前台调用的基础。
获取单个分类的详细信息:categoryDetail标签
当您需要在一个页面中(例如某个分类的详情页,或者在特定位置展示某个固定分类的信息时),获取并显示一个分类的详细信息时,categoryDetail标签是您的理想选择。
这个标签的使用方式非常简洁,您可以通过name参数指定要获取的字段,并通过id或token参数来定位具体的分类。
基础用法:获取当前页面分类的Logo和简介
假设您正在编辑一个分类页面的模板,希望显示当前分类的Logo和简介:
{# 获取当前分类的Logo #}
<img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
{# 获取当前分类的名称 #}
<h2>{% categoryDetail with name="Title" %}</h2>
{# 获取当前分类的简介 #}
<p>{% categoryDetail with name="Description" %}</p>
{# 获取当前分类的链接 #}
<a href="{% categoryDetail with name="Link" %}">查看更多</a>
在上述代码中,{% categoryDetail with name="..." %}会自动识别当前页面的分类,并提取相应的字段。alt属性的设置对于SEO和图片可访问性都非常重要,建议使用Title作为alt文本。
指定分类获取信息:通过ID或URL别名
如果您想在网站的任何位置显示一个特定分类(例如ID为1的“公司新闻”分类)的Logo和简介,可以这样做:
{# 获取ID为1的分类Logo #}
<img src="{% categoryDetail with name="Logo" id="1" %}" alt="{% categoryDetail with name="Title" id="1" %}" />
{# 获取ID为1的分类名称 #}
<h3>{% categoryDetail with name="Title" id="1" %}</h3>
{# 获取ID为1的分类简介 #}
<p>{% categoryDetail with name="Description" id="1" %}</p>
{# 获取ID为1的分类链接 #}
<a href="{% categoryDetail with name="Link" id="1" %}">前往公司新闻</a>
同样,您也可以使用分类的URL别名(token)来指定分类,这在别名是固定且易于记忆的情况下很方便。
{# 获取URL别名为'about-us'的分类Logo #}
<img src="{% categoryDetail with name="Logo" token="about-us" %}" alt="{% categoryDetail with name="Title" token="about-us" %}" />
批量获取与列表展示:categoryList标签
在很多情况下,您需要在一个页面上展示多个分类,例如网站导航、首页的分类模块或侧边栏。这时,categoryList标签就派上用场了。它允许您循环遍历并显示一系列分类的Logo、名称和简介等信息。
获取顶级分类列表及其Logo与简介
假设您想在首页展示所有顶层分类的Logo、名称和简介:
<ul class="category-grid">
{% categoryList categories with moduleId="1" parentId="0" %} {# moduleId指定模型,parentId="0"获取顶级分类 #}
{% for item in categories %}
<li class="category-item">
<a href="{{ item.Link }}">
{% if item.Logo %} {# 检查Logo是否存在,避免空图片标签 #}
<img src="{{ item.Logo }}" alt="{{ item.Title }}" class="category-logo" />
{% endif %}
<h4>{{ item.Title }}</h4>
<p class="category-description">{{ item.Description }}</p>
</a>
</li>
{% empty %}
<li>暂无分类信息。</li>
{% endfor %}
{% endcategoryList %}
</ul>
在上述代码中:
moduleId="1"通常用于指定“文章模型”,您可以根据实际需求调整。parentId="0"表示只获取没有任何上级分类的顶级分类。{% for item in categories %}循环遍历每个分类。item.Link、item.Title、item.Logo、item.Description则分别获取当前循环分类的链接、名称、Logo图片地址和简介。{% if item.Logo %}是一个非常实用的条件判断,确保只有在Logo图片确实存在时才渲染<img>标签,避免页面上出现破碎的图片图标,提升用户体验。
显示子分类列表及其信息
您还可以根据需要,获取某个分类下的子分类列表,并显示它们的Logo和简介。例如,在一个分类页面中,显示其下的所有子分类:
<h3>子分类列表</h3>
<ul class="sub-category-list">
{% categoryList subCategories with parentId=category.Id %} {# 假设category.Id是当前分类的ID #}
{% for subItem in subCategories %}
<li>
<a href="{{ subItem.Link }}">
{% if subItem.Thumb %} {# 子分类常用Thumb作为缩略图 #}
<img src="{{ subItem.Thumb }}" alt="{{ subItem.Title }}" class="sub-category-thumb" />
{% endif %}
<h5>{{ subItem.Title }}</h5>
<small>{{ subItem.Description }}</small>
</a>
</li>
{% empty %}
<li>当前分类下暂无子分类。</li>
{% endfor %}
{% endcategoryList %}
</ul>
这里,parentId=category.Id表示获取当前分类(由categoryDetail标签或URL自动识别)的子分类。在循环中,我们使用了subItem.Thumb作为Logo,因为在后台分类设置中,Logo和缩略图可能略有不同,Thumb通常用于列表中的小图。
总结
安企CMS的categoryDetail和categoryList标签为网站的分类信息展示提供了极大的灵活性。通过它们,您可以轻松