How to flexibly call and display custom fields in the front-end template of the content model?

When using the Aanqi CMS to manage website content, its powerful content model and custom field features provide great flexibility for the personalized needs of the website.很多时候，我们不仅需要发布常规的文章标题、内容等，还需要针对特定类型的文章或产品，添加一些独有的信息，比如文章的作者、产品型号、上市日期、特殊卖点等。This information is exactly implemented through content model custom fields.How can you flexibly call and display these custom fields in the website front-end template?This is the issue we need to delve into today.

Understanding content models and custom fields

Firstly, let's briefly review the concepts of content model and custom fields in the security CMS.Content model, as the name suggests, is like a tailor-made 'skeleton' or 'template' for different types of content.For example, you can create an "article modelEach model includes a set of standard fields (such as title, content, categories, etc.), and the Safe CMS allows us to add 'custom fields' for each model.

The type of custom fields is very rich, including single-line text (used for short text input, such as author name), numbers (used for prices, inventory, etc.), multi-line text (used for long descriptions), single choice, multiple choice, and drop-down selection (used for selecting predefined options).In the background, we can easily configure these custom fields for a content model, setting their names, field names, types, whether they are required, and default values.These settings completed, when we publish content under this model, we can see the corresponding custom field input box, which is convenient for entering various personalized data.

Basic of front-end template calling

The frontend template system of AnQi CMS is based on Django template engine syntax, which means it has a powerful and intuitive variable and tag calling mechanism. In template files, we use double curly braces{{变量}}Print the value of the variable, not using single curly braces and percent signs{% 标签 %}Execute logic control or call specific functions. The value of custom fields is essentially part of the content data as well, and it also follows this set of calling rules.

All template files are stored in:/templatein the directory, static resources (CSS, JS, images) are in/public/static/. Variable names usually follow camelCase naming conventions (e.g.,archive.Title), which is convenient for understanding and use.

Flexible invocation of the core tags of custom fields

In Auto CMS, calling content model custom fields mainly depends on two core tags:archiveDetailandarchiveParams.

1. UsearchiveDetailTags call specific custom fields

When you know the 'call field' name of the custom field,archiveDetailThe label is a direct and efficient calling method. This label is mainly used to obtain detailed data of the current document or a specified document on the document detail page.

Calling method: {% archiveDetail 变量名称 with name="自定义字段的调用字段名" %}

Among them,变量名称can be omitted, if omitted, the label will directly output the value of this field. If specified变量名称, then the obtained value can be assigned to this variable, and used in the template later by{{变量名称}}.

Example scenario:假设我们为“Article Model”添加了一个名为“Author (Field: author）”'s single-line text field, and added a field named "Product Batch Number (call field:batch_number)”'s single-line text field.

  • Called author in the article detail page:

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

    or assign the value to a variable and use it:

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

  • Call the product batch number on the product details page:

    <p>产品批次号：{% archiveDetail with name="batch_number" %}</p>

handle special field types:

  • Group photo field (for example, namedproduct_imagesCustom field of the group photo:Group image fields usually return an array of image URLs. In this case, you need to loop through to display all images:.

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

  • Rich text fields (such as namedfull_descriptionThe multiline text field, using Markdown or rich text editor):If the custom field stores HTML content or Markdown content, directly outputting it may display the original tags. At this time, it is necessary to usesafeFilter orrenderFilter to parse HTML or render Markdown:

    <div class="full-description">
    {% archiveDetail productDescription with name="full_description" %}
    {{ productDescription|safe }}  {# 如果是HTML内容 #}
    {# 或者 {{ productDescription|render|safe }} 如果是Markdown内容 #}
</div>

    renderFilter will convert Markdown content to HTML,safeThe filter ensures that HTML content is displayed directly without being escaped.

2. UsearchiveParamsThe tag iterates over all custom fields

When you are unsure about the available custom fields, or need to display all custom fields and their values in a unified manner,archiveParamsLabels are very useful. They can retrieve all custom parameters of the current document or a specified document.

Calling method: {% archiveParams 变量名称 with id="文档ID" sorted=true %}

  • 变量名称: Used to receive an array or Map object of all custom fields.
  • id：Optional parameter, used to specify which custom field of the document to retrieve. If omitted, the document of the current page is retrieved by default.
  • sorted：Optional parameter, the default istrue.
    • sorted=true（Default）：变量名称It will be an ordered array, each element containingName(parameter name, i.e., Chinese name) andValue(parameter value). This method is suitable forforlooping through and displaying.
    • sorted=false:变量名称It will be an unordered Map object, you can use变量名称.调用字段名.Nameand变量名称.调用字段名.ValueDirectly access specific fields.

Example scenario:We hope to display all product parameters on the product details page, and these parameters may be dynamically added or modified in the backend.

  • Display all custom fields in an ordered array format:

    <div class="product-parameters">
    <h3>产品参数</h3>
    <ul>
        {% archiveParams params %} {# 默认 sorted=true #}
        {% for item in params %}
            <li>
                <span>{{ item.Name }}：</span>
                <span>{{ item.Value }}</span>
            </li>
        {% endfor %}
        {% endarchiveParams %}
    </ul>
</div>

    This method is very suitable for displaying parameters with generality, without knowing the specific field names for each call.

  • Access specific custom fields directly in an unordered Map:Suppose we havematerial(Material) andweight(Weight) two custom fields.

    <div class="product-specs">
    {% archiveParams productSpecs with sorted=false %}
    <p>材质：{{ productSpecs.material.Value }}</p>
    <p>重量：{{ productSpecs.weight.Value }}</p>
    {% endarchiveParams %}
</div>

    The advantage of this method is that it can directly obtain it by calling the field name of the custom field, but it needs to ensure that the field name of the custom field is known and stable.

Combine actual page construction

In the actual construction of websites, the flexible invocation of custom fields can greatly enhance the richness of content display.For example, a product page of an e-commerce website can use custom fields to display various product attributes: color, size, material, stock, origin, etc.An article page of a content website, which can display the originality declaration of the article, citation sources, affiliated column, etc.

Common steps:

  1. Determine the content type:What different types of content are needed, such as news, products, cases, etc.
  2. Create/Edit content model:Create or edit the corresponding content model in the AnQi CMS backend.
  3. Add custom fields:According to the content type requirements, add necessary custom fields to the model, and carefully define the names and types of 'invocation fields'.
  4. Design the front-end template:IntemplateThe corresponding template file under the catalog (for example, article detail pagearchive/detail.html), usearchiveDetailorarchiveParamsusing tags to call and display these custom fields.
  5. Content Publishing:Enter data for custom fields when publishing content in the background.

By following these steps, we can fully utilize the custom field feature of AnQi CMS to build highly customized and expressive website content.

Common Questions (FAQ)

  1. Why am IarchiveListCannot access directly in loopitem.我的自定义字段Call? archiveListTags are mainly used to obtain common basic fields of document lists, such as title, link, description, etc. To maintain the efficiency of list queries and data conciseness, it does not default to including all custom fields.itemObject inside. If you need to display custom fields on the list page, the recommended practice is toarchiveListwithin the loop, for eachitemUsearchiveDetailtag (via)id=item.Idparameter to specify the current document) orarchiveParamsTag to get and display its custom fields. However, if the value of the custom field is only used as a filter or simple prompt on the list page, it can also be considered to set this field through the background settings,archiveListThe query parameter is explicitly specified, but this usually increases the complexity of the database query.

  2. I have a custom field that is a checkbox. How can I display all selected values on the frontend?The custom field of checkbox type is usually stored on the backend as a string containing multiple values (for example值1,值2,值3), or an array. You can use it in the frontend template.splitFilter this string by delimiter (usually comma,) to split it into an array, and then iterate over the array to display all selected values. For example:forFilter this string by delimiter (usually comma) For example:

    {% archiveDetail selectedOptions with name="my_multi_select_field" %}
<ul>
{% for option in selectedOptions|split:"," %}
    <li>{{ option }}</li>
{% endfor %}
</ul>

  3. I have customized a rich text editor field, why does it directly display as text with HTML tags?The content stored in a rich text editor is usually text with HTML tags.