How to get and display extended fields of a custom content model in AnQiCMS template?

Flexibly obtaining and displaying extended fields of custom content models in the AnQiCMS template is the key to achieving personalized content display on the website.AnQiCMS Powerful content model customization capability, allowing us to add various unique attributes to articles, products, and other content according to actual business needs. How to present these customized data vividly in the front-end template is the topic we will delve into today.

AnQiCMS Content Model Flexibility

AnQiCMS 作为一个基于 Go 语言开发的企业级内容管理系统,其核心亮点之一便是”灵活的内容模型”。This means that we are not limited to traditional fields such as 'title', 'content', etc., but can create dedicated extended fields for different content types (such as articles, products, events, etc.) based on specific business scenarios.

For example, if you are running an e-commerce website, you may need to add fields such as 'Product SKU', 'Brand', 'Stock Quantity', 'Product Specifications' in the product model; if it is a blog article, then fields such as 'Author Bio', 'Reading Time', 'References' may be required.These fields created under "Content Management" and "Content Model" in the background are all collectively referred to as extended fields of the custom content model.When creating these fields, we will set a "parameter name" (for display in the background) and a "called field" (for template calls), which is the important identifier we obtain data from in the template.

Core Thoughts on Getting Custom Fields

In the AnQiCMS template system, whether you are viewing a single document detail page or displaying content in a list page in a loop, the core idea of obtaining these custom extended fields is consistent: they are considered as part of the document (or content) object.AnQiCMS provides powerful template tags, allowing us to easily access these custom fields as if we were accessing built-in fields.

Obtaining and Displaying a Single Extended Field in the Template

When you know exactly which custom field to display,archiveDetailLabels are your preference.This tag is mainly used to get the detailed information of the current document on the document detail page. Of course, you can also get the details of other documents by specifying the ID or URL alias.

To retrieve a specific custom field, you need to usenameParameter, and set its value to the "display field" name of this field that you defined in the "content model" backend.

For example, if you have customized a field named "Product SKU" in the product model, its "Field Name" isproductSkuIf you want to retrieve and display it in the product detail page template, you can do it like this:

<p>产品 SKU:{% archiveDetail with name="productSku" %}</p>

If you want to assign it to a variable for subsequent processing, you can do it like this:

{% archiveDetail currentProductSku with name="productSku" %}
<p>当前产品的 SKU 是:{{ currentProductSku }}</p>

So, when the template is parsed, it will replace the SKU value of the corresponding product.{{ currentProductSku }}at the position.

Traverse all extended fields.

Sometimes, we may not be sure about the specific custom fields of a content model, or we may want to dynamically display all defined extended fields and their values, such as listing all product parameters uniformly on the product detail page.archiveParamsTags can be put to good use.

archiveParamsTags allow us to retrieve all custom parameters of the current document (or a specified document) and return them in the form of an array or an unordered Map object. Typically, we prefer to obtain an array object with a fixed sort order, so that we canforLoop through and display easily.

Here is an example of iterating over and displaying all custom fields on the document detail page:

<h3>产品参数:</h3>
<ul>
    {% archiveParams params %}
    {% for item in params %}
    <li>
        <strong>{{ item.Name }}:</strong>
        <span>{{ item.Value }}</span>
    </li>
    {% endfor %}
    {% endarchiveParams %}
</ul>

In this example:

  • {% archiveParams params %}Assign all custom field data of the current document toparamsa variable.
  • {% for item in params %}to iterateparamsarray.
  • {{ item.Name }}It will output the parameter name set in the background for the custom field (for example, "Product SKU").
  • {{ item.Value }}It will output the specific value of the custom field (for example, "AQ-001").

Through this method, even if you add new custom fields to the content model in the background in the future, the frontend template does not need to be modified, and it can automatically synchronize and display these new fields and their values, greatly enhancing the maintainability and flexibility of the template.

If you want to get an unordered Map object (for example, when you need to directly access its value by the 'field' field name), you canarchiveParamstag.sorted=falseParameter.

{% archiveParams params with sorted=false %}
<div>
    <span>作者:</span>
    <span>{{ params.author.Value }}</span>
</div>
{% endarchiveParams %}

Handle special field types

Custom field types are diverse, such as single-line text, numbers, multi-line text, single choice, multiple choice, dropdown, etc.Where, rich text editors or Markdown formatted fields, as well as image group fields, require some additional processing when displayed on the front end.

Rich text/Markdown content rendering

If the custom field you are storing contains rich text content with HTML or Markdown syntax (such as the "product introduction" field may contain bold text, images, etc.), output directly{{ item.Value }}The HTML tags may be displayed as plain text due to the automatic escaping mechanism of the template.

At this time, we need to usesafeFilter to tell the template that this content is safe HTML and should not be escaped:

{% archiveDetail productDescription with name="productDescription" %}
<div class="product-description">
    {{ productDescription|safe }}
</div>

If the content of your custom field is in Markdown format, you also need to use it extrarenderFilter it to HTML before using itsafeFilter:

{% archiveDetail markdownContent with name="markdownContent" %}
<div class="markdown-output">
    {{ markdownContent|render|safe }}
</div>

Image group or multiple choice field display

For custom fields such as image groups (multiple image URLs) or multiple selections (multiple values), their values are typically stored in array form. When displayed in the template, you need to use them again.forLoop to iterate through these items.

For example, if you define a field called “Product Album”, and its “Calling Field” isproductImages:

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

This example demonstrates how to iterate throughproductImagesEach image URL in the array, and display it as<img>Label.

Summary

AnQiCMS's custom content model and its flexible template tag system provide a solid foundation for us to build highly personalized and feature-rich websites.Whether it is to accurately obtain a single extended field, dynamically traverse all custom parameters, or handle special content types, AnQiCMS provides intuitive and powerful methods.Master these skills, and you can bring vitality to the website content on the frontend, better satisfying user needs and business goals.


Common Questions (FAQ)

**Q1: