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

In Anqi CMS, the content display of the article detail page is highly flexible, especially for fields customized through the content model.These custom fields can help us manage and display different types of information more finely, such as product prices, authors' origins, and property layouts, etc.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 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, go toContent management > Content model. Here you can choose to edit the 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 Field" section, click "Add Field" to start defining.When defining fields, there are several key items to note:

   • Parameter name:This is the name displayed on the backend interface for editors, such as 'Source of Article', 'Product Price'.
   • Call field:This is used to refer to this field in the template, which is usually an English lowercase letter. For example, if the parameter name is "Article Source", the field call can besourceIf it is a "product price", it can beprice. This "call field" will be the core of the content we retrieve in the template later.
   • Field type:Select the data type you want to store, such as single-line text, number, multi-line text, single choice, multiple choice, or drop-down selection, etc.If you need the field content to support HTML formatting (for example, a rich text editor), you can choose the "Multi-line text" type.
   • Mandatory, default value: Set according to business requirements.

2. Fill in the custom field content for the article:After defining the custom field, when you are in the backgroundContent Management > Publish DocumentWhen editing an existing article, in the "Other Parameters" collapse box on the article editing page, you will see these custom fields defined for the current content model.Here, you can fill in the actual content for each article.Ensure that the content you enter meets the field type requirements, for example, numeric fields should only contain numbers.

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

The Anqi CMS template system uses syntax similar to Django, variables are enclosed in double curly braces{{变量}}Logical judgments and loops use single curly braces and percent signs{% 标签 %}.We mainly usearchiveDetailandarchiveParamsthese tags to call custom fields.

1. to call a single explicit custom field:archiveDetailTagWhen you need to directly retrieve the value of a specific custom field, you can usearchiveDetailthe tag and specify itsnameparameter as the 'call field' you set in the background.

   Assuming you have defined a custom field called "article source", with the "call field" ofsource. In the article detail page template (such asarchive/detail.html), you can call and display it in this way:

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

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

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

   In this way, the page will display the corresponding 'article source' content of the current article.

2. Traverse all custom fields or display as needed:archiveParamsTag archiveParamsTags provide a more flexible way to retrieve all custom fields of an article. It defaults to returning a sorted array of the following:sorted=trueEach element in the array containsName(parameter name, that is, the Chinese name displayed in the background) andValue(field value) object.

   If you want to display all custom fields and their content on the page, you can usearchiveParamsLabel collaborationforLoop:

   <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 the custom fields of the current article and display them in the form of "field name: field value".

   Sometimes, you might only care about a few specific custom fields, or you may need to handle certain fields specially. You can do this within the loop byifthe statement to judgeitem.Nameto achieve:

   <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=falsethen,productInfois a map object, you can access specific field values directlyproductInfo.调用字段.Valuewhich is very convenient when you know which fields to display

Section 3: Handling Special Field Types and Content

1. Handle multiline text fields containing HTML:|safeFilterIf your custom field type is "Multiline Text" and the user has filled in content containing HTML tags (such as bold, links, images, etc.) in the background, then when outputting directly in the template, in order 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 directly parsed as HTML without escaping.

2. Custom field for processing pictures (gallery): cyclic displayIf your content model includes a "Group Image" type custom field (for example, the field name isgalleryIt will return an array of image URLs. You need to loop through it like a regular array:

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

By using the above method, you can easily and flexibly call and display various custom field content on the article detail page of Anqi CMS, thereby creating a more complete and informative page.

---

Frequently Asked Questions (FAQ)

1. I called a custom field in the template, but nothing showed up on the page, what went wrong?There are usually several reasons for this situation:

• The field has not been created or filled in:Please confirm in the backgroundContent management > Content modelIn Chinese, you indeed defined the custom field for the current article model, and filled in the content for the field when publishing or editing the article.
• The field name 'Call Field' is incorrect: Used in the templatenameThe parameter value must be exactly the same as the "Call field" you set when defining custom fields in the background, including case sensitivity.
• Template tag usage error:CheckarchiveDetailorarchiveParamsIs the syntax of the tag correct, for examplewithAre keywords missing.
• Article ID or Token issue: archiveDetailThe tag defaults to fetching the article data from the current page, if you try to get the custom fields of other articles, you need to specify the article through parametersidortokenThe parameter explicitly specifies the article.

2. My custom field content is edited by a rich text editor, which includes images and text styles, but the page only displays the original HTML code. How can I display it normally?If the content of the custom field contains HTML tags, you need to use in{{变量}}when outputting, add to the variable|safea filter. 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 escaping.

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