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

In AnQi CMS, the flexibility of content is one of its core advantages.We often need to display unique information beyond standard fields such as product SKU codes, release dates, author information, or specific time and location of events.This personalized data, through the custom additional field function, can achieve perfect carrying and management.How to elegantly and flexibly present these carefully entered custom data on the website front-end is a 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 content display 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 an arbitrary number of custom fields. Imagine if your website needs to display a series of electronic products, in addition to product names and descriptions, you might also need:

• Model Number: A single-line text field
• Brand: A dropdown selection field
• WarrantyA numerical field
• Detailed parameter table (Specification Table)A multiline text or rich text field
• Product Gallery (Product Gallery)A picture group field

By custom fields, this information can be closely bound with product content, greatly enriching the dimensions of the content.It is more important that it structures the content, providing great convenience for subsequent front-end style design and data calls.

Set custom fields in Anqi CMS background

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 choose an existing model to modify or create a new one.After entering the model editing interface, you will see the "Content Model Custom Field" area.Click to add field, you need to fill in the following key information:

1. Parameter NameThis is the field name displayed in the background management interface, for example 'Product Model', 'Warranty Period'.
2. Field invocationThis is the unique identifier for the field called in the template, it is recommended to use meaningful lowercase letters, for examplemodel_number/warranty_periodThis name will be used when calling the template, be sure to remember it.
3. Field type: Choose an appropriate type based on the data characteristics, such as 'Single-line text', 'Number', 'Multi-line text', 'Single selection', 'Multiple selection', or 'Dropdown selection'.If the field content needs to include HTML tags or Markdown syntax, it is recommended to choose 'Multiline Text' and use the corresponding filter on the front end to process it.
4. Mandatory?: Set according to requirements.
5. Default valueIf the field has a preset value, it can be filled in here. For fields of selection type, the default value will be listed as an option list, one per line.

After setting up the field, save the model. After that, when you publish or edit the articles under the model, you will see these custom additional fields in the "Other Parameters" section, where you can enter the corresponding data.

Display custom field data in the template.

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

1. Show data for a single custom field

If you know the name of the custom field's 'reference field' and only need to display specific one or two fields, you can usearchiveDetailThe tag is usually used to retrieve detailed information about the current document, but it also applies to retrieving custom fields.

Assuming we have a custom field with the 'call field' ofproduct_skuWe can display its value in the template like this:

{# 显示当前文档的名为 '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 and display all custom field data

In certain scenarios, you may want to dynamically list all custom fields and their values, such as displaying a 'detailed parameters' list on a product details page. At this point,archiveParamsThe label comes into play. It can retrieve all the additional parameters of the specified document (i.e., custom fields).

archiveParamsThe tag returns an array containing all custom fields (default is sorted), each field includesName(parameter name, that is, the Chinese name displayed in the background) andValue(Parameter value, that is, the data entered) property.

{# 假设我们正在一个文档的详情页，需要显示所有自定义字段 #}
<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 consideration 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 field has the Markdown editor enabled in the background, it can also be配合render=truethe parameters for rendering.

  {# 假设 '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 fieldIf your custom field is designed to upload images (for example, a product gallery), the value will usually be a picture URL string, 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's something to note,Imagesis a special built-in field, which can be used directly as shown above.If your custom field is a single image upload, it will return a string path;If multiple images are uploaded, it may return a string array depending on the field type and backend implementation.

• Select/Dropdown type fieldThese 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, Anqi CMS's