How to define new fields in a custom content model and flexibly call and display these fields on the frontend page?

In the Anqi CMS, using 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 according to specific business needs.This article will delve into how to define these custom fields in the backend, as well as how to cleverly call and display them on the frontend page.

Define a new field in the background content model

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

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

Click into the edit page of any content model, and you will see the 'Content Model Custom Fields' area.This is where we can show our stuff.

1. Parameter nameThis is the Chinese name displayed on the background editing interface to administrators for easy understanding and management, for example, 'Article Author', 'Product Size', etc.
2. Call fieldThis is the name stored in the database for the field, as well as the unique identifier used in the front-end template. Please make sure to use English letters, such asauthor/sizeThis name is crucial when calling the template.
3. field type: Anqi CMS provides various field types to meet different data requirements. Common ones include:
   • Single Line Text：适用于简短的文字输入，如标题、短描述等。
   • Number：仅允许输入数字，适合价格、库存、数量等。
   • Multi-line text：适用于较长的文本内容，如产品描述、详细说明。
   • Single selection：提供预设选项，用户只能选择其中一个，比如“颜色：红色、蓝色、绿色”。
   • Multiple selection：提供预设选项，用户可以选择多个，例如“English：Waterproof, Dustproof, Durable.”
   • Drop-down selection：与单项选择类似，但以下拉菜单形式呈现。
   • For selection fields, you need to enter each option in the 'Default Value' field on each line.
4. Is required: It can be set whether the field is required to 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.

When 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" collapsed area of the content editing page, and you can fill in the corresponding content as needed.

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

The real value of the predefined custom field lies in the display on the front-end page. Anqi CMS provides flexible template tags, allowing us to easily obtain and render this data.

Firstly, for some basic fields that the content model itself comes with, such as the document titleTitle, document contentContent, thumbnailThumbetc., they are usually included inarchiveYou can directly access it through the detail page.{{ archive.Title }}/{{ archive.Content|safe }}This method is easy to call. Wherein,|safeThe filter 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 fields, the calling method is more flexible:

1. Call specific fields by name directly： If you know the name of the "Calling field" of the custom field (for example, as defined earlier in this document)authororsize)，you can usearchiveDetailLabel to retrieve and display it directly. This method is very suitable for scenarios where you know exactly which field you want 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 and then use it:

   {% 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 fields.： In some cases, you may want to dynamically list all custom parameters of a content item, for example, list all technical specifications on the product details page. At this time,archiveParamsLabels can be put to use. It will return an array or map containing all custom fields.

   UsearchiveParamswhen you label, you can assign it to a variable (for example)params), then throughforLoop 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 filled in for this field. If the field you customize is a rich text type, you still need to use|safeThe filter ensures it is rendered correctly.

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

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

Common Questions and Answers (FAQ)

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

2. 问：How can I call the image address of the custom field in the frontend template? Answer:If your custom field type is "image upload" or "multi-image upload", when calling it in the template,item.Value(If througharchiveParamsloop) or directly call the field name (if througharchiveDetailInvoke）will return the image URL. You can directly use this URL as<img>Tagssrcthe attribute value to display the image, for example：<img src="{% archiveDetail with name="myImageField" %}" alt="自定义图片" />If there are multiple images, you need to traverse the image URL array again.

3. Question: Does the custom field support multi-language? How to implement it? Answer:Auto 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 content, each language version's custom fields can be independently filled with content in their respective languages.The system will automatically pull the corresponding language custom field content for display when calling the front-end template, based on the current website's language settings.