How to call and display custom parameter fields of articles in the AnQi CMS template?

In the AnQi CMS, the custom parameter field of the article is an important embodiment of its core feature 'Flexible Content Model'.It allows us to define unique additional attributes for different types of content (such as articles, products), greatly enhancing the expressiveness and customization capabilities of the website.Imagine if your website needs to display product details, in addition to general information such as title, content, and images, you may also need specific parameters such as 'product model', 'color', 'storage capacity', and so on.This is where the custom parameter fields take effect.

What is a custom parameter field?

In simple terms, a custom parameter field refers to additional data items added beyond the preset standard fields (such as title, content, and publication time) in articles or product models, according to business needs.For an article of the "bookThe AutoCMS allows you to flexibly define the names, types (single-line text, numbers, multi-line text, radio, checkbox, dropdown selection, etc.), and set whether it is required and default values in the background.

Why should we use custom parameter fields?

The benefits of using custom parameter fields are evident:

  1. Highly customized content:Make your content no longer limited to a few traditional fields and build content structures precisely according to actual business scenarios.
  2. Enhance the expressiveness of content:Can provide a more detailed and accurate description of the characteristics of the content, and offer the key information that users need.
  3. Optimize user experience:Structured data is easier for users to understand and filter, for example, e-commerce websites can filter products according to custom parameters such as color, size, etc.
  4. Beneficial for SEO:Rich and structured content helps search engines better understand page information and improve keyword rankings.

How to set custom parameter fields in Anqi CMS?

How to call and display custom parameter fields in the template?

In AnQiCMS templates, the custom parameter fields for calling and displaying articles mainly depend on its powerful template tag system, especiallyarchiveParamsandarchiveDetailThese tags.

1. UsearchiveParamslooping through all custom parameters

archiveParamsThe tag is used to retrieve all custom parameters of the current article or a specified article. It is particularly suitable when you want to iterate and display all the additional information of the article.

Basic syntax: {% archiveParams 变量名称 with id="文档ID" sorted=true %}

Here are some key points:

  • 变量名称You can specify a variable name for the custom parameter set obtained (such asparams), and then access it through the variable name in the loop.
  • id：Optional parameter, if you want to get custom parameters other than the current article, you can specify them by their ID.
  • sorted：Optional parameter, the default istrue.
    • Whensorted=truewhenparamsThe variable will be an ordered array object. Each array element containsName(parameter name, which is set as "parameter name" in the background) andValue(Parameter value, i.e., the content filled in the article). This method is suitable for traversing and displaying all parameters.
    • Whensorted=falsewhenparamsThe variable will be an unordered one.mapObject, you can directly access it through the "Field Call" setting in the background, for exampleparams.yourFieldName.Value.

Example code (traverse all parameters, recommended method):

Assuming your custom field's 'Call Field' isauthorandsource_url，“Parameter names” are “article author” and “article source link”, and you have filled in the corresponding values on the article editing page.

{# 假设这是文章详情页，或者通过id="某个文章ID"指定 #}
<div>
    <h3>自定义参数：</h3>
    {% archiveParams params with sorted=true %}
        {% for item in params %}
        <div>
            <span>{{item.Name}}：</span> {# 这里显示的是后台设置的“参数名” #}
            <span>{{item.Value}}</span> {# 这里显示的是文章中填写的参数值 #}
        </div>
        {% endfor %}
    {% endarchiveParams %}
</div>

This code will traverse all custom parameters of the article and display them one by one in the form of "parameter name: parameter value."

Example code (accessing by field name directly,sorted=false):

If you know exactly which custom field you want to display and do not care about its order, you can usesorted=falsethe "call field" to access the pattern directly.

{# 假设你有一个自定义字段的“调用字段”是 `introduction`，并且参数类型是多行文本，可能包含HTML #}
<div>
    <h3>文章简介：</h3>
    {% archiveParams myCustomFields with sorted=false %}
        {# 直接通过调用字段名访问，并用|safe过滤器确保HTML内容正确解析 #}
        <span>{{myCustomFields.introduction.Value|safe}}</span>
    {% endarchiveParams %}
</div>

Please note that for custom fields that may contain HTML content (such as multi-line text type), it is essential to use|safeFilter, to ensure that HTML tags can be normally parsed by the browser instead of being escaped and displayed. If the custom field is Markdown formatted content, you can also use|render|safeCombination filter to render Markdown content correctly as HTML on the front end.

2. UsearchiveDetailDirectly obtain specific custom parameters with tags.

archiveDetailLabels are typically used to obtain standard fields of articles (such as title, content), but it can also directly obtain the value of a single custom parameter field.When you know the 'Field Name' of the custom field and only need to get this one value separately, this method will be more concise.

Basic syntax: {% archiveDetail 变量名称 with name="调用字段" id="文档ID" %}

  • name：Here you fill in the "Call field" (usually in English) when setting custom fields in the background.
  • Other parameters witharchiveParamssimilar.

Example code:

Assuming you have a custom field with the 'Call Field' beingauthorthe 'Parameter Name' is 'Author'.

{# 在文章详情页调用当前文章的作者自定义字段 #}
<div>
    文章作者：{% archiveDetail with name="author" %}
</div>

{# 如果需要指定ID的文章作者 #}
<div>
    指定文章作者：{% archiveDetail with name="author" id="123" %}
</div>

{# 如果自定义字段的值可能是HTML内容，同样需要|safe过滤器 #}
<div>
    产品特性：{% archiveDetail with name="product_features" %}{{archiveDetail with name="product_features"}|safe}}
</div>

Examples of practical application scenarios

Combined with the above tags, we can easily build complex content display pages.

Example 1: Product details page displays the product parameter list

Assuming you have defined custom fields for the product model:model(Model),color(Color),storage(Storage).

<div class="product-specs">
    <h3>产品参数</h3>
    {% archiveParams productParams with sorted=true %}
        {% for item in productParams %}
        <div class="spec-item">
            <span class="spec-name">{{item.Name}}：</span>
            <span class="spec-value">{{item.Value}}</span>
        </div>
        {% endfor %}
    {% endarchiveParams %}
</div>

Example 2: Show custom image groups (such as carousel images)

If your custom field contains a multi-image upload type (in AnQiCMS backend, multi-image upload is usually treated as a custom field type), for example, its "call field" isproduct_images:

<div class="product-gallery">
    {% archiveDetail galleryImages with name="product_images" %}
    <ul class="image-carousel">
        {% for img in galleryImages %}
        <li><img src="{{img}}" alt="产品图"></li>
        {% endfor %}
    </ul>
    {% endarchiveDetail %}
</div>

Here,archiveDetailThe array obtained is a picture URL array, we can displayforit one by one in a loop.

Summary and precautions

PassarchiveParamsandarchiveDetailThese tags, we can flexibly call and display the custom parameter fields of articles in the AnQiCMS template. The key is to understand the 'Call Field' settings in the background and the template tags.nameThe corresponding relationship of parameters, as well asarchiveParamsinsortedDifferent usage of parameters.

Please in actual operation,