How to flexibly call and display the value of the 'Content Model Custom Field' in the AnQiCMS frontend page?

The Anqi CMS excels in content management, especially its flexible content model and custom field functions, which provide great convenience for building personalized websites.The content of a website is often not just the title and text, we may also need various additional information such as the author of the article, the source of publication, product specifications, event location, and floor area.These custom fields are like a 'personal file folder' for content, allowing us to tailor the required attributes for each content type according to business needs.

How can we cleverly call and display the values of these rich custom fields after creating them in the background for the content model on the website front-end page?This is the core of what we are discussing in this article.

Custom field: Make your content management more flexible

First, let's briefly review the custom fields of Anqi CMS.In the background, go to the "Content Management" under the "Content Model", and you will see that the system defaults to provide article and product models.Of course, you can also add a completely new content model according to your business needs.Each content model can be configured with dedicated 'custom fields', for example, you can add 'product model', 'color', 'inventory quantity', and other fields to the 'product model'.

When adding a field, we need to define the "parameter name" (for display on the backend) and the "call field" (for template calls), and select an appropriate "field type" (such as single-line text, number, multi-line text, single choice, multiple choice, dropdown, etc.), and you can also set whether it is required and the default value.This 'call field' determines how we accurately refer to and display these custom information in the front-end template.

Several methods to call custom fields on the front-end page

The Anqi CMS template engine syntax is similar to Django, which makes field calls intuitive and powerful. There are usually the following flexible ways to call custom field values:

Method one: Access directly via variable (suitable for the current content detail page)

When you are creating a detailed article page, product details page, or other templates that directly display complete information about the content, the system will automatically load all the data of the current content (including custom fields) intoarchiveThis variable contains (for the category detail page it iscategoryvariable). At this point, you can directly access the value of the custom field using dot notation.

Suppose you created a 'author' field for the article model, with the 'reference field' set toauthorThen you can display it simply on the article detail page template:

<p>文章作者：{{ archive.author }}</p>

If your custom field is of numeric type, for example, the calling field of "reading time" isreadTime:

<p>预计阅读时长：{{ archive.readTime }} 分钟</p>

This method is very convenient and is particularly suitable for directly displaying on the details page of the current content.

Method two: usearchiveDetailorcategoryDetailTag

When you need to control the field retrieval more accurately, or want to obtain specific content *not on the current page* (such as displaying a custom field of a specified ID article in the sidebar),archiveDetailOr for articles or productscategoryDetailThe tag for classification is very useful.

Both these tags can benameSpecify the field to retrieve. For example, you can display the "author" field of an article with ID 10 in a module on the homepage:

<div>特荐文章作者：{% archiveDetail with name="author" id="10" %}</div>

Or in the category list page, display a custom field of the category with ID 5.bannerText:

<div>分类横幅文字：{% categoryDetail with name="bannerText" id="5" %}</div>

This approach provides greater flexibility, allowing you to call specific fields across content.

Method three: usearchiveParamsLabel loop acquisition

Sometimes, you may want to dynamically display all or part of custom fields on a page without needing to know the specific names of each field, or the number and type of these fields may change. At this time,archiveParamsThe tag comes into play. It can retrieve all custom parameters of a specified document (or the current document) and provide them in the form of an array or Map, making it convenient for us to iterate over them.

This tag defaults to retrieving all custom fields of the current document and organizing them into a reusable array. You can iterate over and display them in the template like this:

<div class="custom-fields">
    {% 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 (such as 'Article Author'),item.ValueThe value entered by the user. If you create a custom field in the background and set the 'Default Value' to empty, and the user does not fill in the content when publishing, thenitem.Valueit will be an empty string.

If your business scenario requires more fine-grained control, such as displaying only specific named custom fields, or you want to access via field name instead of loop index, you canarchiveParamslabel'ssortedthe parameter tofalseThus,paramsThe variable will become a Map, you can access it directly by field name:

<div class="specific-fields">
    {% archiveParams params with sorted=false %}
        <p>文章来源：{{ params.source.Value }}</p>
        <p>发布日期：{{ params.publishDate.Value }}</p>
    {% endarchiveParams %}
</div>

HeresourceandpublishDateAll are the 'callback fields' of the custom fields you set in the background.

Handling values of different types of custom fields

The types of custom fields are diverse, and their display methods on the front end also need to be appropriately handled:

• Single-line text and numeric types:This field's value is usually a simple string or number, which can be displayed directly.

  <p>联系电话：{{ archive.phoneNumber }}</p>
  <p>商品价格：￥{{ archive.price }}</p>
  

• Multiline text (rich text editor):If a custom field uses a rich text editor, its value may contain HTML tags. To render these HTMLs correctly on the front end, rather than displaying the source code directly, you need to use|safefilter.

  <div class="product-features">
      <h3>产品特点</h3>
      {{ archive.features|safe }}
  </div>
  

  If the rich text content is in Markdown format and the Markdown editor is enabled on the backend, you can add extra parameters byrender=truecoordinating|safe）to ensure it is rendered correctly as HTML.

  <div class="markdown-content">
      {{ archive.markdownIntro|render|safe }}
  </div>
  

• Single choice, multiple choice and dropdown choice:

  • Single choice and dropdown choiceIt usually stores only one value and can be directly called like ordinary text.

    
    <p>产品颜色：{{ archive.color }}</p>
    

  • Multiple selectionsValues are usually stored multiple times, these values may exist in the database in the form of a string connected by commas or other delimiters, or they may be an array directly. If it is a comma-separated string