How to flexibly display custom content model fields on the front end of AnQiCMS?

In the world of content management, flexibility is the key to website success.很多时候，我们发现标准的“文章”或“产品”内容模型并不能完全满足我们独特的业务需求，比如需要为某个特定类型的商品添加“材质”、“尺寸”等独有属性，或者为活动详情页增加“报名截止日期”、“活动地点”等信息。This is where AnQiCMS's powerful custom content model function can shine.

So, when we meticulously design these custom fields for the content model in the background, how巧妙ly and flexibly are they displayed on the frontend page?

English, in the background, build a custom content model basis

AnQiCMS knows the diversified needs of content structure.It allows us to create and configure our own content model based on business scenarios.This is like customizing an 'information table' for different types of content.

To start, we usually enter the AnQiCMS backend management interface, find the "Content Management" under the "Content Model" feature.Here, we can modify the built-in "article model" or "product model", or create a completely new custom model.

On the configuration page of the custom model, the most core part is the 'Content Model Custom Fields'. We will set several key properties for each field:

  • Parameter nameThis is the display name of the field in Chinese, which is convenient for us to understand and manage in the background. For example, 'author', 'material of the product'.
  • Call fieldThis is the unique identifier called in the template, usually it is recommended to use English lowercase letters or camel case, such as “author”, “productMaterial”.This name is the key for front-end display.
  • field type：AnQiCMS provides various field types, such as single-line text, number, multi-line text (supports Markdown), single selection, multiple selection, dropdown selection, etc.Choose the appropriate type, which can ensure the validity of the data and the convenience of front-end display.
  • Is requiredDetermines whether the field must be filled in when the content is published.
  • Default valueEnglish: Especially for fields of selection type, we can preset option values here, one per line.

After the configuration is completed, when we go to "Add Document

English: Two, skillfully present custom fields in the front-end template

Completed the backend custom field configuration and content entry, and the next step is to present them in the front-end template.AnQiCMS adopted a syntax similar to Django template engine, making field calls intuitive and powerful.

English: 1. Directly call known custom fields

If we clearly know the name of the 'Call Field' of the custom field to be displayed, we can directly use it on the document details page (or other supported pages)archiveDetailyou can get it by tag.

We have added a custom field named "article source" for the "article model", with its "field call" setting tosourceThen we can call it like this in the article detail template:

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

If this field needs to be displayed on the list page (assuming that the field is included in the data when the list is queried), then it can be accessed directly:archiveListIn the loopitemin the object,

{% archiveList archives with type="list" limit="10" showFlag=true %}
    {% for item in archives %}
    <li>
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>文章来源：{{item.Source}}</p> {# 这里的'Source'是小写'source'的驼峰转换形式，具体以实际数据结构为准 #}
    </li>
    {% endfor %}
{% endarchiveList %}

2. Flexible traversal and display of all custom fields

The most powerful flexibility of AnQiCMS is that even if we are not clear about which custom fields a certain model defines, we can stillarchiveParamsTags are dynamically traversed and displayed. This is very useful for developing general-purpose templates or for scenarios where frequent field changes occur.

archiveParamsLabels can retrieve all custom fields and their values of the current document (or specified document) and return them in the form of a iterable array object.

<div class="custom-fields-section">
    <h4>更多详情：</h4>
    {% archiveParams params %}
    <ul>
        {% for item in params %}
        <li>
            <strong>{{ item.Name }}：</strong> <!-- 显示后台设置的“参数名” -->
            <span>{{ item.Value }}</span> <!-- 显示字段值 -->
        </li>
        {% endfor %}
    </ul>
    {% endarchiveParams %}
</div>

In this example,paramsis an array that contains all the custom field information.item.Namecorresponds to the 'parameter name' set on the backend (such as 'article author').item.ValueIt corresponds to the specific content of this field. In this way, the front-end can automatically adapt and display regardless of how many custom fields are added or modified in the background.

3. Handling Display Details of Different Field Types

Different field types may require some additional handling during display:

  • Multi-line text (especially Markdown)：If the background content editor is enabled for Markdown and the custom field type is multiline text, then it is usually necessary to use in the front-end display.|renderThe filter renders Markdown syntax to HTML, then combines.|safeThe filter, to avoid HTML code from being escaped and displayed directly.
    
{% archiveDetail articleIntro with name="introduction" %}
<div class="intro-content">{{ articleIntro|render|safe }}</div>
{% endarchiveDetail %}
  • Image group field: If a custom field (such asgalleryImages）used to store a set of images, thenitem.Valueor directly called variables will be an array of image URLs. We need to usefora loop to iterate through and display each image.
    
{% archiveDetail gallery with name="galleryImages" %}
<div class="product-gallery">
    {% for imgUrl in gallery %}
    <img src="{{ imgUrl }}" alt="产品图片" />
    {% endfor %}
</div>
{% endarchiveDetail %}
  • the type field selection：Single choice, multiple choice, dropdown selection, etc., theiritem.Valuewill directly be the value(s) selected by the user (or multiple values, usually separated by commas). Output directly.

Three, Tips in Practice & **Practice**

  • Call field naming conventionIn the background setting of custom fields, the name of 'Call Field' should be concise, meaningful, and unique. Following camel case naming convention is a good habit, for exampleproductMaterial/eventDateThis can greatly improve the readability and maintainability of template code.
  • Utilize|safeand|renderMake sure to use for fields that may contain HTML or Markdown (such as multi-line text editor content),|safeFilter to ensure that the content is parsed correctly rather than being escaped as plain text. If Markdown is enabled,|renderthe filter is also indispensable.
  • Conditional judgment{% if %}In displaying custom fields, develop the habit of using{% if item.Value %}or{% if fieldName %}for judgment. This can prevent the front page from displaying empty titles or labels when a field has no content, thereby improving user experience.
  • Distinguish field scenarios: AnQiCMS not only supports custom fields in document details (archiveDetail) and document parameters (archiveParams) but also supports custom fields in category details (categoryDetail) and single page details (pageDetail) Also has similar capabilities. You can add exclusive custom fields for these page types based on business requirements.
  • Make full use of the GoLang underlying advantages of AnQiCMS：AnQiCMS based on Go language, performance efficient. Flexible use of its template tags and custom fields, can help us quickly build efficient, customizable websites.

Through the above method, AnQiCMS makes it easy to display custom content model fields on the front page, whether it is a direct and precise call or a dynamic general traversal, it can easily cope with it, truly realizing flexible content management and presentation.

Common Questions and Answers (FAQ)

1. I have added a custom field 'author email' (field name called) to the article model in the background.authorEmailHow can I display it on the article detail page?You can use it in the article detail templatearchiveDetailTag to call directly: “`twig

Author's email