How to call and display the custom field content of an article on the article detail page?

In the AnQi CMS, the content display of the article detail page is highly flexible, especially for fields customized by the content model.These custom fields can help us manage and display different types of information more finely, such as product prices, author sources, house types, and so on.How can you accurately call and display the content of these custom fields on the article detail page?This article will introduce this process in detail.

1. Creating and filling in custom fields: laying the foundation for content

In the AnQi CMS, the strength of custom fields lies in their close integration with the content model.All articles (or products, other custom content) belong to a specific content model, and custom fields are attached to these models.

1. Define custom fields:First, you need to log in to the AnQi CMS backend and go toContent Management > Content Model.Here, you can choose to edit an existing content model (such as “Article Model” or “Product Model”) or create a new content model.In the model editing interface, you will find the 'Content Model Custom Fields' section, click 'Add Field' to start defining.

   • Parameter name:This is the name displayed on the backend interface for editors, for example, 'Article Source', 'Product Price'.
   • Field call:This is the unique identifier used in the template to refer to this field, which is usually lowercase English letters. For example, if the parameter name is 'Article Source', the field name can besourceIf it is 'product price', it can bepriceThis 'call field' will be the core content we get from the template later.
   • Field Type:Select the data type you want to store, such as single-line text, number, multi-line text, single selection, multiple selection, or dropdown selection.If you need to support HTML format for field content (such as rich text editors), you can choose the 'Multi-line Text' type.
   • Is it required, default value:Set according to business requirements.

2. Fill in custom field content for the article:After you define the custom fields, when you are in the backendContent Management > Publish DocumentWhen [auto] or editing existing articles, within the 'Other Parameters' collapsible panel on the article editing page, you will see these custom fields defined for the current content model.Here, you can enter the actual content of the corresponding fields for each article.Make sure the content you enter meets the field type requirements, for example, only enter numbers for numeric fields.

Part two: Call custom field content in the article detail template

The template system of AnQi CMS uses syntax similar to Django, variables are enclosed in double curly braces{{变量}}English logic judgment and loop use single curly brackets and percent signs{% 标签 %}. On the article detail page, we mainly usearchiveDetailandarchiveParamsthese two tags to call custom fields.

1. Call a single specific custom field:archiveDetailtagsWhen you need to directly obtain the value of a specific custom field, you can use:archiveDetailthe tag and specify itsname参数为你在后台设置的“调用字段”。

   假设你定义了一个“文章来源”的自定义字段，其“调用字段”为source。在文章详情页的模板（例如archive/detail.htmlIn English, you can call and display it like this:

   <div>文章来源：{% archiveDetail with name="source" %}</div>
   

   If you want to assign this value to a variable for subsequent processing, you can do it like this too:

   {% archiveDetail articleSource with name="source" %}
   <div>来源：{{ articleSource }}</div>
   

   Thus, the current article's source content will be displayed on the page.

2. Loop through all custom fields or display as needed:archiveParamstags archiveParamsTags provide a more flexible way to retrieve all custom fields of an article. It defaults to returning a sorted array (sorted=true), where each element is a container that includesName(parameter name, which is the Chinese name displayed in the background) andValue(field value)。

   If you want to display all custom fields and their content on the page, you can usearchiveParamslabel combined withforLoop:

   <div class="custom-fields">
       <h3>其他信息：</h3>
       {% archiveParams params %}
           {% for item in params %}
               <p><strong>{{ item.Name }}：</strong> {{ item.Value }}</p>
           {% endfor %}
       {% endarchiveParams %}
   </div>
   

   This code will iterate over all custom fields of the current article and display them in the form of 'Field Name: Field Value'.

   Sometimes, you might only be concerned with a few specific custom fields, or you may need to process certain fields specially. You can do this within the loop.ifstatement to judgeitem.NameThis can be achieved:

   <div class="product-details">
       {% archiveParams productInfo with sorted=false %} {# 使用sorted=false获取map对象，可以直接通过key访问 #}
           <p><strong>产品型号：</strong> {{ productInfo.model.Value }}</p>
           <p><strong>产品颜色：</strong> {{ productInfo.color.Value }}</p>
           {% if productInfo.warranty %} {# 假设有一个名为warranty的自定义字段 #}
               <p><strong>保修期限：</strong> {{ productInfo.warranty.Value }}</p>
           {% endif %}
       {% endarchiveParams %}
   </div>
   

   It should be noted that whensorted=falsewhenproductInfois a map object, you can directly accessproductInfo.调用字段.Valueto access the value of a specific field, which is very convenient when you know which fields you want to display.

III. Handling special field types and content

1. Process multi-line text fields containing HTML:|safeFilterIf your custom field type is “Multi-line text” and the user has filled in content containing HTML tags (such as bold, links, images, etc.) in the backend, then when outputting directly in the template, to prevent the browser from displaying it as plain text (i.e., escaping HTML tags), you need to use|safeFilter.

   {% archiveDetail productDescription with name="description" %}
   <div class="product-description">
       {{ productDescription|safe }}
   </div>
   

   |safeThe filter tells the template engine that this part of the content is safe and can be parsed directly as HTML without escaping.

2. Custom field for processing images (group images): cyclic displayIf your content model contains a custom field of the 'group image' type (for example, the calling field isgalleryIt will return an array of image URLs. You need to loop through it like a regular array to display:

   {% archiveDetail imageGallery with name="gallery" %}
   <div class="gallery">
       {% for imageUrl in imageGallery %}
           <img src="{{ imageUrl }}" alt="产品图片">
       {% endfor %}
   </div>
   

Through this method, you can easily and flexibly call and display various custom field contents on the article detail page of the Anqi CMS, thus creating a more comprehensive and information-rich page.

---

Common Questions (FAQ)

1. I called a custom field in the template, but nothing showed up on the page, where did the problem come from?This situation usually has several reasons:

• The field was not created or filled in:Please confirm in the backgroundContent Management > Content ModelIn English, you have indeed defined the custom field for the current article's model, and have filled in the content for this field when publishing or editing the article.
• The name of the 'Field Call' is incorrect: Used in template.nameThe parameter value must be exactly the same as the 'Called Field' you set when defining custom fields in the background, including case sensitivity.
• Template tag usage error:CheckarchiveDetailorarchiveParamsThe syntax of the label is correct, for example,withMissing keywords.
• Article ID or Token issue: archiveDetailLabel defaults to fetching the current page's article data, if you try to get custom fields of other articles, you need to specify the article through parameters.idortokenThe parameter explicitly specifies the article.

2.My custom field content is edited by a rich text editor, which includes images and text styles, but only the original HTML code is displayed on the page. How can it be displayed normally?If the content of the custom field includes HTML tags, you need to use{{变量}}Add the variable name after outputting|safefilter. For example:{{ customFieldContent|safe }}This filter tells the template engine that this part of the content is safe HTML and should be rendered directly, rather than being escaped.

3. Can I display different custom fields on the detail page based on different article types (such as news, blog, product)?Of course you can. The custom fields of Anqi CMS are bound to the "content model". You can have different