How to accurately display the field data of a custom content model on the front-end page?

In AnQiCMS, we often need to create various types of content according to the actual needs of the website.The powerful custom content model feature of AnQiCMS is designed to meet this flexibility.It allows us to define exclusive fields for different types of content (such as articles, products, cases, etc.), thus more accurately managing and displaying information.How can we accurately call and display these custom field data on the front page of the website?

This process is usually divided into two major parts: first, understanding the settings of the backend custom fields, and second, mastering the method of calling the front-end template.

Step 1: Understand the definition of custom content model and fields

In the AnQiCMS backend, the management of all custom content models is concentrated under the "Content Management" module under the "Content Model".When creating a new content model or editing an existing model, you can add a "custom field" to the model.

When defining each custom field, there are several key properties that we need to pay attention to:

• Parameter name:This is the friendly name displayed on the background interface for editors, such as "Product Features
• Call field:This is the most important property.It is the unique identifier we use in the front-end template to refer to this custom field, usually recommended to use lowercase English letters as it will serve as a variable name in the code.productFeaturesThe call field defined for "Author Introduction" might beauthorBio.
• Field type:AnQiCMS supports various field types such as single-line text, numbers, multi-line text, single choice, multiple choice, dropdown selection, and so on.The type of field determines the input form of the data in the background and indirectly affects the display on the front end.
• Default:If the field has a default value, the system will automatically use the default value set here if the content editor does not fill it in.

Understanding these definitions, we have laid a solid foundation for displaying data accurately on the front page. The front-end template will mainly obtain the corresponding data through 'field calls'.

Second step: Call custom field data in the front-end template

AnQiCMS template system uses syntax similar to Django template engine, using double curly braces{{变量}}To output variables, use single curly braces and percent signs{% 标签 %}To call function tags.

1. In the content detail page (archiveDetailLabel) shows custom fields

On browsing the detail page of specific content (for example{模型table}/detail.htmlor{模型table}/{文档id}.htmlfor this type of template) we usually usearchiveDetailtags to get the detailed data of the current document.

Directly call the field name to get a single custom field:If the custom field is a single text, number, or simple option, and we know its exact "call field" name, we can directly pass througharchiveDetailtags, and specifynameThe parameter is the 'call field' for this field to retrieve.

For example, suppose we define a call field for the 'article' model.source(Article Source) custom field, it can be displayed like this on the article detail page:

<div>文章来源：{% archiveDetail with name="source" %}</div>

Or, assign it to a variable and output it:

{% archiveDetail articleSource with name="source" %}
<div>文章来源：{{ articleSource }}</div>

Iterate over all custom fields (archiveParamsTag):When a content model has customized multiple fields, or we want to traverse and display all custom fields in a more general way,archiveParamsTags make it very convenient. It can retrieve all the custom parameters of the current document.

archiveParamsTags can have two main usages:

• Traverse in array form (recommended):By default, or specifiedsorted=truethen,archiveParamsReturns an array containing all custom fields. Each element in the array is an object, typically containingNameand (parameter name)Value(Field data) two properties. This is very suitable for useforto display in a loop.

  {% archiveParams params %}
  <div>
      {% for item in params %}
      <div>
          <span>{{item.Name}}：</span>
          <span>{{item.Value}}</span>
      </div>
      {% endfor %}
  </div>
  

  This code will list all the custom field parameters and their values defined for the current content in the background.

• Access directly in Map (key-value pair) (understand):If specifiedsorted=false,archiveParamsIt will return a Map object, and we can directly access throughparams.调用字段名.ValueTo access the value of a specific field. This method can be used when you need to access a custom field accurately but it is not convenient to do so directlyarchiveDetail with name="字段"and can be used as a supplement.

  {% archiveParams params with sorted=false %}
      <div>作者简介：{{params.authorBio.Value}}</div>
      <div>产品特点：{{params.productFeatures.Value}}</div>
  {% endarchiveParams %}
  

Handle rich text or Markdown custom fields:If the type of a custom field is multi-line text and the Markdown editor is enabled in the background, or the content itself is rich HTML text, then when displayed on the front end, in order to ensure that the HTML tags are correctly parsed by the browser, we need to usesafeFilter. Also, if the content is in Markdown format, we may need to userender=trueparameters to ensure that Markdown is correctly converted to HTML.

{% archiveDetail richTextContent with name="rich_content" render=true %}
<div>详细描述：{{ richTextContent|safe }}</div>

2. On the content list page (archiveListLabel) shows custom fields

On the list page (such as article list page or product list page), we need to iterate over multiple content items.archiveListThe tag will return a collection of content, and we areforLoop to get eachitem(i.e., each piece of content) data.

To display custom fields for each content in the list, we cannot directly callarchiveListofforoutside the looparchiveParams, but need toforWithin the loop, for the currentitemUse againarchiveParamsLabel, and throughidPassing the current loop item as aId.

For example, displaying the custom "author" field of each article in a list of articles:

`twig {% archiveList archives with type=“page” limit=“10” %}

{% for item in archives %}
<article>
    <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
    <div>
        {# 在这里获取当前文章的自定义字段 #}
        {% archiveParams articleCustomFields with id=item.Id %}
            {% for field in articleCustomFields %}
                {% if field.Name == "作者" %} {# 假设自定义字段的参数名为“作者” #}
                    <span>作者：{{field.Value}}</span>
                {% endif %}
            {% endfor %}
        {% endarchiveParams %}
        <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>