How to display custom additional field data in the article model and achieve flexible content display?

In AutoCMS, the flexibility of content is one of its core advantages.We often need to display unique information beyond standard fields such as title, content description, product SKU code, release date, author information, or specific time and location of events.This personalized data can be perfectly carried and managed through the custom additional field function.But how to elegantly and flexibly present these meticulously entered custom data on the website front-end is the focus of many users.

This article will guide you to deeply understand the display mechanism of custom fields in Anqi CMS, allowing you to control the display of content with ease.

Why is it crucial to customize additional fields for content display?

The "Flexible Content Model" feature of AnQi CMS allows us to create or modify content models based on actual business needs and add any number of custom fields. Imagine if your website needs to display a series of electronic products, in addition to the product name and description, you might also need:

• 型号 (Model Number)：一个单行文本字段
• 品牌 (Brand)：一个下拉选择字段
• 保修期 (Warranty)：an integer field
• Detailed Parameters Table (Specification Table)：a multi-line text or rich text field
• Product Gallery (Product Gallery)A picture group field

Through custom fields, this information can be tightly bound to product content, greatly enriching the dimensions of the content.It is also of great importance that it structures the content, providing great convenience for subsequent frontend style design and data calls.

Set custom fields in the Anqi CMS backend

Firstly, we need to add these custom fields to the content model in the Anqi CMS backend. The operation path is usually:内容管理 -> 内容模型.

Here, you can select an existing model to modify, or create a brand new model.After entering the model editing interface, you will see the "Content Model Custom Fields" area.

1. Parameter nameThis is the field name displayed in the background management interface, for example, 'Product Model', 'Warranty Period'.
2. Call fieldThis is the unique identifier for the field called in the template, it is recommended to use meaningful lowercase English letters, for examplemodel_number/warranty_period. This name will be used when calling the template, be sure to remember.
3. field typeAccording to the data characteristics, choose a suitable type, such as 'Single-line text', 'Number', 'Multi-line text', 'Single selection', 'Multiple selection', or 'Dropdown selection'.If the content of your field needs to include HTML tags or Markdown syntax, it is recommended to select 'Multi-line text' and handle it with a corresponding filter on the frontend.
4. Is required：According to requirements set.
5. Default value：If the field has a preset value, it can be filled in here. For fields of selection type, the default value will be as an option list, one per line.

After setting up the fields, save the model.After that, when you publish or edit articles under this model, you will see these custom additional fields in 'Other Parameters', and you can fill in the corresponding data.

Display custom field data in the template

The template system of AnQi CMS adopts Django-like syntax, providing flexible tags and filters to handle data. There are mainly two ways to display custom fields:

1. Show the data of a single custom field

If you know the 'Field Name' of the custom field and only need to display specific one or two fields, you can usearchiveDetailLabel. This label is typically used to retrieve the detailed information of the current document, but it is also applicable to retrieve custom fields.

Suppose we have a custom field with the "Call Field" ofproduct_skuWe can display its value like this in the template:.

{# 显示当前文档的名为 'product_sku' 的自定义字段值 #}
<div>产品SKU：{% archiveDetail with name="product_sku" %}</div>

{# 如果你想为这个值指定一个变量名，方便后续处理，可以这样做： #}
{% archiveDetail productSkuValue with name="product_sku" %}
<div>产品SKU：{{ productSkuValue }}</div>

{# 你也可以指定其他文档的自定义字段，通过 id 或 token 参数： #}
<div>指定ID文档的产品SKU：{% archiveDetail with name="product_sku" id="10" %}</div>

Please note,nameThe value of the parameter is the name of the "Call Field" you set in the background.

2. Traverse to display data for all custom fields.

In some scenarios, you may want to dynamically list all custom fields and their values, for example, displaying a 'Detailed Parameters' list on the product detail page.archiveParamsLabels come into play. It can retrieve all additional parameters of the specified document (i.e., custom fields).

archiveParamsThe label will return an array containing all custom fields (default is sorted), each field includesName(parameter name, which is the Chinese name displayed in the background) andValue(Parameter value, that is, the data entered) attribute.

{# 假设我们正在一个文档的详情页，需要显示所有自定义字段 #}
<div>
    <h3>详细参数</h3>
    <ul>
        {% archiveParams params %}
            {% for item in params %}
                {# item.Name 是后台设置的“参数名”（中文），item.Value 是填入的数据 #}
                <li>{{ item.Name }}：{{ item.Value }}</li>
            {% endfor %}
        {% endarchiveParams %}
    </ul>
</div>

{# 如果你想排除某些字段不显示，可以结合 if 标签： #}
<div>
    <h3>部分参数</h3>
    <ul>
        {% archiveParams params %}
            {% for item in params %}
                {% if item.Name != '内部备注' and item.Name != '管理员可见' %}
                    <li>{{ item.Name }}：{{ item.Value }}</li>
                {% endif %}
            {% endfor %}
        {% endarchiveParams %}
    </ul>
</div>

Special considerations when displaying custom fields

• Rich text or Markdown contentIf your custom field type is multiline text and you expect it to parse HTML or Markdown syntax, you need to use|safeFilter. If the Markdown editor is enabled in the background, it can be used withrender=trueparameters.

  {# 假设 'detailed_description' 是一个存储富文本或Markdown的自定义字段 #}
  <div>
      <h3>详细描述</h3>
      {# 如果后台Markdown编辑器开启，且希望渲染Markdown #}
      {% archiveDetail detailDesc with name="detailed_description" render=true %}
      {{ detailDesc|safe }}
  
  
      {# 如果字段是普通HTML，或者Markdown已在后台处理成HTML #}
      {% archiveDetail plainHtmlDesc with name="detailed_description" %}
      {{ plainHtmlDesc|safe }}
  </div>
  

• image or file field：If your custom field is designed for uploading images (such as product gallery), its value will usually be a string containing a picture URL or an array of picture URLs.

  {# 假设 'main_image' 是一个单张图片的自定义字段 #}
  {% archiveDetail mainImage with name="main_image" %}
  {% if mainImage %}<img src="{{ mainImage }}" alt="主图" />{% endif %}
  
  
  {# 假设 'gallery_images' 是一个多张图片的自定义字段（数组） #}
  {% archiveDetail galleryImages with name="gallery_images" %}
  {% if galleryImages %}
      <div class="product-gallery">
          {% for imgUrl in galleryImages %}
              <img src="{{ imgUrl }}" alt="画廊图片" />
          {% endfor %}
      </div>
  {% endif %}
  

  Here, it is important to note,Imagesis a special built-in field, which can be directly looped as shown above.If your custom field is a single image upload, it will return a string path; if it is a multi-image upload, it may return a string array, depending on the field type and backend implementation.

• Select/Drop-down field typeThese fields are called directly in the templateitem.ValueIt will display the text value selected by the user. No additional processing is required.

Through these flexible calling methods, the safety CMS of