How to define a new field in a custom content model and flexibly call and display these fields on the front-end page?

In AnQi CMS, utilizing a custom content model to manage and display personalized content is one of its core advantages.This allows us to flexibly create dedicated data structures for different types of content based on specific business needs.This article will discuss in detail how to define these custom fields in the background, as well as how to cleverly call and display them on the front-end page.

Define a new field in the background content model

The content model is like a 'blueprint' for content, which determines what information each type of content (such as articles, products, cases, etc.) should include.We need to start from the Anqi CMS backend management interface to define a new field.

First, please go to the "Content Management" section of the background management interface and find the "Content Model" option.Here, you can see the system-built article model, product model, and also create a new content model.Whether it is to edit an existing model or create a new model, the core operations are similar.

Click on the edit page of any content model, and you will see the 'Custom fields of content model' area.This is where we flex our muscles. Click 'Add field' to appear a form, which needs to fill in the following key information:

1. Parameter NameThis is the Chinese name displayed on the background editing interface for administrators, which is convenient for understanding and management, such as 'article author', 'product size', etc.
2. Field invocationThis is the name stored in the database field, and it is also the unique identifier used in the front-end template. Please make sure to use letters, such asauthor/size. This name is crucial when called in the template.
3. Field type: Anqi CMS provides various field types to meet different data requirements. Common ones include:
   • Single-line text: Suitable for short text input, such as titles, brief descriptions, etc.
   • Number: Only numeric input is allowed, suitable for prices, inventory, quantities, etc.
   • Multi-line text: Suitable for long text content, such as product descriptions and detailed explanations.
   • Single choice: Provides preset options, the user can only choose one, such as "Color: Red, Blue, Green".
   • Multiple selectionsProvide preset options for users to select multiple, for example, 'Features: Waterproof, Dustproof, Durable.'
   • Drop-down selectionSimilar to single choice, but presented in the form of a dropdown menu.
   • For the selection field, you still need to enter an option on each line in the "default value".
4. Mandatory?: It can be set to determine whether the field must be filled in when the content is published.
5. Default valueSet an initial value for the field, if the content is not filled in when published, the system will automatically use this default value.

After you have defined these custom fields for the content model, save the settings.After you choose this content model to publish articles, products, or any other content, you will see these newly added fields in the "Other Parameters" collapsible area on the content editing page, and you can fill in the corresponding content as needed.

Flexibly call and display these fields on the front-end page.

The true value of well-defined custom fields lies in the display on the front-end page. Anqi CMS provides flexible template tags that allow us to easily retrieve and render this data.

First, for some basic fields that the content model itself comes with, such as the document titleTitleDocument contentContent、ThumbnailThumbetc., they are usually included inarchivethis global variable. You can directly go through the detail page to{{ archive.Title }}/{{ archive.Content|safe }}This way is easy to call. Among other things,|safeFiltering forContentRich text fields are particularly important, as they ensure that HTML tags are parsed correctly and not displayed as plain text, but also pay attention to content security.

For our custom new field, the calling method is more flexible:

1. Call specific fields directly by nameIf you know the name of the "call field" of the custom field (for example, as defined earlier in this document)authororsize), you can usearchiveDetailLabel to get and directly display it. This method is very suitable for when you know exactly which field to display.

   For example, to display the field "Article Author":

   <p>作者：{% archiveDetail with name="author" %}</p>
   

   Or, if you want to store the field content in a variable to use it later:

   {% archiveDetail articleAuthor with name="author" %}
   <p>文章的撰写者是：{{ articleAuthor }}</p>
   

   This method is concise and clear, directly pointing to a specific field, suitable for displaying specific information at a fixed position on the page.

2. Loop through all custom fieldsIn some cases, you may want to dynamically list all the custom parameters of a content item, for example, listing all the technical specifications on a product details page. At this point,archiveParamsA tag can be put to use. It will return an array or map containing all custom fields.

   UsearchiveParamsWhen you tag, you can assign it to a variable (for example,paramsThen proceedforLoop to traverse these fields:

   <div class="custom-fields">
       {% archiveParams params %}
       {% for item in params %}
       <div class="field-item">
           <span class="field-name">{{ item.Name }}：</span>
           <span class="field-value">{{ item.Value|safe }}</span> {# 注意：如果自定义字段可能包含HTML，请使用 |safe #}
       </div>
       {% endfor %}
       {% endarchiveParams %}
   </div>
   

   In this loop,item.NameIt will display the field's 'parameter name' (i.e., the Chinese name displayed in the background),item.ValueThe actual content of this field should be filled. If you have a custom field of rich text type, it should also be used in the same way|safeThe filter ensures that it is rendered correctly.

   You can even base it onitem.Nameoritem.ValuePerform conditional judgment, only display fields that meet specific conditions, or perform special processing on certain fields. For example, you can add in the loop.{% if item.Name == '产品颜色' %}Target specifically handle the display of the 'Product Color' field.

Through these two flexible calling methods, whether it is to precisely control the display position of a single custom field or to dynamically traverse and display all additional information, Anqi CMS can provide strong support to help you easily build highly customized website content.

Frequently Asked Questions (FAQ)

1. Ask: Why can't I see the custom field I defined on the content editing page? Answer:Please confirm that you have defined the fields under the correct content model.The custom field is associated with a specific content model. When publishing or editing content, you must first select or the category of the content must be associated with the content model for which you have defined the custom fields, then these fields will be displayed in the 'Other Parameters' area.If the selected model does not match, the fields will naturally not appear.

2. Ask: How can I call the image address in the custom field in the front-end template? Answer:If your custom field type is "image upload" or "multi-image upload", when calling in the template,item.Value(if it passes),archiveParamsor directly call the field name (if it passes)archiveDetailThe call will return the URL of the image. You can directly use this URL as<img>label'ssrcan attribute value to display the image, for example:<img src="{% archiveDetail with name="myImageField" %}" alt="自定义图片" />If it is a multi-image, you need to traverse the array of image URLs again.

3. Question: Does the custom field support multilingual? How to implement it? Answer:The AnQi CMS supports multilingual functionality, and the content of custom fields can also be multilingual.When defining custom fields, you do not need to make any additional settings. In the background content editing page, when you switch to different language versions to edit the content, each language version's custom fields can be independently filled with the content of their respective languages.When the front-end template is called, the system will automatically pull the custom field content corresponding to the current website language setting for display.