How to get and display the background custom parameter field of AnQi CMS?

The AnQi CMS is favored by content operators for its excellent flexibility and highly customizable nature.In daily website management, we often encounter scenarios where we need to add exclusive properties for different types of content (such as articles, products, events, etc.).This is where the document custom parameter field function of Anqi CMS can fully demonstrate its capabilities, allowing us to expand the structure of content based on business needs, thereby achieving more personalized and rich display effects.

This article will thoroughly introduce how to create these custom parameter fields in the security CMS backend, as well as how to accurately obtain and elegantly present them in the front-end template, helping you make full use of this powerful feature 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 content structure preset in the security CMS, adding additional and unique properties to our documents.For example, if your website has a "ProductsThis additional information added based on specific business requirements is the custom parameter field.It makes each piece of content's data structure 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 connected to the management of the content model.

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

2. Select or create a content model： Select the content model you want to add custom fields (for example, "Product ModelIf you need to set fields for a new content type, you can click 'Add New Model' to create a new content model.

3. Configure custom fields： In the content model editing interface, scroll down to find the "Content Model Custom Fields" area.Here is where we define various personalized fields.

   • Parameter nameThis is the Chinese name used in the background interface and front-end template to identify the field, for example 'Product Price', 'Article Author'.
   • Call fieldThis is the actual field identifier referenced 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 obtain this parameter in the frontend template.
   • field type：According to the data type you want to store, choose the appropriate type. Safe CMS provides a variety of options, including:
     • Single Line Text：Suitable for short text input, such as author name, brand name.
     • Number：Only input numbers, such as inventory, price.
     • Multi-line text：For longer text content, such as product features description, brief introduction.
     • Single choice/Multiple choice/Drop-down choice：Used for preset options, allowing users to select from a fixed list, such as product color, size, etc.
   • Is required：Tick this box, the field must be filled in when publishing content.
   • Default value：Set an initial value for the field, which will be used as the default if the user does not fill it in. For selection type fields, enter the option content one per line as the default value.

   Configure completed, click “OK” to save. Repeat this step to add multiple custom fields.

4. Linked to document editing： Once the custom fields are set up in the content model, when you enter 'Content Management' under 'Publish Document' or edit an existing document, select the corresponding category (the model of the category must include the custom fields you have defined), you will see the custom parameter field you just defined in the 'Other Parameters' collapsible area on the document editing page.Now, you can fill in these exclusive information for each document.

Get and display custom parameter fields in the front-end template

Define the custom parameter fields first, and then the next step is how to display this information on your website's front-end template.The autoCMS provides flexible template tags, allowing us to easily access these data.

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

1. UsearchiveDetailTags to get a single custom field

   When you clearly know the 'invoked field name' of the custom field, and you only need to get the value of this field in the current document,archiveDetailthe tag is the most direct choice.

   • Basic Usage:

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

     For example, you have defined an 'article author' field for the 'article model', whose 'called field' isauthor:

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

   • Get multi-value fields (such as image groupsIf your custom field type is an image group, it will return an array of image URLs. You need to assign it to a variable, 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>
     

   • Process Markdown format contentIf your custom field type is multi-line text and you want to support Markdown formatting and render it 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,|safeThen tell the template engine that this HTML is safe and does not need to be escaped twice.

2. UsearchiveParamsTag to get all custom fields

   When you are not sure what custom fields are available, or you want to traverse and display all custom parameters in a general way,archiveParamsThe label 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 aName(parameter name) andValueobject containing the 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 displaying all custom parameters in a list form on product detail pages and similar scenarios. You can also use it in a loop to base onitem.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 directly, you cansortedparameter settingsfalseat this time,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