How to loop through and display the `Name` and `Value` of custom parameters using the `archiveParams` tag in AnQiCMS templates?

In the flexible world of AnQiCMS, the custom parameters (Custom Parameters) of the content model (Content Model) provide website operators with a great degree of freedom, allowing us to break through the limitations of traditional titles, content, and summaries, and add personalized data fields for different types of documents (such as articles, products, cases, etc.).For example, a product details page may need to display information such as "model number", "color options", "material" and so on, while a technical article may require fields such as "author", "publish date", "references" and so on.

So, after we carefully configure the custom parameters for these documents in the background, how can we elegantly display them in the front-end template, especially when we need to iterate over and display each parameter?Name(Name) andValueWhat about the value? Anqi CMS provides a specialarchiveParamstag, which is like a bridge, perfectly connecting the flexible configuration of the backend with the dynamic display of the frontend.

Custom parameters in AnQi CMS: the cornerstone of rich content

Further inarchiveParamsBefore the label, let's briefly review the positioning of custom parameters in AnQiCMS.When you create a new content model (such as a "product model"), in addition to the system-defined fields, you can also add dedicated custom fields according to business requirements.These fields can be single-line text, numbers, multi-line text, single selection, multiple selection, or drop-down selection and other types.Once defined, when you publish a document of the "product" type, you can fill in specific values for these custom fields.These flexible custom parameters allow AnQiCMS to easily handle various complex website content structures.

archiveParamsTags: unlock the display power of custom parameters

archiveParamsTags are designed to facilitate the retrieval and display of custom parameters bound to specific documents. Their core function is to allow you to iterate over all custom parameters of a document and extract their names(Name）and its corresponding value（Value)

Let's see its basic usage：“

{% archiveParams params %}
    {% for item in params %}
        <p><strong>{{ item.Name }}：</strong> {{ item.Value }}</p>
    {% empty %}
        <p>该文档暂无自定义参数信息。</p>
    {% endfor %}
{% endarchiveParams %}

In this code block:

• {% archiveParams params %}: We declare a variable namedparamswhich will carry the current document (by default, if not specifiedidThe collection of all custom parameters for the current detail page document.
• {% for item in params %}This line of code starts a loop,itemThe variable represents an independent custom parameter in each iteration.
• {{ item.Name }}In the loop, throughitem.NameWe can get the current custom parameter name set in the background configuration (such as "product model", "color").
• {{ item.Value }}:Anditem.ValueIt will display the specific "parameter value" you fill in the background (for example, "Snapdragon 888", "black").
• {% empty %}This is a very considerate feature, if the current document has no custom parameters, orparamsthe variable is empty, then the content of the block will be displayedemptyto avoid blank pages or errors on the page.

Label parameter details: finer control

archiveParamsLabels also provide some parameters to allow finer control of their behavior:

• id: By default,archiveParamsThe current document page's custom parameters will be automatically retrieved. But if you need to get the parameters of a specified document, you canid="文档ID"specify it explicitly. For example:{% archiveParams params with id="123" %}The parameters of the document with ID 123 will be obtained.
• sortedThis parameter determines:paramsThe data structure returned by the variable.
  • sorted=true(Default value):paramsIt will be an array of objects arranged in an order defined by the backend. In this case, you can use it as shown in the exampleforLoop throughitem.Nameanditem.ValueThis is the most commonly used scenario
  • sorted=false:paramsIt will be unorderedmap(Pair) object. At this point, if you know the custom parameter's "call field" (the English name defined in the content model, such asprocessor), you can directly pass through{{ params.processor.Name }}and{{ params.processor.Value }}Come to visit a specific parameter, but this way you cannot directly perform a simple loop traversal.
• siteId: If you have enabled the AnQiCMS multi-site management feature and need to call data from other sites, you cansiteId="站点ID"specify.

Practice exercise: Build a parameter list for the product detail page

Assuming we are building a product detail page for an e-commerce website that sells electronic products, and in the product model in the background, we have defined custom parameters such as 'processor', 'memory', 'storage', 'screen size', and so on.Now, we hope to display these parameters in a sidebar or a dedicated area on the product detail page.

Here is an implementation example in the template:

<div class="product-specifications-section">
    <h4 class="section-title">产品技术参数</h4>
    <ul class="spec-list">
        {% archiveParams productSpecs %}
            {% for spec in productSpecs %}
                <li class="spec-item">
                    <span class="spec-name">{{ spec.Name }}：</span>
                    <span class="spec-value">{{ spec.Value }}</span>
                </li>
            {% empty %}
                <li class="no-specs-info">该产品暂未提供详细技术参数。</li>
            {% endfor %}
        {% endarchiveParams %}
    </ul>
</div>

Through this concise code, no matter how many custom parameters you add to the product in the background, as long as they are filled in correctly, the front-end page can automatically and dynamically list their names and values one by one.This not only greatly improves the efficiency of content management, but also makes the display of website content more flexible and rich in layers.

Optimization and注意事项

In practical applicationarchiveParamsWhen labeling, there are some points to note:

• Front-end style is crucial:The tag itself is only responsible for outputting data, how to make these parameters beautiful and easy to read for users, which still depends on CSS styles. For example, you can setproduct-specifications-section/spec-list/spec-itemAdd the corresponding styles.
• Plan the backend first:A good front-end display cannot be separated from clear back-end planning.When defining custom parameters, it is recommended to use intuitive 'parameter names' and meaningful 'call fields', which will make template creation and content management easier.
• Utilize{% empty %}:Always useemptyblock to handle cases without custom parameters, which can effectively improve user experience and avoid the embarrassment of missing page content.

ByarchiveParamsTags, AnQiCMS makes it easy to display custom parameters, whether it is to build complex product lists or rich article detail pages,