How to display custom parameter fields of AnqiCMS documents, such as author, source, etc. on the front page?

In website operation, the flexibility of the Content Management System (CMS) is crucial.The AnQi CMS, with its powerful customizability, allows us to add various custom parameter fields for content (such as articles, products, etc.) to meet diverse display requirements.These custom fields, such as the 'author' and 'source' of articles, the 'model' and 'color' of products, etc., can greatly enrich the dimensions and practicality of the content.

How can we elegantly present these personalized custom parameters to visitors on the front page of the website after we have added them in the background for the document?This article will guide you through this operation in detail.

Why do you need to customize parameters?

The 'Flexible Content Model' is a core feature provided by Anqi CMS, which is not limited to traditional fixed fields such as article title, content, and summary.In many scenarios, we need to define unique properties for specific types of content.For example, a news website may need to add 'reporter's name' and 'news source' to each article; an e-commerce website may need to add 'brand', 'target audience', or 'warranty period' to each product.These custom parameters allow your content to be more structured, more in line with business logic, and easier to manage and search.They not only enhanced the professionalism of the content, but also provided users with richer and more accurate information.

Backend settings: Create your custom parameters

Before displaying custom parameters on the front end, we first need to ensure that these parameters have been correctly created and filled with content in the Anqi CMS backend.

1. Enter the content model management:Log in to the AnQi CMS backend, navigate to the 'Content Management' section, and find the 'Content Model' option.
2. Select or create a content model:You can add custom fields to the existing 'Article Model' or 'Product Model', or create a completely new content model based on your needs.
3. Add custom fields:In the content model editing page you choose or create, you will see the 'Content Model Custom Fields' area. Click 'Add Field', and you need to fill in the following key information:
   • Parameter name:This is the Chinese name displayed to the backend administrator, for example, 'Article Author', 'Content Source'.
   • Field call:This is the actual English identifier referenced in the template, which is very important. For example, 'author', 'source'. It is recommended to use meaningful lowercase letters.
   • Field Type:Choose based on the actual data type of the parameter, for example, 'Single-line text' (used for author name, source URL), 'Number' (used for product inventory), 'Multi-line text' (used for more detailed descriptions), 'Single selection' or 'Multiple selection' (used for preset options).
   • Mandatory:Select as needed. If this field is required, check this option.
   • Default value:If this field has a common default value, it can be set here.
4. Save the model and fill in the content:After setting up custom fields, save the content model.Then, when adding or editing documents under 'Content Management', you will see these newly added custom fields in the 'Other Parameters' section, and you can fill in the corresponding values for each document.

Ensure that the name of the 'Call Field' is unique and easy to remember, as this will be our basis for referencing them in the front-end template.

Front-end Display: Call custom parameters in the template

The template engine of Anqi CMS supports syntax similar to Django, using{% tag %}for logical control, using{{变量}}to output content. To display custom parameters of the document, we mainly usearchiveDetailandarchiveParamsThese two template tags.

1. Directly call a specific custom field (archiveDetail)

If you only need to display a specific custom parameter (such as 'author' or 'source'), you can usearchiveDetaila tag to specifynameProperty is your 'Call Field' name.

Suppose you have created a call field named in the background.author(Parameter name 'Author') and another call field namedsourceA custom parameter named “Content Source”. In the template of the document detail page (usually{模型table}/detail.html), you can call them like this:

<div class="article-meta">
    <span>作者：{% archiveDetail with name="author" %}</span>
    <span>来源：{% archiveDetail with name="source" %}</span>
    {# 也可以将值赋值给一个变量，再使用 #}
    {% archiveDetail articleAuthor with name="author" %}
    {% if articleAuthor %}
        <span>发布者：{{ articleAuthor }}</span>
    {% endif %}
</div>

Description:

• {% archiveDetail with name="author" %}It will directly output the value of theauthorfield in the current document.
• IfauthorField may be empty, you can assign it to a variable (such asarticleAuthor), and then{% if articleAuthor %}to avoid displaying an empty label.
• archiveDetailLabel defaults to fetching document information from the current page. If you need to fetch documents with other specified IDs or aliases, you can addid="文档ID"ortoken="文档URL别名"Parameter.

2. Loop through all custom fields (archiveParams)

Sometimes you may need to display all the custom parameters of the document, or you may wish to present them in a list format.archiveParamsTags allow you to access all custom parameters of the document, and you can iterate through them in the template to display.

<div class="custom-parameters">
    <h3>文档额外参数</h3>
    {% archiveParams params %}
        {% for item in params %}
            <div class="param-item">
                <span class="param-name">{{ item.Name }}：</span>
                <span class="param-value">{{ item.Value }}</span>
            </div>
        {% endfor %}
    {% endarchiveParams %}
</div>

Description:

• {% archiveParams params %}Will assign all custom parameters of the current document as an array object toparamsa variable.

• Pass{% for item in params %}can traverse this array, eachitemincludesName(parameter name, such as “article author”) andValue(parameter value, such as “Zhang San”) properties.

• handle special field types:If your custom parameter type is 'Multiple Choice' or 'Group Image' etc., which require special handling,item.ValueIt may return an array or a JSON string. You need to perform additional processing based on the actual situation. For example, ifarcimagesis a grouping field, you can traverse it like this:

  {% archiveDetail arcimages with name="arcimages" %}
  {% if arcimages %}
      <ul class="product-gallery">
          {% for imgUrl in arcimages %}
              <li><img src="{{ imgUrl }}" alt="产品图片"></li>
          {% endfor %}
      </ul>
  {% endif %}
  

• Filter out fields that are not needed:You can also add conditional judgments in the loop to exclude some internal custom parameters that you do not want to display on the front end:

  {% archiveParams params %}
      {% for item in params %}
          {% if item.Name != '内部标记' and item.Name != '隐藏参数' %}
              <div class="param-item">
                  <span class="param-name">{{ item.Name }}：</span>
                  <span class="param-value">{{ item.Value }}</span>
              </div>
          {% endif %}
      {% endfor %}
  {% endarchiveParams %}
  

Important reminder:

• Security:If the custom parameters may contain HTML code (for example, if a rich text editor is used), to avoid XSS attacks and ensure correct rendering, it is imperative to use|safeFilter, such as{{ item.Value|safe }}. The default of the Anqi CMS escapes the output content,|safeyou can cancel this escaping.
• Default value and null value handling:When setting custom parameters in the background, you can set default values for them. If the parameter is empty when the front-end calls it, no content will be displayed. You can use{% if 变量名 %}Perform a judgment to control the display logic.
• Style:After custom parameters for the front-end display, you can use CSS to.article-meta/