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

In Anqi CMS, the custom parameter field of the article is an important embodiment of its core feature, the 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 the 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 the custom parameter field?

In simple terms, a custom parameter field is an additional data item added outside of the preset standard fields (such as title, content, publish time) in an article or product model, based on business requirements.For an article of the "book" category, you may need to add fields such as "author", "publisher", "ISBN", etc.For a "product" model, you may need fields such as "SKU", "price", "inventory", etc.The AnQi CMS allows you to flexibly define the names, types (single-line text, numbers, multi-line text, radio, checkbox, dropdown selections, etc.), and set whether they are required, default values, and so on.

Why should we use custom parameter fields?

The benefits of using custom parameter fields are self-evident:

  1. Highly customized content:Let your content go beyond the traditional few fields, and accurately construct the content structure according to the actual business scenario.
  2. Enhance the expressiveness of content:Can provide a more detailed and accurate description of the characteristics of the content, providing the key information needed by the user.
  3. Optimizing user experience: Structured data is easier for users to understand and filter, for example, e-commerce websites can filter products based on 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?

On AnQiCMS backend, the setting of custom parameter fields is very intuitive.This is mainly achieved through the "Content Management" under the "Content Model" feature.You can choose to modify an existing model (such as an article model, product model) or create a new content model.In the model editing interface, you can click the 'Add Field' button in the 'Content Model Custom Field' area, then fill in the 'Parameter Name' (the name displayed to the editor), 'Field Identifier' (the unique identifier used in the template, usually in English), 'Field Type', and set other properties as needed.After the settings are completed, when publishing or editing articles under this model, these custom fields will be visible and fillable in the "Other Parameters" collapsible box.

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

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

1. UsearchiveParamstag traversing all custom parameters

archiveParamsThe tag is used to get 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 %}

There are a few key points:

  • 变量名称You can specify a variable name for the custom parameter set you get (likeparams), then access it by that variable name in the loop.
  • idOptional parameter, if you want to get the custom parameters of a non-current article, you can specify it by its ID.
  • sortedOptional parameter, default istrue.
    • Whensorted=truethen,paramsThe variable will be an ordered array object. Each array element containsName(Parameter name, which is the parameter name set in the background) andValue(Parameter value, which is the content filled in the article). This method is suitable for traversing and displaying all parameters.
    • Whensorted=falsethen,paramsA variable will be an unorderedmapobject, you can directly access it through the "field" set in the background, for exampleparams.yourFieldName.Value.

Example code (traverse all parameters, recommended method):

Assuming your custom field's 'callback field' are respectivelyauthorandsource_urlThe 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 iterate over all the custom parameters of the article and display them one by one in the form of 'Parameter name: Parameter value.'

Sample code (accessing fields by name directly,sorted=false):

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

{# 假设你有一个自定义字段的“调用字段”是 `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 types), you must use|safeA filter to ensure that HTML tags can be parsed normally by the browser rather than being displayed as escaped. If the custom field is Markdown formatted content, you can also use|render|safeThe combination filter allows Markdown content to be correctly rendered into HTML on the front end.

2. UsearchiveDetailThe tag can directly obtain specific custom parameters.

archiveDetailTags are usually used to retrieve standard fields of an article (such as title, content), but it can also directly retrieve the value of a single custom parameter field.When you know the name of the custom field's 'reference field' and you need to get this value alone, this method is more concise.

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

  • nameEnter the 'call field' (usually in English) when setting up custom fields in the background.
  • Other parameters witharchiveParamsSimilar.

Example code:

Suppose you have a custom field whose 'call field' isauthorThe 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 actual application scenarios

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

Example 1: Product detail page shows 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: Display custom image groups (such as a carousel)

If your custom field contains a multi-image upload type (in the 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,archiveDetailWe get an array of image URLs, we can display them one by one throughforLooping.

Summarize and note the precautions

ByarchiveParamsandarchiveDetailThese 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 innameThe corresponding relationship of the parameters, as well asarchiveParamsinsortedDifferent uses of the parameter.

Please in actual operation,