How to create custom fields in the document model and flexibly call them for display in the front-end template?

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 different, and the traditional 'article' and 'product' models often fail to meet all the needs of detailed display.At this time, the custom field has 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 front-end template.

The first part: Understand AnQi CMS content model and custom fields

In AnQi CMS, the content model can be considered as a 'blueprint' for different types of content.Whether it is to publish news articles, display product details, or introduce team members, we need a set of standards to规范the entry of content.The system provides the basic models of "Article Model" and "Product Model" by default, which define some common fields such as title, content, category, thumbnail, etc.

However, when we need to add more unique information for specific content, such as adding "brand", "origin", "shelf life", or for team members adding "position", "contact information", and "motto", the default fields are obviously not enough.This is when the custom field comes into play, allowing us to expand more exclusive fields based on actual business needs, thus achieving personalized content display.

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

• Single-line text: Suitable for brief text information, such as brand names, product models.
• Number: Only numeric input is allowed, such as price, inventory.
• Multi-line textFields suitable for longer text descriptions, such as product features and detailed descriptions.
• Single choice: Provide predefined options that the user can only select one from, such as "Color: Red/Blue/Green".
• Multiple selectionsProvide preset options for the user to select multiple, such as 'Function: Waterproof/Dustproof/NFC'.
• Drop-down selectionPresent the radio list in the form of a dropdown menu to save page space.

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 go to the Anqi CMS backend and create some custom fields.

1. Enter content model managementFirst, log in to your AnQi 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, we take the modification of the "product model" as an example. Click the "Edit" button on the right of the "product model".

3. Add custom fieldAfter entering the model editing page, find the "Content Model Custom Field" area, there is usually an "Add Field" button, click it.

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

   • Parameter NameThis is the display name of the field in Chinese, such as "Brand", "Origin" or "Size". It will be displayed to the content editor when editing content in the background.
   • Field invocationThis is the unique identifier for the custom field called in the front-end template. It must use letters, numbers, and underscores, and it is recommended to use camel case (for example:productBrand/originPlace）。Once created, this field name is fixed and must be matched exactly when called in the template.
   • Field type: Select the data type you want to collect from the drop-down list, for example, 'Single-line text', 'Number', or 'Dropdown selection'.
   • Mandatory?: Check this box if the field is required when publishing content.
   • Default value: You can set a default value for the field. For fields of type 'Single choice', 'Multiple choice', and 'Dropdown', you need to enter each option value, one per line.For example, set options such as "red", "blue", "black", and so on for the "Color" field.

   After filling in, click "OK" 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 changes to the content model.

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

The third part: calling custom fields in the front-end template

Created and filled in the content of the custom field, the next most critical step is how to display them in your website front-end template. The Anqi CMS template engine is similar to Django syntax, mainly through double curly braces{{变量}}Output the variable value and the single curly bracket with the percent sign{% 标签 %}To perform logical control

We will mainly call the custom field in two ways:

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

If you know the name of the custom field's "call field" and the value of this field is usually singular (such as "brand", "author"), you can use it directly in the template.archiveDetailtags orarchiveThe dot syntax to call it.

Suppose we add a 'brand' field to the product model, with the 'calling field' beingproductBrand. On the product details page ({模型table}/detail.htmlOr customize the 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 when you know exactly which specific field you need to call.

2. Loop through all custom fields (for dynamic display or unknown fields)

When you have a lot of custom fields or you want to dynamically and uniformly display all the additional parameters,archiveParamsThe tag comes in handy. It returns a list containing all custom fields, and you can iterate over and display them using a loop.

{# 在文档详情页，循环展示所有自定义字段 #}
<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 approach is very flexible, especially suitable for those areas with more customized field content, such as the technical parameter list on the product detail page.Even if you add or modify custom fields later in the background, the front-end template does not need to be changed, and it will automatically adapt to display.

In the special case of calling a custom field on the document list page:If you want to display custom fields for each entry in an article list or product list (for example, displaying 'Brand' on a product card), you need to ensurearchiveListThe label has retrieved the required document data and used it in a looparchiveParamsCombined with the current document's ID to