How to display extra field data under the custom content model in AnQi CMS?

In AnQi CMS, the flexibility of the content model is one of its major highlights, allowing us to create and manage various types of content structures according to the actual business needs.Whether it is articles, products, activities, or any other information that requires specific fields to describe, it can be easily realized through a custom content model.When we add exclusive additional fields to these models, the next step naturally is how to accurately and beautifully display these valuable data on the website front-end.

This is not a complex task, AnQi CMS provides intuitive and convenient template tags to complete it.We will delve into the creation of custom fields and how to call and display these data in different types of pages (such as detail pages, list pages) step by step.

Define and configure custom fields

Before starting the display, we first need to ensure that the additional fields under the custom content model have been correctly defined and configured.This is like preparing a dedicated 'information table' for our content, with each additional field being a specific column in the table.

You can enter the model management interface by accessing the "Content Management" menu of the Anqi CMS backend and then selecting "Content Model".Here, you can choose to edit an existing content model, such as "Article Model" or "Product Model", or create a new content model as needed.

In the editing interface of the content model, find the section of 'Content Model Custom Fields'.Here, you can add new fields based on business requirements.

  • Parameter name:This is the Chinese name displayed in the background interface for this field, which is convenient for you to understand its purpose when managing content, such as 'article source', 'author email'.
  • Field call:This is the unique identifier used to call this field data in the front-end template,Make sure to use lowercase English letters,and ensure it is descriptive, for example,source/authorEmailThis name is case-sensitive, so it must be strictly matched when used.
  • Field Type:Safe CMS provides various field types to meet different data storage needs, including:
    • Single-line text:Applicable to short text, such as author name, external link.
    • Numbers:Only input numbers, such as price, inventory quantity.
    • Multi-line text:Applicable to longer text, such as product features, detailed introduction.
    • Single choice, multiple choice, dropdown selection:Data applicable to preset options, such as product color, size. These options need to be filled out one per line in the "Default Value".
  • Mandatory:Determine whether the user must fill in this field when publishing content.
  • Default value:If the field has a default value and it is not filled in when publishing content, the system will automatically use the value set here. For select-type fields, this is where you set the options available for selection.

After completing these configurations, when you publish or edit content under the corresponding model, you will see these custom fields appear in the collapsible area of "Other Parameters", waiting for you to fill in the data.

Display custom field data in the front-end template

The name of the "call field" in the custom field, is the key data we get in the template. The template engine of Anqi CMS supports syntax similar to Django, using double curly braces{{ 变量名 }}auto{% 标签 %}auto

autoarchiveDetailautocategoryDetailauto

When you are on the detail page of a single document (such as an article, product) or the detail page of a category, it is usually usedarchiveDetailorcategoryDetailLabel to get detailed data of the current page. There are several common ways to display custom field data:

Directly call by field name:This is the most direct way. If your custom field's "call field" isauthor, then you can call it like this in the document detail page:

<div>作者：{% archiveDetail with name="author" %}</div>

or if you have already assigned the document details data to a variable (for examplearchive), you can also access it directly using the dot notation:

<div>作者：{{ archive.author }}</div>

For the category detail page, the logic is similar. If the field called by the custom field iscustomBanner, you can set it like this incategoryDetailuse the label:

<div>自定义Banner：<img src="{% categoryDetail with name='customBanner' %}" alt="分类自定义图片" /></div>

Traverse all custom fields:Sometimes, you may want to dynamically display all the defined additional fields and their values on the page without specifying them one by one.archiveParamsLabels are born for this, they can retrieve all custom parameters of the current document or a specified document.

{% archiveParams params %}
    <div>
        <h3>额外参数信息：</h3>
        {% for item in params %}
            <div>
                <span>{{ item.Name }}：</span>
                <span>{{ item.Value }}</span>
            </div>
        {% endfor %}
    </div>
{% endarchiveParams %}

Hereitem.NameIt corresponds to the "parameter name" (in Chinese) you set in the background.item.ValueThen it is the actual data you enter while editing the content.

For the category detail page, you can usecategoryDetailCombinename="Extra"to iterate over custom fields:

{% categoryDetail extras with name="Extra" %}
    <h3>分类额外信息：</h3>
    {% for field in extras %}
        <div>{{ field.Name }}：{{ field.Value }}</div>
    {% endfor %}
{% endcategoryDetail %}

To handle multi-line text and HTML content:If your custom field type is 'Multi-line text' and you enter content with HTML tags or Markdown formatting, the direct output may cause the content to be escaped, HTML tags may not be parsed by the browser, or Markdown formatting may not be rendered correctly.

  • For ordinary HTML content, you need to use|safea filter to tell the template engine that this content is safe and does not need to be escaped:
    
<div>详细介绍：{{ archive.descriptionDetail|safe }}</div>
  • If the content is in Markdown format, you need to first use|rendera filter to render it into HTML, and then use|safeFilter:
    
<div>Markdown内容：{{ archive.markdownContent|render|safe }}</div>

to handle multi-select or group chart fields:If your custom field is of the "multiple choice" type or a "gallery" type used to upload multiple images, they will usually be returned as an array object in the template. At this time, you need to useforLoop to traverse and display each value.

Suppose you defined a variable namedproductImagesa group field:

{% archiveDetail productImgs with name="productImages" %}
    <ul class="product-gallery">
        {% for imgUrl in productImgs %}
            <li><img src="{{ imgUrl }}" alt="产品图片" /></li>
        {% endfor %}
    </ul>
{% endarchiveDetail %}

or directly fromarchivethe variable and loop:

<ul class="product-gallery">
    {% for imgUrl in archive.productImages %}
        <li><img src="{{ imgUrl }}" alt="产品图片" /></li>
    {% endfor %}
</ul>

2. In the document list page (archiveListauto

In the document list page, you usually usearchiveListTags cycle display multiple articles or products. In each cycle ofitemauto, You can directly access its custom field data by using the dot notation.

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-card">
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <p>作者：{{ item.author }}</p> {# 直接访问自定义字段 'author' #}
            <p>文章来源：{{ item.source }}</p> {# 直接访问自定义字段 'source' #}
            <div class="summary">{{ item.Description }}</div>
            {% if item.productImages %} {# 检查组图字段是否存在 #}
                <div class="thumb-preview">
                    <img src="{{ item.productImages[0] }}" alt="封面图" /> {# 显示第一张图片 #}
                </div>
            {% endif %}
            <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
        </div>
    {% empty %}
        <p>当前列表没有任何内容。</p>
    {% endfor %}
{% endarchiveList %}

Please note that you can directly access custom fields (such asitem.authorIt is usually the most efficient way. If you still need to retrieve all custom fields within the loop and iterate over the tags, you must pass the current item's ID:archiveParams标签遍历，则需要传入当前列表项的ID：

`twig {% archiveList archives with type=“list” limit=“5” %}

{% for item in archives %}
    <div class