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

The Anqi CMS boasts a flexible content model design, making the management and presentation of website content extremely powerful.In addition to common fields such as article title, publication 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', or 'size', while news may require 'source of the article' or 'author introduction'.The custom field feature of AnQi CMS is designed to meet this personalized demand.

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

Step 1: Understand the value of content models and custom fields

Before we start the configuration, let's briefly understand the concept of the 'content model' in Anqi CMS.The content model is like the 'skeleton' of content, defining which fields a certain type of content should include.By default, Safe CMS will be built-in with 'Article Model' and 'Product Model' and other models.

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

  1. Enrich content dimensions:Add 'author introduction' to articles, 'specification parameters' to products, etc., making the content information more comprehensive.
  2. Enhance management efficiency:Structure specific information for easy background editing and management.
  3. Optimize frontend 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 2: Configure custom fields in the AnQi CMS backend

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

  1. Enter the 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 completely new content type, such as 'Case Display', 'Team Members', etc., you can click 'Add Model' to create a completely new content model.Here, you need to define the 'Model Name', 'Model Table Name' (used for database storage, usually in lowercase English) and 'URL Alias' (used for frontend URLs) for the new model.

  3. Add custom fields: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', and so on.
    • Field call:This is the unique identifier referenced in the template, make sure to use lowercase English letters (for exampleauthor/productModel/colorsThis name will directly affect the way you call it in the front-end template, so please make sure it is concise and recognizable.
    • 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
      • Numbers:Enter only numeric values, such as 'Inventory quantity', 'Price'.
      • Multi-line text:Suitable for long text input, such as 'Author bio', 'Product description (rich text)'.
      • Single choice, multiple choice, dropdown selection:Applicable for situations where options from a predefined list need to be selected, for example, 'Product Color' can be selected as 'Red, Blue, Green'.When selecting these types, you need to enter an option per line in the "Default Value" area, and the system will automatically parse them as options.
    • Mandatory:According to content release requirements, selecting this option will force editors to fill in this field.
    • Default value:Set a default value for the field. For single-choice/multiple-choice/dropdown selection types, this is where you define all the options, 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 publish and edit interfaces of the corresponding content models.

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

  1. Click on 'Content Management' under the left navigation bar and edit existing documents 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, and in the collapsible area of "Other Parameters", you will see the newly added custom fields.Here, content editors can fill in the corresponding information according to the field type.

Make sure the content editors understand the purposes 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 backend on the website frontend is a crucial step for personalized display.The template system of Anqi CMS 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 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.htmlComma, the product detail page may beproduct/detail.html.

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

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

If you know the exact 'Call field' name of the custom field, and the field only contains simple text or numbers, you can use it directlyarchiveDetailLabel to retrieve and display it.

For example, you have added a 'Call field' for the 'Article Model':authorA single-line text custom field:

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

This way 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' ofcolorsThe dropdown selection (or multiple selection) field, this field may have multiple values, or a simple image fieldproductImage:

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

Special attention:

  • If the custom field is multi-line text and you want to support HTML format (for example, if 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 traverse all custom fields (suitable for dynamic display or complex structure)

Sometimes you may want to iterate over all custom fields under a certain content model, or the structure of a field is quite complex (for example, a group of images, multiple checkbox values). At this time, archiveParamsTags are very useful. It will return an array containing all custom fields, and you can iterate through them.

{# 在文章或产品详情页模板中 #}
<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.NameIt will display the Chinese parameter name set in the background.
  • item.ValueIt will display the field value filled in by the user.
  • Pass{% if item.Value is iterable %}Can determine if the field value is an iterable type (such as multiple choice field values), and then perform the corresponding loop display.
  • You can also determine in this loop,item.Nameoritem.FieldNameProcess a specific field specially or