How to display custom fields defined in the AnQiCMS content model on the front end?

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.After we create these custom fields, the next critical step is to elegantly display them on the website front end.

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

One, define custom fields in the background content model

In AnQiCMS, all content publishing is based on the '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 in the corresponding content model.

1. Enter content model managementLog in to the AnQiCMS backend, navigate to the 'Content Management' menu, and then click the 'Content Model' submenu.You will see the built-in 'article model' and 'product model', and you can also create new custom models.Select the model you want to add a custom field to, click the 'Edit' button to enter.

2. Add custom fieldIn the model editing interface, you will find the 'Content Model Custom Field' area.This is where we define personalized fields. Click 'Add field' to appear a new form row, where you need to fill in the following information:

   • Parameter name (Name)This is the Chinese name displayed in the background management interface and editing page, which is convenient for you to understand and manage, such as 'article source', 'product model', 'release date', and so on.
   • Field call (FieldName)This is the unique identifier used to call this field in the front-end template, it must beEnglish 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): Choose the field suitable for your content type, such as:
     • 单行文本: Suitable for brief text content, such as authors, short titles.
     • 数字: Only numbers are allowed.
     • 多行文本: Suitable for longer text descriptions.
     • 单项选择/多项选择/下拉选择Provide preset options for selection, with option content set in 'Default Value', one per line.
   • Is RequiredDetermine whether the field is required to be filled in when publishing content.
   • Default value (Content)To set an initial value for the field or provide options (for selection type fields).

   For example, suppose we want to add a "author email" field to the "article model" to facilitate direct contact with readers. We can set it up like this:

   • Parameter name: author email
   • Call field:author_email
   • Field Type: Single Line Text
   • Not Required
   • 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 website front-end template.AnQiCMS uses a template engine syntax similar to Django, calling data through specific tags.Generally, the display of custom fields is concentrated on the document detail page template (such asarticle/detail.htmlorproduct/detail.html).

In the template file, you can choose two main ways to display custom fields: directly call specific fields or loop through all custom fields.

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

   Suppose you define a "article source" field in the background, its "called field" issourceThen you can call and display it directly in the article detail page template:

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

   If your custom field name isauthor_emailYou can call it in the same way:

   <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 fieldsIf you want to display all custom fields on the document detail page (or are unsure of which specific fields there are but want to display them all), you can usearchiveParamsLabel. This label will return an array or map containing all custom fields, which you can iterate over to dynamically display.

   archiveParamsThe tag will return an array sorted by order, 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 traverse 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 access data in the form of a map to access it directly by key name, you can addsorted=falseparameters:

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

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

3. Handle special field types (such as image groups, multi-select)Some custom field types may require special handling to display better on the front end.

   • Image group fieldIf you define 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 iterate over 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 fieldIf your custom field is a 'Multiple Choice' (for example, 'Applicable Scenes', the field calledapplicable_scenes), the backend usually saves it as a comma-separated string (e.g., "home, office, travel"). When displaying on the front end, you can use|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 fieldIf your custom field uses a rich text editor (such as "Product Details Supplement", the field name is "extra_details），its content will include HTML tags. To ensure that these HTML contents are parsed correctly by the browser rather than displayed as plain text, you need to use|safefilter.

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

     This allows the image, layout, and other HTML formats defined in the field to be displayed as is.

Summary

By flexibly using AnQiCMS's content model and front-end template tags, you can easily display any custom field on the website to meet various personalized content display needs. Whether it is simple text, numbers, or complex image groups, multiple choice boxes, AnQiCMS