How to ensure that the custom fields of the content model are correctly displayed on the front page in AnQiCMS?

In AnQiCMS, we often encounter situations where we need to display various personalized content.Built-in articles, product models are powerful, but they may still not meet specific business needs.At this point, the custom fields in the content model become our reliable assistants, making website content management more flexible.How to ensure that the custom fields are displayed correctly on the website front-end for visitors to see?Today, let's delve into this issue in depth.

Creation and management of custom fields in the content model

Let's review how to create these custom fields in the background.In AnQiCMS backend, navigate to 'Content Management' under 'Content Model', you will see the built-in 'Article Model' and 'Product Model'.We can edit an existing model here or create a new custom model.

Whether it is editing or adding a model, the core is to add new fields in the "Content Model Custom Fields" area. Each time a field is added, several key pieces of information need to be filled out:

  • Parameter name:This is the Chinese name displayed on the back end for your understanding, convenient for you to understand the purpose of this field, such as 'Article Author', 'Product Size'.
  • Field call: This is the most critical item.It is a name composed of English lowercase letters, for exampleauthor/product_size/images_gallery.This name is the unique identifier used in the template to recognize and call the field data, it is essential to ensure its accuracy, and it is recommended to use a meaningful English name to avoid conflicts with built-in system field names.
  • Field Type:AnQiCMS supports various field types, such as single-line text, numbers, multi-line text, single selection, multiple selection, and dropdown selection.Select the appropriate field type to ensure you have the correct input method when filling in content on the backend.
  • Mandatory:Set whether this field is required according to the requirement.
  • Default value:If the field needs a preset value, it can be entered here. For fields of selection type, this is used to set the available options.

After completing these settings and saving, the custom field is successfully added to the content model.

Fill in the custom field in the document or category

Similarly, if you customize fields for a category model (such as the Banner image of a category), these fields will also appear on the "Document Category" editing page, allowing you to fill in exclusive information for the category.

Present custom fields on the front-end page

Now, we have come to the core part - how to make these custom fields appear on the front page. AnQiCMS's template system uses syntax similar to the Django template engine, with double curly braces{{变量}}To output variables, use{% 标签 %}To implement logic control and data calling.

1. Call a single custom field

If you only want to display a specific custom field value, you can directly use the document details (archiveDetail), category details(categoryDetail）or single page details（pageDetail) tag, along withnameThe 'call field' name of the field is specified by the parameter.

For example, you have added a 'Call field' for the 'Article Model':authorYou can specify the custom field and want to display the author's name on the article detail page like this:

<p>文章作者：{% archiveDetail with name="author" %}</p>

If your custom field is under “Product Model”,materialyou can call it like this on the product detail page:

<p>产品材质：{% archiveDetail with name="material" %}</p>

For custom category fields, for example, when editing a category, a 'Called field' was added ascategory_sloganThe field can be called like this in the category list or detail page:

<p>分类口号：{% categoryDetail with name="category_slogan" %}</p>

Remember,nameThe value of the parameter must be exactly the same as the name of the 'call field' set in the 'Content Model' in the background, including the case.

2. Loop to display all custom fields (for documents)

Sometimes, a model may have multiple custom fields, and you may want to list them all without writing labels one by one. AnQiCMS providesarchiveParamsLabel, a custom field specifically used for displaying documents in a loop.

<div class="custom-fields">
    {% archiveParams params %}
    {% for item in params %}
    <p>
        <span>{{item.Name}}：</span> <!-- 显示后台设置的“参数名”（中文名） -->
        <span>{{item.Value}}</span> <!-- 显示该字段的值 -->
    </p>
    {% endfor %}
    {% endarchiveParams %}
</div>

Here,paramsThis is the name of the variable you define, which will contain an array with each element representing a custom field.item.NameIt will output the Chinese "parameter name" you set in the background,item.Valueand then output the specific content of this field.

If you want to exclude some fields that are not needed to be displayed, you can add conditional judgments in the loop:

<div class="custom-fields">
    {% archiveParams params %}
    {% for item in params %}
    {% if item.FieldName != '不想显示的字段调用名' %}
    <p>
        <span>{{item.Name}}：</span>
        <span>{{item.Value}}</span>
    </p>
    {% endif %}
    {% endfor %}
    {% endarchiveParams %}
</div>

3. Handling special field types

  • Image field:If your custom field is of image type (whether single or group), for example, the 'called field' isproduct_images, you may need to iterate over the image addresses and<img>Label display:

    {% archiveDetail productImages with name="product_images" %}
<div class="product-gallery">
    {% for imgUrl in productImages %}
    <img src="{{imgUrl}}" alt="产品图片" />
    {% endfor %}
</div>

    For the built-in thumbnail, multi-image, and other fields of the system, such asLogo(First image),Images(Group image), you can directly callarchiveDetail with name="Logo"orarchiveDetail archiveImages with name="Images"it,Imagesthe field usually also needs to be cycled to display.

  • Text/Markdown field:If the custom field is multiline text and you are using a rich text editor or Markdown editor in the background, pay special attention when outputting. To ensure the browser correctly parses the HTML or Markdown content within it, you need to use|safeFilter. If the Markdown editor is enabled, it can also be used|renderThe filter first converts Markdown to HTML:

    <div class="introduction-content">
    {% archiveDetail introContent with name="introduction" %}
    {{ introContent|render|safe }}
</div>

    |safeTell the template engine that this content is safe HTML and does not need to be escaped;|renderIs to convert Markdown text to HTML.

  • Choose type field (single choice, multiple choice, dropdown):The values of these fields will be displayed as selected options directly. If it is a multiple choice type,item.ValueMay be a string containing multiple options, you may need to perform additional processing, or display it as required in the template.

Common precautions

  1. Accuracy of the "Field called".Make sure that the template containsnameThe value of the parameter must be exactly the same as the "invoked field" name set in the "content model" on the backend, including case sensitivity. This is the fundamental factor for whether the data can be displayed correctly.
  2. Template Caching:After modifying the template file, the browser may have a cache sometimes.If the changes do not take effect immediately on the front end, you can try clearing your browser cache, or click the 'Update Cache' button in the AnQiCMS background.