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

In the world of content management, flexibility is the key to website success.Most of the time, we find that the standard "article" or "product" content model does not fully meet our unique business needs, such as the need to add unique attributes such as "material", "size", etc. for a specific type of product, or to add information such as "registration deadline", "event location", etc. to the event detail page.At this time, the powerful custom content model function of AnQiCMS can fully display its prowess.

How do these custom fields we carefully design in the background cleverly and flexibly display on the front-end page?

The foundation of building a custom content model in the background

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

To start, we will 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 critical part is the "Custom field of content model". We will set several key properties for each field:

• Parameter Name: This is the Chinese display name of the field, which is convenient for us to understand and manage in the background. For example, 'author', 'product material'.
• Field invocationThis is the unique identifier for the field called in the template, it is usually 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, numbers, multi-line text (supporting Markdown), single choice, multiple choice, dropdown selection, etc.Choose the appropriate type to ensure data validity and the convenience of front-end display.
• Mandatory?: Determines whether the field must be filled in when content is published.
• Default value: Especially for selection type fields, we can preset option values here, one per line.

After the configuration is completed, when we go to “Add Document”, select the corresponding content model category, these custom fields will appear in the “Other Parameters” area, waiting for us to fill in specific content.

Second, present custom fields skillfully on the front-end template

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

1. Directly call the known custom fields

If we clearly know the name of the 'reference field' of the custom field to be displayed, we can directly use it on the document detail page (or other supported pages)archiveDetailtags to obtain.

Suppose we add a custom field named "article source" to the "article model", with the "called field" set tosource. So in the article detail template, we can call it like this:

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

If it is necessary to display this field on the list page (provided that the field is included in the data when the list is queried), then inarchiveListin the loopitemthe object, you can also access it directly:

{% 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. Flexibly traverse and display all custom fields

The most powerful flexibility of AnQiCMS is that even if we are not clear about which custom fields a model defines, we can still go througharchiveParamsLabels dynamically traverse and display them. This is very useful for developing general templates or dealing with frequent field changes.

archiveParamsThe tag can retrieve all custom fields and their values of the current document (or specified document) and return them as 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 custom field information.item.Namecorresponds to the parameter name set in the background (such as "article author"), anditem.ValueThis corresponds to the specific content of the field. 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 details of different field types

Different handling may be required when displaying fields of different types:

• Multiline text (especially Markdown): If the backend content editor is enabled for Markdown and the custom field type is multi-line text, then when displayed on the frontend, it usually requires using|renderThe filter renders Markdown syntax to HTML and combines|safeThe filter, to prevent HTML code from being escaped and displayed directly.

  
  {% archiveDetail articleIntro with name="introduction" %}
  <div class="intro-content">{{ articleIntro|render|safe }}</div>
  {% endarchiveDetail %}
  

• Image group fieldIf a custom field (such asgalleryImages) is used to store a set of images, thenitem.Valueor a directly called variable will be an array of image URLs. We need to useforLoop to traverse and display each image.

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

• Select the type field: Single choice, multiple choice, dropdown selection, etc., itsitem.ValueWill be the value selected by the user (or multiple values, usually separated by commas). Output directly.

III. Tips and practices in practice **practice

• Naming conventions for calling fieldsWhen setting up custom fields in the background, the name of the 'invoked field' should be concise, meaningful, and unique. It is a good practice to follow camelCase naming conventions, for example,productMaterial/eventDateThis can greatly improve the readability and maintainability of template code.
• Utilize|safeand|renderBe sure to use for fields that may contain HTML or Markdown (such as multi-line text editor content).|safeThe filter ensures that the content is parsed correctly and not escaped as plain text. If Markdown is enabled,|renderthe filter is also indispensable.
• Conditional judgment{% if %}Before displaying custom fields, get into the habit of using{% if item.Value %}or{% if fieldName %}to judge. This can avoid the appearance of empty titles or labels on the front-end page when a field has no content, enhancing user experience.
• Differentiate field scenarios: AnQiCMS not only supports custom fields in document details (archiveDetail) and document parameters (archiveParams) but also supports custom fields like category details (categoryDetail) and single page details (pageDetail) Also has similar capabilities. You can add dedicated custom fields for these page types according to your business needs.
• Make full use of the GoLang underlying advantages of AnQiCMSBased on Go language, AnQiCMS is built with high performance. It can be flexibly used with template tags and custom fields, which can help us quickly build efficient and customizable websites.

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

Frequently Asked Questions (FAQ)

1. I added a custom field "Author Email" for the article model (the field name isauthorEmail), how do I display it on the article detail page?You can use in the article detail templatearchiveDetailtag to call directly: “`twig

Author email