How to define custom fields in the content model for AnQiCMS front-end display?

AnQiCMS's flexible content model is one of its core strengths, allowing us to define unique fields for different types of content according to actual business needs, thus freeing ourselves from the constraints of the fixed content structure of traditional CMS.When we have created these custom fields, the next critical step is to display them elegantly on the website frontend.

This article will introduce in detail how to define custom fields in the AnQiCMS backend, as well as how to flexibly call and display this information in the frontend template, making your website content more personalized and practical.

一、In the background content model, define custom fields

In AnQiCMS, all content publishing is based on 'Content Model'.Whether it is an article, product, or other custom type, it corresponds to a specific content model.To display custom fields, we first need to add these fields to the corresponding content model.

  1. Enter content model management

  2. Add Custom FieldsIn the model editing interface, you will find the "Content Model Custom Fields" area.Here is where we define personalized fields.

    • Parameter name (Name)This is the Chinese name displayed on the background management interface and editing page for the field, which is convenient for you to understand and manage, such as "article source
    • Call Field (FieldName)This is the unique identifier used in the front-end template to call this field, it must bein English lowercase lettersFor example, if the parameter name is "article source", you can set the called field tosourceIf the parameter name is "Product Model", it can be set tomodel_numberRemember this "Call Field", it is the key for front-end display.
    • Field Type (Type)：选择适合您内容类型的字段，例如：English
      • 单行文本：适用于简短的文字内容，如作者、短标题。English
      • 数字：只允许输入数字。English
      • 多行文本：适用于较长的文字描述。English
      • 单项选择/多项选择/下拉选择：Provide preset options for selection, the option content is set in the "default value", one per line.
    • Is it required (Required)：Determine whether this field is required to be filled in when publishing content.
    • Default value (Content)：Set an initial value or provide options (for select type fields).

    For example, let's say we want to add an 'author email' field to the 'article model' to facilitate direct contact by readers. We can set it up like this:

    • Parameter name: author email
    • Field call:author_email
    • Field Type: Single Line Text
    • Required: No
    • Default Value: Empty

    After adding the field, remember to click Save to make the changes take effect.

II. Display custom fields in the front-end template

After the custom field is defined and published, we can display them on the front-end template of the website.AnQiCMS uses a template engine syntax similar to Django, calling data through specific tags.article/detail.htmlorproduct/detail.html）in it.

In the template file, you can choose two main ways to display custom fields: directly calling a specific field or iterating over all custom fields.

  1. Directly call the specific custom fieldIf you know which custom field to display, and it is an independent value that does not require looping (such as text, number), you can use it directlyarchiveDetailLabel to get its value.

    Assuming you have defined a "Article Source" field in the background, its "Call Field" issourceThen, in the article detail page template, you can call it directly and display it:

    <p>文章来源：{% archiveDetail with name="source" %}</p>

    If your custom field name isauthor_emailYou can call it like this as well:

    <p>联系作者：<a href="mailto:{% archiveDetail with name="author_email" %}">{% archiveDetail with name="author_email" %}</a></p>

    This method is concise and clear, suitable for scenarios where precise control of the display position and format of a specific field is required.

  2. Loop through all custom fields.If you want to display all custom fields (or you are not sure about the specific fields, but want to display them uniformly) in the document detail page,archiveParamsLabel. This label will return an array or map containing all custom fields, which you can iterate over to dynamically display.

    archiveParamsTags will return a sorted array by default, each element containingName(parameter name, that is, the Chinese name set in the background) andValue(field value).

    <div>
    <h3>其他参数</h3>
    {% archiveParams params %}
        {% for item in params %}
            <p>{{item.Name}}：{{item.Value}}</p>
        {% endfor %}
    {% endarchiveParams %}
</div>

    This code will iterate over all the custom fields defined in the current document and display them one by one in the form of 'Parameter name: Field value'.

    If you want to obtain data in the form of a map for direct access via key name, you can addsorted=falseParameters:

    {% archiveParams params with sorted=false %}
    <div>作者邮箱：{{params.author_email.Value}}</div>
{% endarchiveParams %}

    But usually, using it directly{% archiveDetail with name="调用字段" %}will be more intuitive and convenient.

  3. Process special field types (such as image groups, multiple choice)Some custom field types may require special handling to be displayed better on the front end.

    • Image group field： If you have defined a custom field for uploading multiple images (for example, "Product Album", the field name isproduct_gallery)archiveDetailThe label will return an array of image URLs. You need to loop through this array to display the images:

      <h3>产品相册</h3>
<ul class="product-gallery">
    {% archiveDetail images_list with name="product_gallery" %}
    {% if images_list %}
        {% for img_url in images_list %}
            <li><img src="{{ img_url }}" alt="产品图片" loading="lazy"></li>
        {% endfor %}
    {% endif %}
</ul>

    • Multiple choice field： if your custom field is 'Multiple Choice' (for example, 'Applicable Scenario', the field name isapplicable_scenes），Backend saves it as a comma-separated string (e.g.,|splitThe filter converts it into an array and then displays it in a loop:

      <p>适用场景：
    {% archiveDetail scene_str with name="applicable_scenes" %}
    {% if scene_str %}
        {% for scene in scene_str|split:"," %}
            <span>{{ scene }}</span>{% if not forloop.Last %},{% endif %}
        {% endfor %}
    {% else %}
        <span>暂无</span>
    {% endif %}
</p>

    • Rich text editor field： If your custom field uses a rich text editor (such as "Product Details Supplement", the field name isextra_details），its content will include HTML tags. To ensure that these HTML contents are correctly parsed by the browser and not displayed as plain text, you need to use|safeFilter.

      <h3>详情补充</h3>
<div>
    {% archiveDetail extra_content with name="extra_details" %}
    {{ extra_content|safe }}
</div>

      Thus, the HTML formatting such as images, layout, etc. defined in the field can be displayed as is.

Summary

Through the flexible use of AnQiCMS's content model and front-end template tags, you can easily display any custom field on the website, meeting various personalized content display needs. Whether it's simple text, numbers, or complex image groups, checkboxes, AnQiCMS