How to display custom field content of different content models in the frontend template?

The content model feature of AnQiCMS brings great flexibility to website operations, allowing us to define various personalized content structures according to the actual needs of the business.Whether it is an article, product, event, or any other custom content type, we can add unique fields to it.How can we flexibly display the custom fields in the content models on the website front-end template?Let's explore this practical skill together.

Understanding AnQiCMS content models and custom fields

When using AnQiCMS for content creation, we are not limited to basic fields such as article title and content.Through the content model feature, we can create dedicated data fields for different types of content.For example, if your website needs to display product information, you may add custom fields such as 'Product Model', 'Product Model Number', 'Product Color', 'Stock Quantity', 'Product Details Gallery', and so on.These fields make your content more structured and facilitate quick access to the information you need.

These custom field settings are usually found under the 'Content Model' feature in the 'Content Management' section of the AnQiCMS backend.Here, you can choose to edit an existing model (such as "Article Model" or "Product Model"), or create a new content model.In the model editing interface, you will see a region for "content model custom fields".Here, we can add new fields and specify their 'parameter name' (for backend display), 'field name' (for frontend template, it is recommended to use lowercase letters and unique), 'field type' (such as single-line text, number, multi-line text, single selection, multiple selection, dropdown selection, etc.), as well as whether it is required and the default value.

For example, suppose we add a custom field named "Product Model" with the "field name" set tomodel_number. We may also have added a 'Product Highlight' field, whose 'trigger field' ishighlights, field type is 'Multi-line text', used to describe the product's unique advantages.

Display custom field content in the front-end template

AnQiCMS front-end template uses syntax similar to Django, variables are passed through double curly braces{{ }}output while the label is used{% %}wrapped. When we need to display custom fields of the content model in a template, we mainly usearchiveDetail/categoryDetailorpageDetailetc. detail tags, as well asarchiveParams.

1. Show single custom field content

If you know exactly which custom field to display and it is typically a single-line text or a number, you can use it directly.archiveDetailTag (in document detail page),categoryDetailTag (in category detail page) orpageDetailTag (in single page detail page) to call.

For example, on the product detail page, we want to display the product model (model_number):

<p>产品型号：{% archiveDetail with name="model_number" %}</p>

If you wish to assign this value to a variable for later use, you can also do it like this:

{% archiveDetail productModelNumber with name="model_number" %}
<p>产品型号：{{ productModelNumber }}</p>

This method is concise and clear, suitable for scenarios where we know the custom field names.

2. Process custom fields containing multiple or rich text content

The type of some custom fields may be multiple choice, group images, or rich text content like 'Product Highlights'.These fields' data is usually stored in arrays or with HTML structure, and we need to handle it specially.

Multi-value fields (such as: product galleries, multiple selections):If your custom field (such asproduct_imagesIt stores an array of images or multiple choice values, you need to combineforloop to traverse and display them.

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

Rich text or Markdown content:When the custom field type is a multiline text editor (usually supporting rich text editing or Markdown format), the content may contain HTML tags. In order to ensure that these contents can be correctly parsed and displayed by the browser and styles, we need to use|safeFilter. If the background content settings have enabled the Markdown editor and the field content is in Markdown format, then it is necessary to use first|renderThe filter converts it to HTML and then|safefilter.

For example, display “Product highlights” (highlights) the content of the field:

{# 假设 highlights 是富文本内容 #}
<div class="product-highlights">
    {{ archiveDetail with name="highlights" | safe }}
</div>

{# 假设 highlights 是 Markdown 内容，且后台启用了 Markdown 编辑器 #}
<div class="product-highlights">
    {{ archiveDetail with name="highlights" | render | safe }}
</div>

Tip:When you are on the list page (such asarchiveListWithin the loop) When you need to display custom fields, you can directly accessitem.自定义字段名for example{{ item.model_number }}.

3. Dynamically traverse and display all custom fields

If you want to display all custom fields and their values dynamically under a content model in a template (for example, in the product parameter area),archiveParamsLabels can be very useful. They will return a list of custom fields, you can iterate through them withfora loop.

<div class="product-parameters">
    <h3>产品参数</h3>
    {% archiveParams params %}
        {% for item in params %}
        <p>
            <span>{{ item.Name }}：</span> <!-- 自定义字段的显示名称 -->
            <span>{{ item.Value }}</span> <!-- 自定义字段的值 -->
        </p>
        {% endfor %}
    {% endarchiveParams %}
</div>

Hereitem.NameIt will display the parameter name you set in the background (for example, the product model), anditem.ValueThe content filled in this field will be displayed. This is especially convenient for building flexible product parameter tables or information blocks.

If a certainitem.ValueField contains HTML or Markdown content, don't forget to add|safeor|render|safefilter.

4. Call to custom fields of other content models

In addition to document models, category models and single pages can also have custom fields. The calling method is similar to that of document models, just replace the tag name withcategoryDetailorpageDetailJust do it.

For example, display the custom 'feature description' field of the category on the category detail page (using the field namefeature_desc):

<div class="category-feature">
    <h4>特色描述</h4>
    {{ categoryDetail with name="feature_desc" | safe }}
</div>

Practical suggestions

• Naming conventions:When setting up custom fields in the background，“field name”