AnQiCMS with its flexible content model features, brings us great convenience in managing various types of website content.Whether it is articles, products, activities, or any other content type that requires special fields, we can easily customize fields in the background to meet unique business needs.But when we eagerly create new fields in the background and fill them with data, new problems also arise: how to accurately display these newly added custom field data on the website's frontend page to visitors?

Don't worry, AnQiCMS's template system provides a very intuitive and powerful way to handle this issue.This article will guide you step by step to understand how to make your custom content model fields vivid in the frontend template.

Understand the template mechanism of AnQiCMS

Before we delve into the operation, we first need to have a basic understanding of AnQiCMS's template mechanism.AnQiCMS's template system adopts the Iris framework built-in template engine written in Go language, which is very easy to use in terms of syntax, similar to Django template engine.

in AnQiCMS, template files are usually named.html为后缀，并存放在 English/templatein the template folder. We use{{ 变量 }}Output data, through{% 逻辑标签 %}To implement conditional judgment, loops, and other complex logic. Understanding these basic elements is the foundation for successfully displaying custom field data.

Display specific custom field data on the content detail page.

The most common requirement is to display a specific field data added to the content model on content detail pages such as article detail pages, product detail pages, and other content detail pages.For example, you may have added a "article author" field to the "article model" or a "product color" field to the "product model".

To display these fields, we need to usearchiveDetailtags. This tag is usually used to obtain detailed information about the current document, and it also perfectly supports obtaining our custom fields.

Operation Steps:

  1. Find the corresponding template file:If you are modifying the article detail page, the corresponding template file may be:article/detail.html(If the default folder organization mode is used) orarticle_detail.html(If flat file organization mode is used). Product detail page may beproduct/detail.htmlorproduct_detail.html.

  2. UsearchiveDetailTags:Find the position where you want to display the custom field in the template file, and then use the following syntax:

    {# 假设您在后台自定义了一个名为“文章作者”，其“调用字段”为“author”的字段 #}
<div>
    文章作者：{% archiveDetail with name="author" %}
</div>


{# 或者，您可以先定义一个变量来存储字段值，再输出，这样更灵活 #}
{% archiveDetail articleAuthor with name="author" %}
<div>
    文章作者：{{ articleAuthor }}
</div>

    Here is the most critical pointname="author"This part,authormust be exactly the same as the "Trigger Field" you filled in for this custom field in the "Content Model" settings on the backend (case-sensitive).

    Similarly, if you have added a 'Product Color' field to the 'Product Model', its 'Call Field' iscolorThen in the product details page template, you can display it like this:

    {# 产品颜色自定义字段，调用字段为“color” #}
<div>
    产品颜色：{% archiveDetail with name="color" %}
</div>

    For single-page (pageDetail) and categories (categoryDetail) are similar in usage, justarchiveDetailwithpageDetailorcategoryDetailuse it, and make surenamethe parameters correspond to the custom fields under the model.

Flexible traversal and display of all custom field data

Sometimes, we may not want to list each custom field individually, but rather want to automatically traverse and display all defined custom parameters and their values in a region (such as a product parameter list). In this scenario,archiveParamsTags come into play.

archiveParamsThe label will return an array object containing all custom field names and values, we can iterate through and display them byfora loop.

Operation Steps:

  1. Introducing in the templatearchiveParamsTags:

    {# 假设这是产品详情页，需要在一个区域展示所有自定义参数 #}
<div class="product-parameters">
    <h3>产品详细参数</h3>
    {% archiveParams params %}
        {% for item in params %}
            <div class="parameter-item">
                <span class="parameter-name">{{ item.Name }}：</span>
                <span class="parameter-value">{{ item.Value }}</span>
            </div>
        {% endfor %}
    {% endarchiveParams %}
</div>

    In this example,paramsIt is the variable name defined by us, which includes all the custom parameters of the document. It is used in the loop,item.Nameto output the Chinese name of the parameter (i.e., the 'parameter name' you fill in the background),item.ValueIt will output the value corresponding to the parameter.

    archiveParamsBy default, it will return an array sorted, if you need to access directly through the field "call field" in some special cases, you can usesorted=falseParameter, it will return an object in the form of a key-value pair (map). For example, if you have a field calledmaterialThe custom field: “`twig {% archiveParams customFields with sorted=false %}

    产品材质：{{ customFields.material.Value }}

    {% endarchiveParams %}