AnQiCMS (AnQiCMS) provides great convenience for us to build personalized websites with its flexible content model.We all know that the content structure of each website is diverse, and the traditional 'article' and 'product' models often fail to meet all the detailed display needs.At this point, custom fields have become an indispensable tool for website operation and content management.

This article will guide you step by step on how to create custom fields in AnQi CMS and present their content flexibly on the website frontend template.

Part 1: Understanding the content model and custom fields of AnQi CMS

However, when we need to add more unique information for specific content, such as adding 'brand', 'origin', and 'shelf life' for products, or 'position', 'contact information', and 'motto' for team members, the default fields are obviously insufficient.This is when custom fields come into play, allowing us to extend more exclusive fields based on actual business needs on the existing model, thereby achieving personalized content display.

AnQi CMS provides various types of custom fields to meet different data entry needs, including:

  • Single Line Text[en] : Suitable for brief text information, such as brand names, product models.
  • Number[en] : Only numeric input is allowed, such as prices, inventory.
  • Multi-line text：Suitable for fields that require longer text descriptions, such as product features, detailed descriptions.
  • Single selectionProvide preset options, and the user can only select one, such as "Color: Red/Blue/Green".
  • Multiple selection【en】Provide preset options for users to select multiple items, such as 'Function: Waterproof/Dustproof/NFC'.
  • Drop-down selection【en】Presented as a dropdown menu to save page space and show a single selection list.

These flexible field types can help us build standardized and highly customized content structures.

Part two: Create custom fields in the background

Now, let's enter the Anqi CMS backend and create some custom fields.

  1. Enter content model managementFirstly, log in to your security CMS backend.In the left navigation bar, find the 'Content Management' menu, click on it and you will see the 'Content Model' option, click to enter the content model management interface.

  2. Select or create a content modelHere, you will see the built-in 'Article Model' and 'Product Model', and you can also choose to add new custom models.For demonstration purposes, let's take the modification of the 'Product Model' as an example.Click the "Edit" button on the right of the "Product Model".

  3. Add Custom FieldsAfter entering the model editing page, find the 'Content Model Custom Fields' area, where there is usually a 'Add Field' button, click it.

    An form will pop up at this moment, you need to fill in the detailed information of the fields:

    • Parameter nameThis is the Chinese display name of the field, such as 'Brand', 'Origin', or 'Size'. It will be displayed to the content editor when editing content in the background.
    • Call fieldThis is the unique identifier called in the frontend template for a custom field. Make sure to use letters, numbers, and underscores, and it is recommended to use camelCase naming style (e.g., :)productBrand/originPlaceOnce created, this field name is fixed and must be matched exactly when called in the template.
    • field typeBased on the data type you wish to collect, select from the drop-down list, for example 'Single-line text', 'Number', or 'Dropdown selection'.
    • Is requiredIf this field is required to be filled in when publishing content, please check this box.
    • Default valueYou can set a default value for the field.For fields of 'Single choice', 'Multiple choice', and 'Dropdown' types, each option value needs to be entered here, one per line.For the 'Color' field, set options such as 'Red', 'Blue', 'Black', and so on.

    After filling in, click “Confirm” to save this custom field. You can repeat this process to add more required custom fields to your content model.

  4. Save model settingsAfter adding all custom fields, don't forget to click the 'Submit' button at the bottom of the model editing page to save your changes to the content model.

Now, when you enter 'Content Management' and select the corresponding model category (e.g., 'Product Model'), and click 'Add Document' or 'Edit Document', you will see these newly created custom fields in the collapsible box of 'Other Parameters'. Content editors can fill in the corresponding information for each document here.

Part Three: Call Custom Fields in Front-end Templates

Created and filled in the content of custom fields, the next most critical step is how to display them on the front-end template of your website. The template engine of Anqi CMS is similar to Django syntax, mainly through double curly braces{{变量}}Output the variable value, as well as a single curly brace followed by a percentage sign{% 标签 %}Execute logical control.

We will mainly call custom fields in two ways:

1. Directly access by field name (for known and independent fields)

If you know the 'Call Field' name of the custom field, and the value of this field is usually single (such as 'Brand', 'Author'), you can use it directly in the template.archiveDetailorarchiveThe dot syntax to call it.

Suppose we added a 'brand' field in the product model, its 'calling field' isproductBrand. On the product detail page (} ]{模型table}/detail.htmlIn the [or custom product detail template), you can call it like this:

{# 假设当前页面是产品详情页，直接通过archive对象调用自定义字段 #}
<div>产品品牌：{{ archive.productBrand }}</div>

{# 或者使用archiveDetail标签，明确指定要调用的自定义字段名 #}
<div>产品品牌：{% archiveDetail with name="productBrand" %}</div>

{# 你也可以将结果赋值给一个变量再使用 #}
{% archiveDetail brandName with name="productBrand" %}
<div>产品品牌：{{ brandName }}</div>

This method is concise and clear, suitable for situations where you are clear about which specific field you want to call.

2. Recursively call all custom fields (for dynamic display or unknown fields)

When you have a large number of custom fields, or you want to dynamically and uniformly display all additional parameters,archiveParamsTags come into play. It returns a list containing all custom fields, and you can iterate through them to display them.

{# 在文档详情页，循环展示所有自定义字段 #}
<div>
    <h3>其他产品参数：</h3>
    {% archiveParams params %}
    <ul>
        {% for item in params %}
        <li>
            <span>{{ item.Name }}：</span> {# item.Name 是字段的“参数名”（中文显示名称） #}
            <span>{{ item.Value }}</span> {# item.Value 是字段的值 #}
        </li>
        {% endfor %}
    </ul>
    {% endarchiveParams %}
</div>

This method is very flexible, especially suitable for areas with a lot of custom field content, such as the technical parameter list on the product detail page.Even if you add or modify custom fields in the background later, the front-end template does not need to be changed, and it will automatically adapt to display.

Special cases for custom fields in the document list page:If you want to display custom fields in each entry of the article list or product list (such as displaying 'Brand' on the product card), you need to ensurearchiveListLabel has obtained the required document data and used it in the looparchiveParamsCombined with the current document's ID