How to display the custom parameter fields of AnqiCMS documents on the front page, such as authors, sources, and so on?

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

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

Why do we need custom parameters?

The Anqi CMS provides the core function of "flexible content model", which is not limited to traditional fixed fields such as article title, content, and introduction.Under many circumstances, we need to define unique properties for specific types of content.For example, a news website may need to add "reporter name" and "news source" to each article;An e-commerce website may need to add "brand", "target audience", or "warranty period" for each product, etc.These custom parameters can make your content more structured, more in line with business logic, and easier to manage and search.They not only improved the professionalism of the content, but also provided users with richer and more accurate information.

Backstage 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 in the background of AnQi CMS.

1. Enter 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 existing 'article model' or 'product model', or create a new content model as needed.
3. Add custom field:In the content model editing page you choose or create, you will see the "Content Model Custom Field" 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'.
   • Call field:This is the actual English identifier used in the template, which is very important. For example, 'author', 'source'. It is recommended to use meaningful lowercase letters.
   • Field type:Choose the actual data type of the parameter, for example, 'Single-line text' (for author name, source URL), 'Number' (for product inventory), 'Multi-line text' (for more detailed descriptions), 'Single choice' or 'Multiple choice' (for preset options).
   • Mandatory?:Check as needed, if this field is required, check this option.
   • Default:You can set a default value for this field if it is commonly used.
4. Save the model and fill in the content:After setting up custom fields, save the content model. Next, when adding or editing documents under "Content Management", you will see these newly added custom fields in the "Other Parameters" area, and you can fill in the corresponding values for each document.

Make sure the name of the 'invoked 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 Anqi CMS template engine supports syntax similar to Django, using{% tag %}to perform logical control, using{{变量}}to output content. To display custom document parameters, we mainly usearchiveDetailandarchiveParamsthese two template tags.

1. Directly call a specific custom field (archiveDetail)

If you only need to display a specific custom parameter on the page (such as "author" or "source"), you can usearchiveDetaillabel and specifynameThe attribute is the name of your 'call field'.

Assuming you created a call field namedauthor(parameter name 'author') and another call field namedsource(Parameter named "Content Source") custom parameter. In the document detail page template (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 current document inauthorfield value.
• IfauthorThe field may be empty, you can first assign it to a variable (such asarticleAuthor), and then use{% if articleAuthor %}to make a judgment to avoid displaying an empty label.
• archiveDetailThe label defaults to retrieving information about the current page document. If you need to retrieve 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 display them in a list.archiveParamsThe tag allows you to get all the custom parameters of the document and display them by looping in the template.

<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 %}It will assign all the custom parameters of the current document as an array object.paramsVariable.

• By{% for item in params %}You can iterate over this array, eachitemContainsName(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' or other fields that require special handling,item.ValueIt may return an array or a JSON string. You need to handle it according to 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 unnecessary fields: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 parameter may contain HTML code (for example, if a rich text editor is used), in order to avoid XSS attacks and ensure correct rendering, it is imperative to use|safea filter such as{{ item.Value|safe }}The output content is escaped by default in AnQi CMS,|safeThis kind of escaping can be canceled.
• Handling of default values and empty values:When setting custom parameters in the background, you can set a default value for them. If the parameter is empty when the front-end calls it, no content will be displayed. You can access{% if 变量名 %}Make a judgment to control the display logic.
• Style:After displaying the custom parameters on the front end, you can use CSS to.article-meta/