How to dynamically retrieve and display the content of custom model fields for an article in a template?

In AnQi CMS, the flexibility of website content is one of the key advantages for our content operation and website layout.By customizing the content model field, you can add unique properties for different types of content (such as articles, products) that better reflect your business needs.But how can we dynamically present these carefully defined custom field contents in the front-end template of the website?This article will discuss this topic in detail, helping you fully utilize the powerful functions of AnQiCMS.

Flexible customization, efficient management: Anqi CMS content model fields

The Anqi CMS provides the "flexible content model" feature, which means you can create unique fields for articles, products, and other content according to your actual business scenarios.For example, if you run an e-commerce website, in addition to names and descriptions, products may also require exclusive fields such as 'brand', 'model', 'material', 'stock quantity', etc.These custom fields not only make the backend management more structured, but also lay the foundation for the diverse content presentation on the frontend.

You can find the 'Content Model' feature under 'Content Management' in the Anq CMS backend, where you can define new fields for different models.For example, you can add a 'author bio' text field to the 'article model', or a 'color options' multi-select field to the 'product model', or even a 'product album' group image field.Define these fields and when you publish or edit an article/product, you will see these custom input items.

Retrieve the core tag for custom field content in the template

When the content of the custom field is entered in the background, the next step is how to display them in the front-end template.AnQi CMS provides powerful template tags, making this process very intuitive.Mainly used isarchiveDetailTags andarchiveParams.

1. Accurately retrieve a single custom field:archiveDetailTag

If you already know the specific name of the custom field you want to display,archiveDetailThe tag is your preference. This tag can directly retrieve the content of the custom fields you define, just like obtaining built-in fields such as article title and content.

Assuming you have customized a namedauthor_bioThe field of the author's introduction, then in the article detail page template, you can obtain and display its content in the following way:

<div class="author-info">
    <h3>作者简介：</h3>
    {% archiveDetail authorBio with name="author_bio" %}
    <p>{{ authorBio|safe }}</p>
</div>

We used here{% archiveDetail authorBio with name="author_bio" %}toauthor_bioAssign the content of the field toauthorBiothe variable, then through{{ authorBio|safe }}Display it.|safeThe filter is very important here, especially when your custom field content may contain HTML tags (such as content edited in a rich text editor) as it ensures that the content is parsed correctly and not displayed as plain text. If the custom field stores Markdown-formatted content, you can use|renderThe filter renders it into HTML.

2. Flexibly iterate through all custom fields:archiveParamsTag

Sometimes, you may need to iterate over all the custom fields of an article in a template, or be unsure of the specific field names, in such casesarchiveParamsTags come into play. It can retrieve all custom parameters of the current article or a specified article.

archiveParamsTags have two main usage methods:

a) Traversed as an ordered array:By default,archiveParamsIt will return an ordered array, each item of which includesName(field display name) andValue(field value).

<div class="custom-fields-list">
    <h3>更多文章信息：</h3>
    {% archiveParams params %}
    {% for item in params %}
        <p><strong>{{ item.Name }}：</strong> {{ item.Value }}</p>
    {% endfor %}
    {% endarchiveParams %}
</div>

This method is very suitable for universally displaying all custom fields without concerning about the specific names of the fields.

b) As an unordered Map accessed directly:If you want to access the value of a custom field by its 'access field' name as if it were an object property, you canarchiveParamsthe tag withsorted=falseParameter.

Assuming your article model has definedisbn(ISBN number) andpublisher(publisher) two custom fields, their 'call fields' areisbnandpublisher:

<div class="book-info">
    <h3>图书信息：</h3>
    {% archiveParams bookDetails with sorted=false %}
    <p><strong>ISBN：</strong> {{ bookDetails.isbn.Value }}</p>
    <p><strong>出版社：</strong> {{ bookDetails.publisher.Value }}</p>
    {% endarchiveParams %}
</div>

This method requires you to clearly know the name of the custom field's 'calling field', but it can make the code more concise in certain layouts.

Application based on actual scenarios

After understanding the core tags, let's take a look at some common practical application scenarios:

• Display the product gallery:If you have defined a namedproduct_imagesThe group field is used to store multiple images of the product, and you can display them like this on the product detail page:

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

• Display the specifications or features of the product:Assuming you have custom fields such as 'size', 'weight', 'color', etc., you can combinearchiveParamsto display a list:

  <ul class="product-specs">
      {% archiveParams specs %}
      {% for item in specs %}
          <li><strong>{{ item.Name }}：</strong> {{ item.Value }}</li>
      {% endfor %}
      {% endarchiveParams %}
  </ul>
  

• To display special hints or descriptions:For example, an article has a field namedspecial_note(Special reminder) single-line text field