如何自定义文章、产品、分类页面的模板布局?

在安企CMS中,灵活地自定义页面模板布局是提升网站个性化和用户体验的关键一步。无论是文章、产品详情页,还是分类列表页,安企CMS都提供了强大而直观的工具,让您无需深入编程,也能轻松打造独具风格的页面。

让我们一起探索如何在安企CMS中,将您的设计理念变为现实。

安企CMS 模板基础概览

在开始自定义之旅前,了解一些安企CMS模板的基本约定会非常有帮助。所有的模板文件都存放在网站根目录下的 /template 文件夹中,而模板所使用的样式(CSS)、JavaScript脚本和图片等静态资源,则统一放置在 /public/static/ 目录。

安企CMS的模板语法简洁高效,类似于Django模板引擎的风格。您会遇到两种主要的标记:

  • 双花括号 {{变量}}:用于输出变量或数据。
  • 单花括号和百分号 {% 标签 %}:用于实现逻辑控制,如条件判断(if)、循环(for)以及调用特定的功能标签。

所有模板文件均采用UTF-8编码,确保内容正确显示。此外,安企CMS支持多种网站模式,包括自适应、代码适配以及PC+移动端独立站点模式,这表示您可以为移动端内容创建单独的模板,它们通常存放在模板目录下的 mobile/ 子目录中。

核心:理解模板文件结构与命名约定

要自定义页面布局,首先需要掌握模板文件的存放位置和命名规则。每一套模板都在 /template 下拥有自己的独立目录,其中包含一个 config.json 文件,用于描述模板的基本信息。

安企CMS支持两种模板组织模式:文件夹组织模式和扁平化文件组织模式。无论选择哪种,都有一些约定俗成的默认模板文件:

  • 首页: 通常是 index/index.htmlindex.html
  • 模型首页(如文章或产品列表首页): {模型table}/index.html{模型table}_index.html
  • 文档(文章/产品)详情页: {模型table}/detail.html{模型table}_detail.html
  • 文档(文章/产品)列表页(分类页): {模型table}/list.html{模型table}_list.html
  • 单页面详情页: page/detail.htmlpage.html

自定义模板的威力:

除了这些默认名称,安企CMS最强大的地方在于其灵活的自定义模板命名能力。这意味着您可以为特定的文章、产品或分类页面指定独一无二的模板文件。例如:

  • 如果您有一篇ID为10的文章,想要一个专属布局,可以创建一个名为 article/detail-10.html 的模板。
  • 如果有一个ID为5的产品分类,您希望其列表页与众不同,可以创建 product/list-5.html
  • 对于“关于我们”这样的单页面,您可以设计一个 page/about.html 模板,并在后台创建该单页面时,将其“单页面模板”设置为 about.html

接下来,我们将分模块详细讲解如何利用这些能力。

定制文章与产品详情页模板

文章和产品在安企CMS中都属于“文档”范畴,它们共用一套灵活的内容模型体系。

  1. 创建自定义字段(如果需要): 许多时候,默认的标题、内容等字段可能不足以展示您所需的所有信息。例如,产品可能需要“型号”、“品牌”、“技术参数”等字段,文章可能需要“作者来源”、“发布机构”等。 您可以在后台进入 “内容管理” -> “内容模型”,编辑或新增模型,然后为该模型添加自定义字段。这里支持单行文本、数字、多行文本、单选、多选、下拉选择等多种字段类型。这些自定义字段将极大地丰富您的内容展示能力。

  2. 在后台指定模板: 当您编辑或发布一篇新文章或产品时,在编辑界面的“其他参数”部分,会找到一个名为 “文档模板” 的字段。在这里,您可以填写您为该特定文档创建的自定义模板文件名,例如 article_special_layout.htmlproduct_showcase.html。请确保这个模板文件实际存在于您的模板目录中。

  3. 在模板中调用数据: 在自定义的详情页模板(例如 article/detail.html 或您自定义的 article_special_layout.html)中,您可以使用各种标签来调取内容。

    • 基础内容:
      • 文章/产品标题:{{archive.Title}}
      • 文章/产品内容:{{archive.Content|safe}} (注意这里的 |safe 过滤器,它能确保HTML代码被正确解析而不是转义显示)
      • 缩略图:<img src="{{archive.Thumb}}" alt="{{archive.Title}}" />
      • 发布时间:{{stampToDate(archive.CreatedTime, "2006-01-02")}}
      • 浏览量:{{archive.Views}}
    • 自定义字段: 如果您的内容模型定义了额外的字段(例如,您添加了一个名为 product_model 的产品型号字段),您可以通过以下方式调用:
      • 直接调用:`{% archiveDetail with name=”