在网站内容运营中,产品详情页是连接用户与产品的关键环节,其内容的丰富性、结构的清晰度以及展示的灵活性直接影响用户的购买决策和网站的转化率。安企CMS(AnQiCMS)以其强大的灵活内容模型功能,为我们提供了一个理想的解决方案,让我们能够摆脱传统CMS固定字段的束缚,根据产品特性和业务需求,构建出高度定制化、富有吸引力的产品详情页。

一、灵活内容模型:定制产品详情的基础

安企CMS的核心优势之一便是其灵活的内容模型。这意味着我们不再需要迁就系统预设的字段,而是可以根据具体的产品类型和信息结构,自由定义所需的字段。例如,对于一个电子产品,我们可能需要“CPU型号”、“内存大小”、“屏幕尺寸”等字段;而对于一件服装,则可能需要“材质”、“颜色”、“尺码”、“洗涤说明”等。这种高度的灵活性,正是我们打造独特产品详情页的基础。

在安企CMS后台,您可以通过“内容管理”下的“内容模型”功能,轻松管理和创建自定义模型。系统内置了“产品模型”,我们可以直接在此基础上进行修改和扩展,或者根据需要创建全新的产品模型。在定义模型时,除了基本的模型名称和URL别名外,最关键的便是“内容模型自定义字段”的设置。这里允许我们添加任意数量和类型的字段,以精确匹配产品的所有属性。例如:

  • 产品图片组:可设置为“多行文本”或“附件上传”类型,用于上传和存储多张产品图片。
  • 价格/促销价:设置为“数字”类型。
  • 颜色/尺寸/型号:可设置为“单项选择”、“多项选择”或“下拉选择”,并预设选项值。
  • 产品卖点/特性:设置为“多行文本”,支持富文本编辑器,用于突出产品优势。
  • 包装清单/售后服务:设置为“多行文本”。
  • 自定义参数:如“重量”、“材质”、“品牌”、“适用人群”等,根据具体产品类型灵活定义,类型可以是“单行文本”、“数字”等。

通过这种方式,我们可以确保每个产品详情页都能承载其特有的所有信息,且这些信息在后台管理时条理清晰,前端展示时也更加精准。

二、构建产品分类与发布产品内容

拥有了自定义的产品模型后,下一步便是为产品设置合理的分类体系,并录入详细的产品内容。

  1. 创建产品分类: 在“内容管理”的“文档分类”中,选择我们定义好的产品模型,创建如“数码产品”、“服饰鞋包”、“家居生活”等大类,并在其下设立更细致的子分类。每个分类都可以独立设置SEO标题、关键词和描述,以及自定义的分类模板,以便在列表页展示时呈现不同的风格。

  2. 发布产品内容: 进入“内容管理”的“发布文档”页面(对于产品模型,这里就相当于发布产品),选择对应的产品分类。此时,界面的核心区域将根据所选分类所属的产品模型,动态显示所有我们之前自定义的字段。 在这里,我们可以:

    • 填写产品名称(作为文章标题)。
    • 撰写产品简介和详细描述,利用富文本编辑器插入图片、视频、表格等丰富内容。
    • 上传多张产品图片到“产品图片组”自定义字段中。
    • 为“价格”、“颜色”、“尺寸”等自定义字段填入具体数值或选择预设选项。
    • 设置产品的推荐属性(如“热门”、“新品”),方便在首页或其他区域调用。
    • 为产品添加多个Tag标签,增加内容关联性,提升用户发现产品的几率。
    • 特别注意SEO设置:为每个产品详情页设置独立的SEO标题、关键词和描述,优化搜索引擎可见度。如果需要,还可以自定义URL别名,使URL更加友好和具有描述性。
    • 利用定时发布功能,实现产品内容的精准上线,满足营销活动的需要。

这种所见即所得的发布体验,大大简化了内容录入的流程,确保了内容的准确性和完整性。

三、前端展示与模板灵活调用

后台内容模型构建得再完善,最终还是要通过前端模板展示给用户。安企CMS提供了强大且灵活的模板标签体系,让我们能够轻松地将自定义内容呈现在网站上。

  1. 产品详情页模板 ({模型table}/detail.html): 在产品详情页的模板文件中,我们可以使用 archiveDetail 标签来获取当前产品的各项详细信息。

    • 基础信息:直接通过 {{archive.Title}} 获取产品名称,{{archive.Description}} 获取产品简介。
    • 自定义图片组:如果自定义了一个名为 productImages 的字段来存储多张产品图片,可以通过 {% archiveDetail productImages with name="productImages" %} 获取,然后使用 {% for img in productImages %} 循环展示。
    • 自定义参数:可以通过 {% archiveParams params %} 标签循环遍历所有自定义字段并展示其名称和值,如:
      
      {% archiveParams params %}
      {% for item in params %}
      <div>
          <span>{{item.Name}}:</span>
          <span>{{item.Value}}</span>
      </div>
      {% endfor %}
      {% endarchiveParams %}
      
      如果您只想展示某个特定字段,例如“价格”,可以直接使用 {% archiveDetail with name="price" %}
    • 富文本内容:对于产品详细描述等包含HTML内容或Markdown格式的字段,应使用 {{archiveContent|safe}}{{archiveContent|render|safe}} 确保内容正确解析和展示,避免被转义。
  2. 产品列表页模板 ({模型table}/list.html): 在产品列表页,我们使用 archiveList 标签来获取产品列表。

    • 根据产品分类ID(categoryId)、推荐属性(flag)或排序方式(order)等参数,灵活调用产品数据。
    • 列表中可以展示产品的缩略图({{item.Thumb}})、名称({{item.Title}})和简介({{item.Description}})。
    • 若想在列表页展示自定义字段(如价格),也可以通过 {% archiveParams params with id=item.Id %} 获取并显示。
    • 结合 archiveFilters 标签,可以在列表页实现多维度、动态的产品筛选功能,如按颜色、尺寸、价格区间等筛选,极大地提升用户体验。
  3. SEO与用户体验优化

    • 动态TDK:利用 tdk 标签在每个产品详情页