How to flexibly call and display the value of the 'Content Model Custom Fields' of AnQiCMS on the front-end page?

The AnQi CMS excels in content management, especially its flexible content model and custom field features, which provide great convenience for us to build 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 house area.These custom fields are like a 'personal filing cabinet' for content, allowing us to tailor the required attributes to each type of content according to business needs.

Then, after we have created these rich custom fields for the content model in the background, how can we cleverly call and display their values on the front-end page of the website?This is the core of what we are discussing in this article.

Custom fields: Make your content management more flexible

Let's take a simple review of the custom fields of the Aanqi CMS.In the background, go to 'Content Management' under 'Content Model', and you will see that the system provides default article and product models.Of course, you can also add a completely new content model based on your business needs.Each content model can be configured with exclusive 'custom fields', for example, you can add 'product model', 'color', 'stock quantity', and other fields to the 'product model'.

Several methods of calling custom fields in the front-end page

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

Method one: Access through variables (suitable for the current content detail page)

When you are creating templates such as article detail pages, product detail pages that directly display complete information, the system will automatically load all the data of the current content (including custom fields) intoarchiveThis variable in (for category detail page iscategoryvariable). At this time, you can directly access the value of the custom field using dot notation.

Assuming you have created an 'author' field for the article model, with its 'call field' set toauthor, you can simply display it in the article detail page template:

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

If your custom field is of numeric type, for example, the calling field of 'Reading Duration' isreadTime:

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

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

Method two: usearchiveDetailorcategoryDetailtags

When you need to control the field retrieval more precisely, or want to retrieve *non-current page* specific content (such as displaying a certain custom field of a specified ID article in the sidebar),archiveDetail(Used for articles or products) orcategoryDetailLabels for categories are very useful.

These tags can be used throughnameParameters can be used to specify the fields to be retrieved. For example, you can display the "author" field of the 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 method provides greater flexibility, allowing you to call specific fields across content.

Method three: usingarchiveParamsTag 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,archiveParamsTags come into play. It can retrieve all custom parameters of the specified document (or the current document) and provide them in the form of an array or Map, making it convenient for us to iterate through them.

This tag will default to getting all the custom fields of the current document and organizing them into a recyclable 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" (such as "Article Author") you set in the backgrounditem.ValueThe value entered by the user. If you set 'Default value' to empty while creating a custom field in the background and the user does not fill it out when publishing content, thenitem.Valuewill be an empty string.

If your business scenario requires more fine-grained control, for example, to only display specific named custom fields, or if you want to access via field name rather than loop index, you canarchiveParamsTagssortedparameter settingsfalselike this,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>

HeresourceandpublishDateThey are the 'Called Field' of the custom fields you set up in the background.

Handle values of custom fields of different types

Custom field types are various, and the display method on the front end also requires us to make appropriate processing:

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

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

• Multi-line 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 (withrender=trueparameters配合|safe）to ensure it is rendered correctly as HTML.

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

• Single choice, multiple choice, and dropdown selection:

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

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

  • Multiple selectionValues are usually stored in multiple, these values may exist in the database in the form of a comma-separated string or other delimiters, or they may be an array directly.