How to customize fields and display them in Anqi CMS for different content models (such as articles, products)?

AnQi CMS is designed with a flexible content model, making the management and display of website content extremely powerful.In addition to common fields such as article title, publishing time, and content body, we often need to add unique information for specific content types (such as products, news, cases, etc.).For example, a product may require "product model", "color options", "size", while news may require "source of the article" or "author's introduction".The custom field function of AnQi CMS is exactly designed to meet this personalized demand.

This article will provide a detailed guide on how to customize fields for different content models in AnQi CMS, and finally elegantly display this information on the website front-end template.

The first step: understand the value of content models and custom fields

Before we start the configuration, let's first understand the concept of the 'content model' of Anqi CMS.The content model is like the 'skeleton' of content, defining which fields a certain type of content should include.By default, Anqi CMS will be built-in with 'article model' and 'product model' and so on.

The introduction of custom fields has greatly increased the flexibility of content:

  1. Enrich the dimensions of content:Can add 'author introduction', 'specification parameters' for products, etc., to make the content information more comprehensive.
  2. Improve management efficiency:Structure specific information for convenient background editing and management.
  3. Optimize front-end display:You can accurately call and display these custom information in the front-end template, creating a page layout that better meets business needs.

By custom fields, you can build a highly personalized content system according to your business needs.

Step two: Configure custom fields in the Anqi CMS backend.

Configure custom fields is the basis for personalized content display. This process is completed in the "Content Model" management of Anqi CMS.

  1. Enter content model management:Log in to the Anqi CMS backend, find 'Content Management' in the left navigation bar, click to expand and select 'Content Model'.

  2. Select or create a content model:

    • Modify an existing model:You can choose an existing 'Article Model' or 'Product Model' to edit. Click the 'Modify' button next to the model name to enter.
    • Add a custom model:If your business has a new content type, such as "case display", "team members", etc., you can click "Add Model" to create a new content model.Here, you need to define the "model name", "table name" (used for database storage, usually in lowercase English) and "URL alias" (used for front-end URL) for the new model.

  3. Add custom field:After entering the model editing page, you will see the "Content Model Custom Fields" area. Here, you can add exclusive fields for this model:

    • Parameter name:This is the Chinese name displayed in the background for editors, such as 'Article Author', 'Product Model', 'Color Options', etc.
    • Call field:this is the unique identifier referenced in the template, be sure to use lowercase letters such asauthor/productModel/colorsThis name will directly affect the way you call it in the frontend template, so make sure it is concise and identifiable.
    • Field type:The Anqi CMS provides various field types to adapt to different data formats:
      • Single-line text:Suitable for short text input, such as "author", "product model".
      • Number:Input is limited to numbers, such as "inventory amount", "price".
      • Multi-line text:Suitable for long text input, such as "author bio", "product description (rich text)".
      • Single choice, multiple choice, dropdown choice:Applicable when an option needs to be selected from a predefined set, for example, the 'Product Color' can be selected as 'Red, Blue, Green'.When you select these types, you need to enter an option per line in the 'Default Value' area, and the system will automatically parse it as an option.
    • Mandatory?:According to content release requirements, checking this option will force editors to fill in this field.
    • Default:Set a default value for the field. This is where you define all options for single-choice/multiple-choice/dropdown types, one per line.

    After adding the field, remember to click the 'Save' button at the bottom of the page to make the changes take effect.

Step 3: Fill in the custom fields when publishing content.

After you configure the custom fields in the background, these fields will be automatically integrated into the publishing and editing interfaces of the corresponding content models.

For example, if you add the 'article source' and 'author bio' fields to the 'article model':

  1. Click on 'Content Management' under the left-hand navigation bar and edit an existing document after selecting 'Publish Document' or 'Document Management'.
  2. Select or confirm the category to which the document belongs (this category should belong to the content model you have modified).
  3. Scroll the page, within the 'Other Parameters' collapsible area, you will see the newly added custom field.Here, the content editor can fill in the information according to the field type.

Make sure that the content editors understand the purpose of these new fields and fill them in correctly so that the front end can display accurate information.

Step 4: Display custom fields in the front-end template.

Presenting the custom field information filled in the background on the website front-end is a key step in achieving personalized display.The Anqi CMS template system provides flexible tags to complete this task.

The template files of AnQi CMS are usually stored in/templateUnder the directory, and use syntax similar to the Django template engine. You need to find the template file for the corresponding content model detail page, for example, the article detail page might be{模型table}/detail.htmlorarchive/detail.htmlProduct detail page may beproduct/detail.html.

In these template files, you can use the following two main methods to display custom fields:

Method one: througharchiveDetailTag direct call (for known field names)

If you exactly know the name of the custom field's "reference field" and the field only contains simple text or numbers, you can use it directlyarchiveDetailTags to retrieve and display it.

For example, you have added a "trigger field" for the "article model" calledauthorCustom single-line text field:

{# 在文章详情页模板中 #}
<p>
    文章作者：{% archiveDetail with name="author" %}
</p>
{# 或者，如果已将当前文档详情赋值给archive变量，可以直接通过点语法访问 #}
<p>
    文章作者：{{ archive.author }}
</p>

This method is concise and clear, suitable for the scenario where you only need to display specific custom fields.

If you have added a 'reference field' for the 'product model' ascolorsDropdown selection (or multi-select) field, this field may have multiple values, or a simple image fieldproductImage:

{# 在产品详情页模板中 #}
<p>
    产品颜色：{{ product.colors }} {# 直接显示选中的值 #}
</p>
<p>
    产品图片：<img src="{{ product.productImage }}" alt="产品图片">
</p>

Please note:

  • If the custom field is multiline text and you want to support HTML format (for example, the backend editor provides rich text editing functionality), be sure to add it when displaying|safeFilter to prevent HTML code from being escaped and displayed directly:
    
<div class="author-bio">
    <h4>作者简介</h4>
    {% archiveDetail with name="authorBio" %}{{ archive.authorBio|safe }}
</div>

Method two: througharchiveParamsTag to iterate through all custom fields (for dynamic display or complex structures)

Sometimes you may want to iterate through all the custom fields under a content model, or the structure of a field is quite complex (such as an image group, multiple values of a checkbox). At this point,archiveParamsTags are very useful. They return an array containing all custom fields, which you can iterate over.

{# 在文章或产品详情页模板中 #}
<div class="custom-fields">
    <h3>详细参数</h3>
    {% archiveParams params %}
        {% for item in params %}
            {# 这里的item.Name是您在后台设置的“参数名”，item.Value是对应的值 #}
            <div>
                <span>{{ item.Name }}：</span>
                <span>
                    {% if item.Value is iterable %} {# 如果是数组或切片，例如多选框的值 #}
                        {% for sub_item in item.Value %}
                            {{ sub_item }} {% if not forloop.Last %},{% endif %}
                        {% endfor %}
                    {% else %}
                        {{ item.Value|safe }} {# 确保HTML内容不被转义 #}
                    {% endif %}
                </span>
            </div>
        {% endfor %}
    {% endarchiveParams %}
</div>

Hint:

  • archiveParamsTags default to getting the custom fields of the current page's document.
  • item.NameWill display the Chinese parameter name set in the background.
  • item.ValueWill display the field value filled in by the user.
  • By{% if item.Value is iterable %}Can determine whether the field value is an iterable type (such as multiple values in a multi-select field), and then display in the corresponding loop.
  • You can also determine this in the loop,item.Nameoritem.FieldNameCome to handle specific fields or