How to display extra field data under a custom content model in Anqi CMS?

In AnQi CMS, the flexibility of the content model is a major highlight of the project, allowing us to create and manage various types of content structures according to the actual business needs.Whether it is an article, product, event, or any other information that requires specific fields to describe, it can be easily achieved through a custom content model.After we add exclusive additional fields to these models, the next natural step is how to accurately and beautifully display this 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 this data on different types of pages (such as detail pages, list pages) step by step.

Define and configure custom fields

Before starting the presentation, 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 access the 'Content Management' menu in the Anqi CMS backend and then select 'Content Model' to enter the model management interface.Here, you can choose to edit the existing content model, such as 'Article Model' or 'Product Model', or create a new content model as needed.

In the content model editing interface, find the "content model custom field" section.In here, you can add new fields according to your business needs.Each field must be set to the following key information:

  • Parameter name:This is the Chinese name displayed in the background interface, which is convenient for you to understand its purpose when managing content, such as 'article source', 'author email'.
  • Call field:This is the unique identifier used to call this field data in the front-end template,Please use lowercase English lettersMake sure it is descriptive, for examplesource/authorEmail. This name is case-sensitive, so it needs to be strictly matched when used.
  • Field type:AnQi 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.
    • Number:Only input numbers, such as price, stock quantity.
    • Multi-line text:Applicable to longer text, such as product features, detailed introduction.
    • Single choice, multiple choice, dropdown choice:Data applicable to preset options, such as product color, size. These options need to be filled in one per line in the "default value".
  • Mandatory?:Determine whether the user must fill in this field when publishing content.
  • Default:If the field has a default value and it is not filled in when publishing the content, the system will automatically use the value set here. For selection fields, this is where the options to choose from are set.

After completing these settings, when you publish or edit content under the corresponding model, you will see these custom fields appear in the folded 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 custom field "callback field" is the key we use to retrieve data in the template. The Anqi CMS template engine supports syntax similar to Django, using double curly braces{{ 变量名 }}Output variables and use{% 标签 %}Execute logic operations.

1. In the document detail page (archiveDetail) or category detail page (categoryDetail) display

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 usedarchiveDetailorcategoryDetailTag to get the detailed data of the current page. There are several common ways to display custom field data:

Call directly 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 detail 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 calling field of the custom field iscustomBanner, you can in thecategoryDetaillabel:

<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.archiveParamsThe tag is created for this purpose, it 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" you set in the background (displayed in Chinese), anditem.ValueThe actual data you enter during content editing.

For category detail pages, you can use.categoryDetailCombinename="Extra"To iterate through custom fields:

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

To process multiline text and HTML content:If your custom field type is 'Multiline Text' and you enter content with HTML tags or Markdown formatting, the direct output may cause content escaping, HTML tags may not be parsed by the browser, or Markdown formatting may not render 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 use|rendera filter to render it into HTML, then use|safeFilter:
    
<div>Markdown内容：{{ archive.markdownContent|render|safe }}</div>

to handle multiple choice or group chart fields:If your custom field is a 'Multiple Choice' or a 'Gallery' type used for uploading 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.

Assuming you have defined a variable namedproductImagesgroup chart 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 fromarchivevariable and loop through:

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

2. In the document list page(archiveList) display

In the document list page, you usually usearchiveListTags cycle through multiple articles or products. In each cycle,itemYou can directly access its custom field data through the dot.

{% 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.author) is usually the most efficient way. If you still need to access all custom fields within a 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