How to ensure that 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.The built-in article and product models are powerful, but sometimes they still cannot meet specific business needs.At this moment, the custom fields in the content model become our reliable assistants, making website content management more flexible.But how can we ensure that the custom fields are set up correctly so that they can be displayed properly on the website front-end, allowing visitors to see them?Today, let's delve deeply into this issue.

Creating and managing custom field of content model

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

Whether editing or adding a model, the core is to add new fields in the "Content Model Custom Fields" area. Each field added requires filling in several key pieces of information:

  • Parameter name:This is the Chinese name displayed in the background, which is convenient for you to understand the purpose of this field, such as 'article author', 'product size'.
  • Call field: This is the most critical item.It is a name composed of English lowercase letters, for exampleauthor/product_size/images_gallery. This name is used to identify and call the data field in the template. It is essential to ensure its accuracy and it is recommended to use meaningful English names to avoid conflicts with system built-in field names.
  • Field type:AnQiCMS supports various field types such as single-line text, numbers, multi-line text, single choice, multiple choice, and drop-down selection.Select the appropriate field type to ensure you have the correct input method when filling in the content in the background.
  • Mandatory?:Set the field to be required according to the requirement.
  • Default:If this field needs a default value, it can be entered here. For selection type fields, 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.

When you create or edit specific documents (articles, products, etc.) in the background, these custom fields will appear in the editing interface.For example, on the "Add Document" page, you will see these custom fields in the "Other Parameters" collapse box.Based on the previously defined field type, you can enter the corresponding content here, such as the 'author' of the article, the 'material' of the product, etc.If a field is set to a default value and you do not fill it manually, the default value will be displayed when the front-end is called.

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

Present a custom field on the front-end page

Now, we have come to the most critical part - how to make these custom fields appear on the front page. The AnQiCMS template system uses syntax similar to the Django template engine, using double curly braces{{变量}}Use to output variables,{% 标签 %}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) tags,配合nameSpecify the field name of the 'invoked field' by parameter.

For example, you have added a "trigger field" for the "article model" calledauthorCustom field, and you want to display the author's name on the article detail page, you can write it like this:

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

If your custom field is under the "Product Model"materialand you can call it like this on the product details page:

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

For a category custom field, for example, when editing a category, a 'called field' is 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 must match the name of the 'callback field' set in the 'content model' on the backend, including case sensitivity.

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 providesarchiveParamsThe label, used specifically to display the custom field of the document 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,paramsIt is the name of the custom variable you have created, which will contain an array, with each element representing a custom field.item.NameIt will output the Chinese parameter name set in the background, whileitem.Valueit will output the specific content of this field.

If you want to exclude some fields that do not need 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. Handle special field types

  • Image field:If your custom field is of image type (whether it is a single image or a group of images), for example, the 'call field' isproduct_images, you may need to traverse the image addresses and use<img>Label display:

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

    For system built-in thumbnail, multi-image fields such asLogo(Lead image),Images(Group image), you can directly callarchiveDetail with name="Logo"orarchiveDetail archiveImages with name="Images"to call,ImagesThe field usually also needs to be displayed in a loop.

  • Rich 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 to the output. To ensure that 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 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;|renderIt is then converting Markdown text to HTML.

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

Common precautions

  1. Accuracy of 'Call field':Make sure the template containsnameThe value of the parameter must be consistent with the "Call field" name set in the background "Content Model", including case sensitivity. This is the fundamental factor for whether the data can be displayed correctly.
  2. Template cache:After modifying the template file, the browser may have a cache sometimes.If the front-end does not take effect immediately, you can try to clear the browser cache, or click the "Update Cache" button in the AnQiCMS background.