How to display custom fields (such as author, source) of AnQi CMS on the front-end page?

This article will guide you to delve deeper into how the Anqi CMS presents these custom fields cleverly on your website page.

Backend Configuration: Create custom fields

To make custom fields visible on the front-end, you first need to define them on the back-end.AutoCMS provides a flexible content model, allowing you to add dedicated fields for different content types (such as articles, products) based on your business needs.

After logging into the backend, we can find the 'Content Model' option under the 'Content Management' menu.Here, you can select an existing model (such as "Article Model") or create a new content model.After entering the model editing page, you can start adding custom fields in the "Content Model Custom Fields" area.

When adding a field, several key pieces of information need to be filled in:

  • Parameter nameThis is the Chinese name of the field for identification in the background management interface and template, for example, 'Article Author', 'Content Source'.
  • Call fieldThis is the unique English identifier actually referenced by the field in the database and the template, for example, you can set the calling field for "article author" asauthor，of “Content Source” set the call field tosource. The name of this “call field” is the key we use to get data in the front-end template.
  • field type：Security CMS supports various field types such as single-line text, numbers, multi-line text, single selection, multiple selection, and dropdown selection, etc.Select the appropriate field type, which can ensure the accuracy of the data you enter, and also affects the display method on the front end.
  • Is requiredAccording to the importance of the field, you can set it as a required item.
  • Default valueIf the field often has a fixed value, you can set a default value, so that when publishing content, if it is not manually filled in, the default value will be applied automatically.

For example, if we want to add an "author" field to an article, we can add a new field in the article model, with the parameter name as "Article Author", and the field name to be called asauthor，field type selection “single line text”. Similarly, you can add a “content source” field, the field name issourceWhen you are editing specific article content, these custom fields will appear in the 'Other Parameters' area for you to fill in the corresponding information.

Front-end display: Let custom information leap onto the screen

When the custom field is configured and filled with data in the background, the next step is how to display them in the front-end HTML template by using the template engine tags of AnQi CMS. The syntax of AnQi CMS template engine is similar to Django, with variables enclosed in double curly braces{{变量}}English labels use single curly braces and percent signs{% 标签 %}.

Custom fields are displayed in the front-end template, usually in two main ways:

Method one: Directly call specific custom fields

If you clearly know the name of the "call field" of a custom field (for exampleauthororsource), and you want to display its value directly on the article detail page or other specific locations, you can usearchiveDetailLabel to accurately obtain.

In the article detail page (for example){模型table}/detail.htmlYou can call it like this in the template of ）.

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

Here,name="author"就是我们后台设置的“调用字段”。这样写，模板引擎会自动识别当前文章的ID，并获取对应的authorandsource字段值进行显示。

You can also assign the field value to a variable first, and then use:

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

This method is especially suitable for scenarios where specific information needs to be displayed at a fixed position on the page.

方法二：循环遍历所有自定义字段

Sometimes, you may want to dynamically display all custom fields and their values, or be unsure about which custom fields there are, and need to render based on actual data. At this time,archiveParamsLabels come into play. It can retrieve all the custom parameters set for the current document (article, product, etc.) and allows you to display them one by one in a loop.

archiveParamsLabels usually return custom fields as an array object, each object containing theName(parameter name, that is, display name) andValue(field value).

In the article detail page, you can dynamically display all custom fields like this:

<h3>更多文章信息</h3>
<div>
    {% archiveParams params with sorted=true %}
        {% for item in params %}
            <div>
                <span>{{ item.Name }}：</span>
                <span>{{ item.Value }}</span>
            </div>
        {% endfor %}
    {% endarchiveParams %}
</div>

This code will iterate over all custom fields of the current article and list them in the form of "Parameter name: field value". For example, if the article has two custom fields such as "Author" and "Source", it will display:

Author: Zhang San Source: Some News Website

If you want to control the display more finely, for example, to skip certain fields, you can add conditional judgment in the loop:

{% archiveParams params %}
    {% for item in params %}
        {% if item.Name != '文章作者' %} {# 假设你不想显示“文章作者”这个字段 #}
            <div>
                <span>{{ item.Name }}：</span>
                <span>{{ item.Value }}</span>
            </div>
        {% endif %}
    {% endfor %}
{% endarchiveParams %}

Handling of special field types

For different types of custom fields, the data format displayed on the front-end will vary, but the core principle remains the same:

  • Single-line text, numbers, multi-line text:item.ValueIt will be their values directly. If multiline text may contain HTML, remember to use|safea filter to ensure that HTML content is rendered correctly, for example{{ item.Value|safe }}.
  • Image group：If you define a custom field of image group type (such as the field name being calledarcimages)，itsValueIt will be an array of image URLs. You need to loop through it again like a regular array to display each image:
    
{% archiveDetail customImages with name="arcimages" %}
    {% for imgUrl in customImages %}
        <img src="{{ imgUrl }}" alt="" />
    {% endfor %}
{% endarchiveDetail %}
  • 单项选择、多项选择、下拉选择:item.ValueIt will be the text value selected by the user. If multiple selections are made,item.ValueThis will be a string or an array containing multiple options, depending on the backend storage method, and may require further processing (such as using|splitfilter split).

Some tips in practice:

  1. Keep the called field consistentWhen setting a custom field in the background, the name of 'called field' must be kept in English