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

When managing content in AnQi CMS, we often encounter situations where we need to add more personalized data to articles, products, or pages, such as the author of the article, the source of the content, or specific parameters of the product, or specific attributes of the event page, etc.This additional customization information is referred to as 'custom fields'.The powerful content model function of AnQi CMS makes the creation and management of custom fields very convenient, and more importantly, how to accurately and beautifully present these meticulously entered custom fields on the front page of the website is a concern for every operator and developer.

This article will take you deep into how Anqi CMS presents these custom document fields cleverly on your website page.

Backend configuration: Create custom fields

You need to define the custom fields in the backend first in order to display them on the front end.AnQi CMS 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, in the "Content Model Custom Fields" area, you can start adding custom fields.

When adding fields, there are several key pieces of information that need to be filled in:

  • Parameter NameThis is the field name in the background management interface and template for you to identify, such as "article author", "content source".
  • Field invocationThis is the unique English identifier that is actually referenced in the database and template, for example, you can set the call field for "article author" toauthorSet the calling field for "Content Source" tosourceThe name of this "calling field" is the key we use to retrieve data in the front-end template.
  • Field type: Anqi CMS supports various field types, such as single-line text, numbers, multi-line text, single choice, multiple choice, and dropdown selection, etc.Choose the appropriate field type, which ensures the accuracy of the data you enter and also affects the frontend display.
  • Mandatory?According to the importance of the field, you can set it as required.
  • Default valueIf the field often has a fixed value, you can set a default value so that when the content is published, if it is not filled in manually, 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, the parameter name is "article author", and the field name is calledauthorThe field type should be selected as 'Single line text'. Similarly, a 'Content Source' field can be added, with the field name beingsource. When you are editing specific article content, these custom fields will appear in the "Other Parameters" area, where you can fill in the corresponding information.

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

After the custom field is configured and filled in the background, the next step is to figure out how to display them in the front-end HTML template through the AnQi CMS template engine tags. The AnQi CMS template engine syntax is similar to Django, and variables are enclosed in double curly braces{{变量}}Logical tags are represented by single curly braces and percent signs{% 标签 %}.

There are usually two main ways to display custom fields in front-end templates:

Method one: Directly call the specific custom field

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

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

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

here,name="author"This is the field called by our backend. Written like this, the template engine will automatically identify the ID of the current article and retrieve the correspondingauthorandsourcefield value to display.

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 displaying specific information at a fixed position on the page.

Method two: Loop through all custom fields

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,archiveParamsThe tag comes 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 through a loop.

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

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

<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 the 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, "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 judgments 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 may vary, but the core principle remains the same:

  • Single-line text, numbers, multi-line text:item.ValueThey will be their values directly. If multiline text may contain HTML, remember to use|safea filter to ensure that the HTML content is rendered correctly, for example{{ item.Value|safe }}.
  • image groupIf you define a custom field of image group type (such as calling field asarcimages), itsValueIt will be an array of image URLs. You need to traverse it like a normal array to display each image:
    
{% archiveDetail customImages with name="arcimages" %}
    {% for imgUrl in customImages %}
        <img src="{{ imgUrl }}" alt="" />
    {% endfor %}
{% endarchiveDetail %}
  • Single choice, multiple choice, dropdown choice:item.ValueIt will be the text value selected by the user. If multiple selections are made,item.ValueIt will be a string or an array containing multiple options, depending on the backend storage method, which may require further processing (such as using|splitfilter splitting).

Some practical tips:

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