How to retrieve and display the custom parameter fields of the document in Anqi CMS?

Anqi CMS is loved by content operators for its excellent flexibility and high customizability.In daily website management, we often encounter scenarios where we need to add exclusive attributes for different types of content (such as articles, products, events, etc.).At this time, the document custom parameter field function of Anqi CMS can fully demonstrate its capabilities, allowing us to expand the structure of content according to business needs, thereby achieving more personalized and rich display effects.

This article will introduce in detail how to create these custom parameter fields in Anqi CMS backend, and how to accurately obtain and elegantly present them in the front-end template, helping you fully utilize this powerful function to make your website content more expressive.

What is the custom parameter field of the document?

In simple terms, custom parameter fields are an extension of the pre-set content structure of AnQi CMS, adding additional, unique properties to our documents.For example, if your website has a "Products" section, in addition to the usual product name, description, and images, you may also need to record information such as the "price", "stock quantity", and "color options";If it is an 'article' module, you may want to add properties such as 'article author', 'source link', or 'reading time', etc.This is the additional information added according to specific business requirements, which is the custom parameter field.It makes the data structure of each piece of content more complete and provides more dimensions for front-end display.

How to create a custom parameter field in the Anqi CMS backend?

The process of creating a custom parameter field is very intuitive, and it is closely related to the management of the content model.

1. Enter content model managementFirst, log in to the Anqi CMS backend, navigate to the "Content Management" section through the left-hand navigation bar, and then click on "Content Model".Here, you will see the built-in 'article model', 'product model', and other custom models you may have created.

2. Select or create a content modelSelect the content model you want to add a custom field to (for example, "Product Model"), click the "Edit" button on the right.If you need to set a field for a completely new content type, you can click "Add New Model" to create a new content model.

3. Configure custom fieldsIn the content model editing interface, scroll down to find the "Content Model Custom Fields" area.This is where we define various personalized fields. Click 'Add field' to open a configuration form:

   • Parameter NameThis is the Chinese name used to identify the field in the background interface and frontend template, for example, 'Product Price', 'Article Author'.
   • Field invocationThis is the actual field identifier used in the database and template, it is recommended to use letters, such as 'productPrice', 'author'.This field name is crucial, it will be the only credential you use to get this parameter in the front-end template.
   • Field typeAccording to the data type you wish to store, Anqi CMS provides a variety of options, including:
     • Single-line textSuitable for short text input, such as author names, brand names.
     • Number: Only numeric input is allowed, such as inventory, price.
     • Multi-line text: Suitable for longer text content, such as product feature descriptions, brief introductions.
     • Single choice/Multiple choice/Dropdown choice：Used to preset options, allowing users to select from a fixed list, such as product color, size, etc.
   • Mandatory?：Check this option, the field must be filled in when publishing content.
   • Default value: Set an initial value for the field. If the user does not fill in, the default value will be used. For selection-type fields, the default values need to be entered one per line.

   After configuring, click "OK" to save. Repeat this step to add multiple custom fields.

4. Linked to document editingOnce the custom field is set in the content model, when you enter "Content Management" under "Publish Document" or edit an existing document, select the corresponding category (the model of which must include the custom field you defined), you will see the custom parameter field you just defined in the "Other Parameters" collapsible area on the document editing page.At this time, you can fill in these exclusive information for each document.

Retrieve and display custom parameter fields in the front-end template.

After defining custom parameter fields, the next step is how to display this information in your website front-end template.AnQi CMS provides flexible template tags, allowing us to easily obtain this data.

The template syntax of AnQi CMS is similar to Django, variables are enclosed in double curly braces{{变量名}}Enclosed, tags are used{% 标签名 参数 %}.

1. UsearchiveDetailLabel retrieves a single custom field.

   When you clearly know the "name of the field called by the custom field" and only need to get the value of this field in the current document,archiveDetailthe label is the most direct choice.

   • Basic usage:

     
     {% archiveDetail with name="自定义字段的调用字段名" %}
     

     For example, you have defined a 'Article Author' field for the 'Article Model', whose 'called field' isauthor:

     
     <div>文章作者：{% archiveDetail with name="author" %}</div>
     

   • Get multi-value fields (such as image groups)If your custom field type is an image group, it will return an array of image URLs. You need to assign it to a variable and then throughforLoop through and display: Assuming you have defined a "product image" field, the field name isproduct_images:

     
     {% archiveDetail productImages with name="product_images" %}
     <div class="product-gallery">
         {% for imgUrl in productImages %}
             <img src="{{ imgUrl }}" alt="产品图片" />
         {% endfor %}
     </div>
     

   • Handle Markdown format contentIf your custom field type is multi-line text and you want the content to support Markdown formatting and be rendered as HTML, you need to combinerenderandsafeFilter: Assuming you have a "detailed introduction" field, the field name isdetails_markdown:

     
     <div class="product-details">
         {% archiveDetail detailsContent with name="details_markdown" %}
         {{ detailsContent|render|safe }}
     </div>
     

     |renderThe filter is responsible for parsing Markdown text into HTML, and|safeThen tell the template engine that this HTML is safe and does not require re-escaping.

2. UsearchiveParamsTag retrieves all custom fields.

   When you are unsure about what custom fields there are, or you want to traverse and display all custom parameters of the document in a general way,archiveParamsThe tag is very useful. It can retrieve all custom parameters of the current document or a specified document.

   • Get an ordered list (default behavior orsorted=true):archiveParamsDefault returns an ordered array, each item of which is an object containingNameand (parameter name)Value(parameter value).

     
     {% archiveParams params %}
     <ul class="product-specs">
         {% for item in params %}
         <li>
             <span>{{ item.Name }}：</span>
             <span>{{ item.Value }}</span>
         </li>
         {% endfor %}
     </ul>
     {% endarchiveParams %}
     

     This method is very suitable for scenarios such as product detail pages, where all custom parameters are displayed in a list. You can also use it in a loop according toitem.NamePerform conditional judgment, perform special processing on specific fields.
   • Get an unordered Map object (sorted=false): If you prefer to access through the key name, you can convertsortedthe parameter tofalseIn this case,archiveParamsIt will return a Map object. “`twig {% archiveParams params with sorted=false %}
     {% if params.productPrice %} {# Check if the field exists #}

     Price: {{ params.productPrice.Value }}

     {% endif %} {% if params.stockQuantity