如何自定义文章详情页的显示布局，包括图片、描述和自定义参数

在安企CMS中，文章详情页的显示布局拥有极高的灵活性，无论是展示文章的核心内容、精美图片，还是自定义的业务参数，系统都提供了直观且强大的方式来帮助您实现个性化的需求。这得益于AnQiCMS基于Django类似语法的模板引擎，它让内容与设计分离，使得即使是不具备深厚编程背景的用户也能通过简单的标签进行布局调整。

理解文章详情页的构成

在AnQiCMS中，文章（或产品，或其他内容模型）的详情页通常由一个特定的模板文件控制。默认情况下，这些模板文件位于 /template 目录下的相应内容模型文件夹内，例如，文章模型的详情页可能对应 archive/detail.html。系统还允许您为特定分类或特定文章设置独立的模板，通过在后台指定模板文件名即可实现，例如 archive/detail-123.html 会专门用于ID为123的文章，或者在文章编辑时选择自定义模板，如 download.html。

要自定义文章详情页的布局，核心在于理解如何在这些模板文件中调用文章的各项数据。AnQiCMS提供了丰富的模板标签，其中最常用且关键的便是 archiveDetail 和 archiveParams。

定制核心内容展示

文章详情页最基本的组成部分是标题、内容和简介。在模板中，您可以直接通过 {{archive.字段名}} 或使用 archiveDetail 标签来获取和显示这些信息。

  1. 标题与描述： 文章的标题 (Title) 和描述 (Description) 是用户首先接触到的信息。您可以通过以下方式轻松地将它们呈现在页面上：

    <h1>{{archive.Title}}</h1>
<p>{{archive.Description}}</p>

    或者使用 archiveDetail 标签：

    <h1>{% archiveDetail with name="Title" %}</h1>
<p>{% archiveDetail with name="Description" %}</p>

  2. 文章内容： 文章的详细内容 (Content) 通常是用户关注的重点。由于内容可能包含HTML标签，为了确保它们能被浏览器正确解析而不是作为纯文本显示，您需要使用 |safe 过滤器。如果您的内容使用了Markdown编辑器，并且希望在前端渲染为HTML，可以配合 render=true 参数。同时，为了优化加载性能，可以利用 lazy 参数为图片添加懒加载属性。

    <div class="article-content">
    {% archiveDetail articleContent with name="Content" render=true lazy="data-src" %}
    {{articleContent|safe}}
</div>

    这里，articleContent 是您为内容定义的变量名，render=true 表示将Markdown转换为HTML，lazy="data-src" 会将内容中的 img src 属性替换为 data-src，方便前端JS实现图片懒加载。

  3. 图片展示： 文章详情页的图片通常包括封面图（缩略图、大图）以及文章内容中的图片。AnQiCMS为这些提供了不同的标签和字段：

    • 封面大图 (Logo) 和缩略图 (Thumb)： 如果文章设置了封面图，可以直接调用： 
      
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
    • 组图 (Images)： 如果文章关联了多张图片（例如产品详情页的轮播图），Images 字段会返回一个图片地址的数组。您可以使用 for 循环来遍历并显示它们： 
      
<div class="product-gallery">
    {% archiveDetail productImages with name="Images" %}
    {% for img_url in productImages %}
        <img src="{{img_url}}" alt="产品图" />
    {% endfor %}
</div>
      这些图片会根据后台“内容设置”中的规则进行处理（如WebP转换、自动压缩、缩略图生成方式），但模板中您只需要调用其地址即可。

  4. 其他标准字段： 除了上述核心内容，您还可以灵活展示其他与文章相关的标准信息，例如发布时间、浏览量、所属分类和标签等。

    • 发布时间 (CreatedTime)： 需要结合 stampToDate 标签进行格式化： 
      
<span>发布于：{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}</span>
    • 浏览量 (Views)： 
      
<span>阅读量：{% archiveDetail with name="Views" %}</span>
    • 所属分类 (Category)： 可以通过 archive.Category 访问分类对象，或者使用 categoryDetail 标签： 
      
<span>分类：<a href="{{archive.Category.Link}}">{{archive.Category.Title}}</a></span>
    • 标签 (Tag)： 使用 tagList 标签获取并循环展示： 
      
<div class="article-tags">
    {% tagList tags with itemId=archive.Id %}
    {% for tag_item in tags %}
        <a href="{{tag_item.Link}}">{{tag_item.Title}}</a>
    {% endfor %}
    {% endtagList %}
</div>

充分利用自定义参数

安企CMS的强大之处在于其灵活的内容模型功能，允许您为不同类型的内容添加任意数量的自定义字段，这些字段同样可以在文章详情页中进行展示。

  1. 后台设置：创建自定义字段 在AnQiCMS后台，导航至 内容管理 -> 内容模型。选择您希望添加自定义参数的内容模型（例如“文章模型”或“产品模型”），点击“编辑”。在“内容模型自定义字段”区域，您可以根据业务需求添加各种类型的字段，如单行文本（用于“作者”、“来源”）、数字（用于“价格”、“库存”）、多行文本（用于“产品特点”）、单选/多选/下拉选择（用于“颜色”、“尺码”等）。

    例如，为“产品模型”添加一个“产品型号”的单行文本字段，参数名为 product_model，或者一个“生产日期”的日期字段。

  2. 模板调用：archiveParams 标签 一旦在后台内容模型中定义了自定义参数，您就可以在文章详情页的模板中使用 archiveParams 标签来获取并显示这些数据。

    • 遍历所有自定义参数： 如果您想将文章所有自定义参数都展示出来，可以使用一个 for 循环来遍历 archiveParams 返回的参数列表：

      <div class="custom-params">
    <h3>附加信息</h3>
    {% archiveParams params %}
    {% for item in params %}
    <p>
        <span>{{item.Name}}：</span> <!-- 参数的中文名称 -->
        <span>{{item.Value}}</span> <!-- 参数的值 -->
    </p>
    {% endfor %}
    {% endarchiveParams %}
</div>

      这种方式的优点是无需预知所有自定义字段的名称，模板具有很强的通用性。

    • 调用特定的自定义参数： 更常见的情况是，您可能只需要展示某一个或几个特定的自定义参数。AnQiCMS支持直接通过字段名访问它们，就像访问内置字段一样：

      <p>产品型号：{{archive.product_model}}</p>
<p>生产日期：{{archive.production_date}}</p>

      或者使用 archiveDetail 标签：

      <p>产品型号：{% archiveDetail with name="product_model" %}</p>
<p>生产日期：{% archiveDetail with name="production_date" %}</p>

      这种方式更加精确，适合于在页面特定位置展示特定信息。例如，产品详情页可能需要将“产品型号”放在标题下方，而将“颜色”、“尺寸”等作为商品属性列表展示。

实际操作：修改模板文件

  1. 确定模板文件位置： 根据您的内容模型，找到对应的详情页模板文件。例如，对于文章模型，通常是 template/您的模板名称/archive/detail.html。如果您为特定文章或分类指定了自定义模板，请编辑该文件。
  2. 备份文件： 在进行任何修改之前，务必备份原始模板文件，以防意外情况。
  3. 编辑模板： 您可以使用AnQiCMS后台的“模板设计”功能在线编辑模板代码，也可以将模板文件下载到本地，使用您惯用的代码编辑器进行修改，然后上传覆盖。
  4. **保存并测试