在安企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,