How AnQiCMS content model custom fields can be flexibly called and displayed in the front-end template?

In AnQiCMS, the custom fields of the content model have brought great flexibility to our website content management, allowing us to add unique properties for content types such as articles, products, and events based on different business needs.But it is not enough to create these fields in the background. How to flexibly present them on the website front end so that visitors can see this customized information is the key to content operation.

Next, we will delve into how AnQiCMS custom field content models can be flexibly called and displayed in front-end templates, helping you make full use of this powerful feature.

Lay the foundation for personalized content: Create custom fields

In AnQiCMS, the charm of custom fields lies in their high degree of customization.They are not fixed, but are defined according to your actual business logic.These fields are usually created and managed under the "Content Model" in the "Content Management" module.

When you enter an content model (such as an article model or product model) for editing, you will see an area for custom fields of the content model. Here, you can add new fields and set their key properties:

• Parameter name (display name)This is the field name you see in the background management interface, convenient for identification.
• Field call (variable name in the template)This is the most core attribute, which determines how you will refer to this custom field in the front-end template. Please use concise and meaningful letters as the call field, for exampleauthor/productPrice/eventDateetc.
• Field type：AnQiCMS provides various field types such as single-line text, numbers, multi-line text, single selection, multiple selection, and dropdown selection.Selecting the appropriate type helps ensure the standardization of data entry and consistency of front-end display.
• Default value and whether it is required: You can set a default value for the field and mark it as required when necessary.

Understanding the importance of calling fields is the first step in successfully calling custom fields on the front-end, it is the bridge connecting backend data with the front-end template.

Highlight custom fields in front-end templates: flexible calling method

The AnQiCMS template system is based on the Django template engine syntax, providing an intuitive and powerful way to call various data, including the custom fields meticulously defined by us.Whether it is to display the details of a single article/product or to show a summary on the list page, there are corresponding calling methods.

1. Directly call a single custom field on the detail page

When you are on the detail page of a document (article or product), AnQiCMS will automatically load all the data of the current document (including custom fields) into a namedarchivethe variable. At this point, the most direct way to call a single custom field is through the dot (.) operator, combined with the "field name" you set up in the backend..operator, combined with the "field name" you set up in the backend.}

For example, if you add a custom field named "Product Price" for the "Product Model" with the "field called" set toproductPriceThen, in the product detail page template, you can display its price like this:

<p>产品价格：{{archive.productPrice}} 元</p>

In addition, AnQiCMS also providesarchiveDetailThe tag allows you to more specifically retrieve the value of a single field, even specifying the fields of a document with a specific ID. For example:

{# 直接获取当前文档的作者自定义字段 #}
<p>作者：{% archiveDetail with name="author" %}</p>

{# 如果需要获取ID为10的文档的产品价格 #}
<p>其他产品价格：{% archiveDetail with name="productPrice" id="10" %} 元</p>

This approach is concise and clear, suitable for those who know exactly which custom field to display and have a fixed position in the page layout.

2. Dynamically display all custom fields

Sometimes, you may want to display all the defined custom fields on the detail page, or the names and number of fields may vary according to different documents. At this point,archiveParamsTags are particularly powerful. They can retrieve all custom parameters of the current document or a specified document and return them in the form of an array, which is convenient for us to dynamically display through a loop.

For example, on a product detail page, you may want to display all product parameters (such as color, size, material, etc., these are custom fields) in a list:

<h3>产品参数：</h3>
<ul>
    {% archiveParams params %}
    {% for item in params %}
    <li>
        <span>{{item.Name}}：</span> {# item.Name 会显示后台设置的“参数名” #}
        <span>{{item.Value}}</span> {# item.Value 会显示您输入的内容 #}
    </li>
    {% endfor %}
    {% endarchiveParams %}
</ul>

In this way, even if you add or modify custom fields in the background, the front-end template does not need to be changed and can automatically adapt and display the latest parameter list. If you only want to display specific named fields, or exclude certain fields, you can also inforUsing inside the loopifConditional judgment.

3. Display the summary information of custom fields on the list page

On article lists, product lists, and other pages, we often need to display summaries of custom field information. For example, on product lists, brief descriptions or promotional tags of products are displayed.

When usingarchiveListLabel gets the document list when, the loop variable (usuallyitem) also includes the custom fields of each document. You can access them directly using the dot operator:

`twig {% archiveList archives with type=“page” limit=“10” %}

{% for item in archives %}
<div class="product-card">
    <img src="{{item.Logo}}" alt="{{item.Title}}">
    <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
    {# 直接在列表