在安企CMS中,分类的描述(Description)和内容(Content)是网站内容组织和搜索引擎优化(SEO)的关键要素。有效地在前台页面展示这些信息,不仅能为访客提供清晰的导航和深入的信息,也能帮助搜索引擎更好地理解页面主题,从而提升网站的可见度。接下来,我们一起探讨如何在安企CMS的前台模板中灵活地展示分类的描述和内容。
一、理解分类描述与内容的价值
在安企CMS的后台,我们可以为每一个分类设置“分类简介”和“分类内容”。
- 分类简介(Description):通常是一段简短的文字,用于概括该分类的主题。它在SEO中扮演重要角色,常被用作页面的Meta Description,也会在列表页中作为分类的摘要信息展示。简洁而富有吸引力的描述能有效提升点击率。
- 分类内容(Content):则可以包含更详尽的文本、图片、视频等多媒体信息,用于深入介绍该分类所包含的主题。这对于用户深入了解某一领域或产品系列至关重要,也能为页面提供丰富的文本内容,增强SEO效果。
这些信息在后台的“内容管理” -> “文档分类”中进行编辑和管理。
二、在分类列表页展示描述(Description)
当我们需要在一个页面上列出多个分类,并显示它们的简短描述时,可以使用 categoryList 标签。这个标签常用于首页或栏目页,以展示当前页面下属的子分类或特定模型的分类。
例如,要在首页展示所有文章分类的标题和描述,可以在模板中使用如下代码:
{% categoryList categories with moduleId="1" parentId="0" %}
<div class="category-list-wrapper">
{% for item in categories %}
<div class="category-item">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
{# 直接通过 item.Description 获取分类简介 #}
<p class="category-description">{{ item.Description }}</p>
<a href="{{ item.Link }}" class="read-more">查看更多</a>
</div>
{% endfor %}
</div>
{% endcategoryList %}
在这段代码中,item 变量代表了 categoryList 循环中的每一个分类对象。通过 {{ item.Description }} 就可以直接访问并展示该分类的简介信息。通常,在列表页中,我们只会展示简短的描述,避免内容过长影响页面布局和加载速度。
三、在分类详情页展示描述(Description)和内容(Content)
在访客点击某个分类进入其详情页时,我们通常需要展示该分类的完整信息,包括其描述和详细内容。这时,categoryDetail 标签就派上用场了。这个标签专门用于获取当前页面的分类详细数据。
1. 展示分类描述(Description)
分类描述往往用于页面的顶部或关键位置,再次强调分类的核心信息:
<div class="category-header">
<h1>{% categoryDetail with name="Title" %}</h1>
<p class="category-page-description">
{# 通过 categoryDetail 标签获取当前分类的描述 #}
{% categoryDetail with name="Description" %}
</p>
</div>
这里,{% categoryDetail with name="Description" %} 会直接输出当前分类的简介。
2. 展示分类内容(Content)
分类内容是提供给访客最详尽信息的部分。安企CMS的分类内容支持富文本编辑,也可能包含HTML代码甚至Markdown格式。因此,在前端展示时需要特别注意内容的解析和渲染。
处理HTML内容:如果分类内容是富文本编辑器编辑的HTML,为了确保HTML标签能正确渲染而不是作为纯文本显示,我们需要使用
|safe过滤器。<div class="category-main-content"> {# 使用 categoryDetail 获取分类内容,并通过 |safe 过滤器确保HTML正确渲染 #} {% categoryDetail categoryFullContent with name="Content" %} {{ categoryFullContent|safe }} </div>在这里,我们首先将分类内容赋值给
categoryFullContent变量,然后使用{{ categoryFullContent|safe }}来安全地输出HTML内容。处理Markdown内容:如果您的安企CMS后台启用了Markdown编辑器,并且分类内容是以Markdown格式编写的,那么在前端展示时需要先将其转换为HTML。安企CMS提供了两种方式:
- 在标签中指定
render=true:<div class="category-main-content"> {# 指定 render=true 让安企CMS自动将Markdown内容转换为HTML #} {% categoryDetail categoryMarkdownContent with name="Content" render=true %} {{ categoryMarkdownContent|safe }} </div> - 使用
|render过滤器:如果您希望在模板中手动控制Markdown转换,或者内容来源不确定是否为Markdown,可以使用|render过滤器。
选择哪种方式取决于您的具体需求和内容管理习惯,但核心都是要确保内容能被正确解析和展示。<div class="category-main-content"> {# 使用 |render 过滤器将内容转换为HTML,再用 |safe 输出 #} {% categoryDetail categoryContent with name="Content" %} {{ categoryContent|render|safe }} </div>
- 在标签中指定
四、自定义分类字段的展示
安企CMS的强大之处在于其灵活的内容模型。如果您的分类所属模型定义了额外的自定义字段(例如“分类特色”、“产品型号”等),您也可以在分类详情页进行展示。
例如,如果您在分类模型中定义了一个名为“分类特色”的自定义字段,可以这样访问:
<div class="category-features">
<h4>分类特色</h4>
<p>{% categoryDetail with name="分类特色" %}</p>
</div>
或者,如果您想遍历所有自定义字段:
<div class="category-extra-info">
{% categoryDetail extras with name="Extra" %}
{% for field in extras %}
<p><strong>{{ field.Name }}:</strong>{{ field.Value }}</p>
{% endfor %}
</div>
这种方式特别适用于那些自定义字段较多,或者不确定具体字段名称的场景。
五、优化SEO:TDK标签的应用
分类描述(Description)的一个重要用途是作为页面的Meta Description,这对搜索引擎排名和用户点击决策有着直接影响。安企CMS提供了 tdk 标签来统一管理页面的TDK(Title,